Skip to content

Latest commit

 

History

History
94 lines (77 loc) · 4.6 KB

README.md

File metadata and controls

94 lines (77 loc) · 4.6 KB

react-native-awesome-modal

A flexible and reusable modal.

Install

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

or

 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

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Denise-Ng

💻 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!