React-native-awesome-modal NPM

react-native-awesome-modal

A flexible and reusable modal.

Install

 npm install react-native-awesome-modal --save

 yarn add react-native-awesome-modal

Usage

import {AwesomeModal} from 'react-native-awesome-modal'

const App: () => React$Node = () => {
  // Have to use the useRef hook to control the modal 
  // from the parent component
  const modalRef = useRef(null);
  return (
    <AwesomeModal
        enableScroll
        onClose={() => console.log('close')}
        onPressOutside={() => console.log('outside')}
        modalBottomMargin={0}
        modalRef={(ref) => {modalRef.current = ref}}
        modalContainerStyle={{
          width: "99%",
          maxHeight: 600,
          borderTopRightRadius: 20,
          borderTopLeftRadius: 20,
        }}
        modalOverlayStyle={{
          backgroundColor: 'grey'
        }}
      >
        // Place modal's content here as the component's child
        <Text>HELLO!</Text> 
        <TouchableOpacity onPress={() => modalRef.current.scrollToTop()} style={styles.buttonStyle}>
            <Text style={styles.buttonTextStyle}>Scroll to top</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => modalRef.current.close()} style={styles.buttonStyle}>
            <Text style={styles.buttonTextStyle}>Close Modal</Text>
        </TouchableOpacity>
    </AwesomeModal>
  )
};
.....

Props

The props below are used to configure and style the modal.

Prop	Type	Optional	Default	Description
enableScroll	boolean	Yes	false	Container of the modal's content will be a ScrollView instead of a View if set to true.
hasTabBar	boolean	Yes	false	Whether the app has a tab bar (i.e. requires bottom padding for the modal)
overflowShow	boolean	Yes	false	Whether to show overflown elements.
closeOnPressOutside	boolean	Yes	true	Whether to close the modal on press outside of it
modalBottomMargin	number	Yes	45	The bottom margin of modal.
isCentered	boolean	Yes	false	Whether the modal is centered on the screen. The value supplied to `modalBottomMargin` will be ignored if `isCentered` is set to True.
onClose	() => void	Yes		Function to call when the modal closes.
onPressOutside	() => void	Yes		Function to call when the user presses outside of the modal.
modalContainerStyle	StyleProp	Yes	See awesome-modal.tsx	The modal's container style.
modalInnerContainerStyle	StyleProp	Yes	See awesome-modal.tsx	The modal's content container style.
modalOverlayStyle	StyleProp	Yes	See awesome-modal.tsx	The modal's overlay style (i.e the translucent overlay behind the modal).
modalRef	(ref: AwesomeModal	undefined) => void	Yes		The modal's ref to control the modal from the parent component.