react-native-unit-components/src/helpers/BottomSheet/BottomSheet.styles.ts

Unit React Native components

import { StyleSheet } from 'react-native';

import { VARIABLES } from '../../styles/variables';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const getStylesObject = (fadeAnim: any) => {
  return StyleSheet.create({
    outsideContainer: {
      position: 'absolute',
      top: 0,
      bottom: 0,
      right: 0,
      left: 0,
    },
    animation: {
      backgroundColor: 'black',
      flex: 1,
      opacity: fadeAnim,
    },
    container: {
      position: 'relative',
      flex: 1,
      shadowColor: VARIABLES.COLORS.BLACK,
      shadowOffset: {
        width: 0,
        height: 6,
      },
      shadowOpacity: 0.37,
      shadowRadius: 7.49,
      elevation: 12,
      borderTopLeftRadius: 15,
      borderTopRightRadius: 15,
      backgroundColor: VARIABLES.COLORS.WHITE,
      overflow: 'hidden',
    },
    lineContainer: {
      borderTopLeftRadius: 30,
      borderTopRightRadius: 30,
      alignItems: 'center',
    },
    line: {
      width: 35,
      height: 4,
      borderRadius: 2,
      marginTop: 18,
      backgroundColor: VARIABLES.COLORS.SILVER_FLAKE,
    },
    outerContent: {
      flex: -1,
    },
    innerContent: {
      flex: -1,
    },
    closeButton: {
      position: 'absolute',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: 36,
      height: 36,
      backgroundColor: VARIABLES.COLORS.WHITE,
      borderRadius: 18,
      padding: 7,
      top: 12,
      right: 12,
      zIndex: 100,
    },
  });
};