Skip to content

qztbl/react-native-bottom-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rn-bottom-modal

  • Modal with bottom slide out animation
  • Customizable content components
  • Support Android and IOS

Install

$ yarn add rn-bottom-modal

or

$ npm install rn-bottom-modal --save

Import

import {BottomModal} from 'rn-bottom-modal'

Props

Props Type Desc Default
containerStyle StyleProp Sets view style of content root view. undefined
hasMask boolean Sets whether show mask. true
touchOutsideClose boolean Sets whether touch outside the content to close this modal. true
backKeyClose boolean Sets whether close this modal with android BACK key . [only Android] true
keyboardAvoid boolean Sets whether use KeyboardAvoidingView. [only IOS] false
onShow function Sets the show callback. undefined
onDismiss function Sets the close callback. undefined

Methods

Methods Desc
show() use ref call this function to show modal
dismiss() use ref call this function to close modal

Example

<Button 
  title="show Modal" 
  onPress={()=>{
    ref.current?.show()
  }}/>
<BottomModal
  ref={ref}
  containerStyle={{ height: 200 }}
  onShow={()=>{
    console.info("show======")
  }}
  onDismiss={() => {
    console.info("dismiss======")
  }}>
  <Text>Content</Text>
</BottomModal>