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.

GitHub