react-native-modal-wrapper

Wrapper component that extends the react native Modal component, adding overlay clickable behavior and allowing swipe in and out in all directions

Install

npm install react-native-modal-wrapper --save

Central modal box example

<ModalWrapper     onRequestClose={this.onCancel}     style={{ width: 280, height: 180, paddingLeft: 24, paddingRight: 24 }}     visible={isOpen}>   <Text>New project</Text>   <TextField       autoFocus={true}       placeholder="Project name"       onNameChange={this.onNameChangeHandler}       onSubmitEditing={this.onSubmit} />   <View>     <MDButton text="CANCEL" type="regular" flat={true} onPress={this.onCancel} />     <MDButton text="CREATE" type="primary" flat={true} onPress={this.onSubmit} />   </View> </ModalWrapper>

Bottom contextual menu example

<ModalWrapper     containerStyle={{ flexDirection: 'row', alignItems: 'flex-end' }}     onRequestClose={onClosed}     style={{ flex: 1 }}     visible={isOpen}>   {this.contextMenuActions.map(([id, text, onPress]) => 	<MDButtonIcon 	    key={id} 	    name={id} 	    iconStyle={styles.optionText} 	    style={styles.option} 	    onPress={() => { 		  onClosed(); 	      onPress(); 	    }}> 	  <Text>{text}</Text> 	</MDButtonIcon>   )} </ModalWrapper>

Right contextual menu example

<ModalWrapper     containerStyle={{ flexDirection: 'row', justifyContent: 'flex-end' }}     onRequestClose={() => this.setState({ isFilterByTagPanelOpen: false })}     position="right"     style={styles.sidebar}     visible={isFilterByTagPanelOpen}>   <FilterByTag       onClose={() => this.setState({ isFilterByTagPanelOpen: false })}       onSelection={tags => updateProjectFilter({ tags })}>   </FilterByTag> </ModalWrapper>

Modal without overlay example

<View style={styles.container} onLayout={() => this.forceUpdate()}>   {/* Page Content */}   <ModalWrapper       isNative={false}       onRequestClose={this.onRequestClose}       position='left'       shouldAnimateOnRequestClose={true}       showOverlay={false}       style={[styles.modalStyle, (() => {         const { height, width } = Dimensions.get('window');         const modalHeight = 100;         const modalWidth = 280;         return {           top: (height - modalHeight) / 2,           left: (width - modalWidth) / 2         };       })()]}       visible={this.state.visible}>     <View style={styles.container}>       <Text style={styles.modalText}>Modal without overlay</Text>     </View>   </ModalWrapper> </View>

Properties

This component supports all the properties of the original react native modal component https://facebook.github.io/react-native/docs/modal.html, plus the following:

Prop	Default	Type	Description
animateOnMount	false	`bool`	Determine whether or not animate the modal if it's visible when it mounts.
animationDuration	300	`number`	Duration of the animation.
position	bottom	`string`	Position where the sliding animation of the modal should start. Accepted values: "top", "bottom", "left", "right".
containerStyle	-	`any`	Container styles used for positioning the modal with flexbox (default: alignItems: 'center', flex: 1, justifyContent: 'center'). See the examples.
isNative	true	`bool`	Determine the usage of the react native modal component or a simple view wrapper instead. It can be set to false to overcome some react native modal limitations (for example to have more than one modal open at the same time).
onAnimateClose	() => null	`func`	Callback executed after the modal is closed.
onAnimateOpen	() => null	`func`	Callback executed after the modal is open.
overlayStyle	-	`any`	Styles used to define the overlay backgroundColor (default: "#000") and opacity (default: 0.5).
overlayTestID	-	`string`	testID prop for the overlay element.
screenHeight	computed screen height	`number`	Allow the user to manually set the right screen height to adjust the keyboardSpacer due to an issue on iPad in react native https://github.com/facebook/react-native/issues/7340.
shouldAnimateOnOverlayPress	true	`bool`	Determine whether or not animate the modal closing down when the overlay is pressed.
shouldAnimateOnRequestClose	false	`bool`	Determine whether or not animate the modal closing down when the onRequestClose callback is executed.
shouldCloseOnOverlayPress	true	`bool`	Determine whether or not allow the modal closing down if the overlay is pressed.
showOverlay	true	`bool`	Determine whether or not showing the overlay. In combination with isNative={false} it is possible to interact with the background of the application when the modal is still open.
style	-	`any`	Styles of the modal (default: backgroundColor: '#fff', justifyContent: 'center').

Note: this component sets some properties of the underlying native modal component to allow sliding flexibility in each direction and the clickable overlay behavior, therefore we suggest not to change those. However, you can set to 0 the animationDuration prop to avoid the component sliding logic from top, bottom, left or right and therefore turning on the react native modal animationType prop, disabled by default. Here the list of the react native modal properties set by default:

Prop	Default	Type	Description
animationType	"none"	`string`	The react native modal has limited animation customization, therefore the animation logic is done externally using position and animationDuration.
transparent	true	`bool`	We want to have the overlay by default.

React Native Modal Wrapper