expo-react-native-toastify/lib/components/styles.js

expo-react-native-toastify allows you to add notifications to your expo react-native app (ios, android, web) with ease.

import { RFPercentage } from 'react-native-responsive-fontsize';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 20000,
    margin: 0,
  },

  mainContainer: {
    borderRadius: 6,
    position: 'absolute',
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    alignSelf: 'center',
  },

  hideButton: {
    position: 'absolute',
    top: RFPercentage(0.5),
    right: RFPercentage(0.5),
    zIndex: 100,
  },

  textStyle: {
    fontSize: 16,
    fontWeight: '400',
  },

  progressBarContainer: {
    flexDirection: 'row',
    position: 'absolute',
    height: 4,
    width: '100%',
    bottom: 0,
  },

  content: {
    width: '100%',
    padding:15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexWrap: 'nowrap',
  },

  iconWrapper: {
    marginRight: RFPercentage(0.5),
  },
});

export default styles;