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. |