ChargEco/Strides-APP/app/components/BottomModal.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Modal from 'react-native-modal';

export const ModalProps = {
  avoidKeyboard: true,
  animationIn: "fadeIn",
  animationOut: "fadeOut",
  propagateSwipe: true,
  useNativeDriver: !isIOS,
  statusBarTranslucent: true,
  deviceHeight: $height + statusHeight,
  hideModalContentWhileAnimating: true
}

export default BottomModal = ({
  visible=false,
  onHide,
  children,
  backdropOpacity=0.7,
  style=styles.bottomModalView,
  contentStyle=styles.bottomModalContent}) => {
  return (
    <Modal
      isVisible={visible}
      onBackButtonPress={onHide}
      onBackdropPress={onHide}
      useNativeDriver={!isIOS}
      statusBarTranslucent={true}
      backdropOpacity={backdropOpacity}
      style={style}>
      <View style={contentStyle}>
        {children}
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  bottomModalView: {
    margin: 0,
    justifyContent: 'flex-end'
  },
  bottomModalContent: {
    maxHeight: $vht(isIOS ? 92 : 96),
    backgroundColor: pageBackground,
    ...$borderRadius(20, 20, 0, 0)
  },
})