@hmscore/react-native-hms-push/example/src/components/ShowMessagesStyles.js

React Native HMS Push Kit

import { StyleSheet, Dimensions } from 'react-native';

const { height } = Dimensions.get('window');

const styles = StyleSheet.create({
    container: {
      position: 'relative',
      bottom: 0,
      width: '100%',
      height: 300,
      backgroundColor: '#f4f4f4',
      borderTopLeftRadius: 24,
      borderTopRightRadius: 24,
      padding: 20,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: -3,
      },
      shadowOpacity: 0.1,
      shadowRadius: 6,
      elevation: 5,
      marginTop: 10,
    },

    header: {
      fontSize: 18,
      fontWeight: 'bold',
      marginBottom: 12,
      color: '#333',
    },

    scrollArea: {
      flex: 1,
    },

    messageText: {
      fontSize: 14,
      color: 'black',
      paddingVertical: 6,
      borderBottomWidth: 1,
      borderBottomColor: '#ddd',
    },

    messageText2: {
      fontSize: 14,
      color: 'black',
      paddingVertical: 6,
      borderBottomWidth: 1,
      borderBottomColor: '#ddd',
    },

    messageText3: {
      fontSize: 14,
      color: 'black',
      paddingVertical: 6,
      borderBottomWidth: 1,
      borderBottomColor: '#ddd',
    },

    textHighlight: {
      color: 'red',
      fontWeight: '600',
    },

    textHighlight2: {
      color: 'blue',
      fontWeight: '500',
    },

    infoBox: {
      backgroundColor: '#e0f7fa',
      padding: 10,
      borderRadius: 8,
      marginVertical: 4,
    },

    warnBox: {
      backgroundColor: '#fff3cd',
      padding: 10,
      borderRadius: 8,
      marginVertical: 4,
    },

    errorBox: {
      backgroundColor: '#f8d7da',
      padding: 10,
      borderRadius: 8,
      marginVertical: 4,
    },

    footerText: {
      fontSize: 12,
      textAlign: 'center',
      color: '#aaa',
    },

    footerText2: {
      fontSize: 12,
      textAlign: 'center',
      color: '#666',
    },

    label: {
      fontSize: 16,
      color: '#555',
      fontWeight: '600',
      marginBottom: 8,
    },

    label2: {
      fontSize: 16,
      color: '#444',
      fontWeight: '700',
      marginBottom: 10,
    },

    iconWrapper: {
      flexDirection: 'row',
      alignItems: 'center',
      marginVertical: 4,
    },

    iconWrapper2: {
      flexDirection: 'row',
      alignItems: 'center',
      marginVertical: 6,
    },

    iconText: {
      fontSize: 14,
      marginLeft: 6,
      color: '#333',
    },

    borderBox: {
      borderWidth: 1,
      borderColor: '#ccc',
      padding: 10,
      borderRadius: 6,
      marginVertical: 5,
    },

    borderBox2: {
      borderWidth: 1,
      borderColor: '#bbb',
      padding: 12,
      borderRadius: 6,
      marginVertical: 5,
    },

    shadowBox: {
      backgroundColor: '#fff',
      padding: 12,
      borderRadius: 8,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.2,
      shadowRadius: 3,
      elevation: 4,
    },

    tag: {
      backgroundColor: '#d1ecf1',
      color: '#0c5460',
      fontSize: 12,
      paddingHorizontal: 8,
      paddingVertical: 4,
      borderRadius: 12,
      overflow: 'hidden',
      marginRight: 6,
    },

    flexRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },

    flexRow2: {
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
    },

    flexColumn: {
      flexDirection: 'column',
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
    },

    section: {
      marginVertical: 10,
    },

    section2: {
      marginVertical: 12,
    },

    divider: {
      height: 1,
      backgroundColor: '#ccc',
      marginVertical: 8,
    },

    highlighted: {
      backgroundColor: '#f0f8ff',
      padding: 8,
      borderRadius: 6,
    },
    
    highlighted2: {
      backgroundColor: '#e8f4ff',
      padding: 10,
      borderRadius: 8,
    },

    muted: {
      color: '#999',
    },

    muted2: {
      color: '#bbb',
    },

    rounded: {
      borderRadius: 100,
    },

    spacingSm: {
      margin: 4,
    },

    spacingSm2: {
      margin: 6,
    },

    spacingMd: {
      margin: 8,
    },

    spacingMd2: {
      margin: 10,
    },

    spacingLg: {
      margin: 16,
    },

    spacingLg2: {
      margin: 18,
    },
    
    spacingXl: {
      margin: 24,
    },

    paddingSm: {
      padding: 4,
    },

    paddingMd: {
      padding: 8,
    },

    paddingLg: {
      padding: 16,
    },

    paddingXl: {
      padding: 24,
    },

    centered: {
      alignItems: 'center',
      justifyContent: 'center',
    },
    
    centered2: {
      alignItems: 'center',
      justifyContent: 'space-between',
    },
});

export default styles;