rgabs/react-native-modal-overlay

An overlay component built using native Modal which can be invoked from anywhere in the component hierarchy.

react-native-modal-overlay

An overlay component built using native Modal which can be invoked from anywhere in the component hierarchy.

NPM URL- https://www.npmjs.com/package/react-native-modal-overlay

Features

• Unlike other modal/overlay components, it can be triggered from anywhere in the component hierarchy since it is using react-native Modal.
• Used react-native components. So no linking is required.
• Works out of the box for both Android and IOS.
• Can be customised by passing style props.
• Supports closeOnTouchOutside.

GIFs

Props

This module accepts the following props:

Prop	Explanation	Default Value	Type
animationType	Animation Type for modal/overlay. Can be any of the animations provided by react-native-animatable. Example: fadeInUp zoomIn, bounceIn, flipInX, lightSpeedIn, etc.	'fadeIn'	string
easing	Timing function for the animation provided by react-native-animatable	'ease'	string
visible	Sets modal visibility	false	Boolean
closeOnTouchOutside	If modal should close on touching outside the child component	false	Boolean
onClose	Function to be called on close.	noop	Function
containerStyle	Style for the Overlay container.	{}	Object
childrenWrapperStyle	Style for children container.	{}	Object
accessible	Whether internal components should be declared as accessible. Useful for iOS XCUITest.	true	Boolean

Installation

npm install react-native-modal-overlay --save or if you are using Yarn, yarn add react-native-modal-overlay

Examples:

Simple usage with default props

import React, { Component} from 'react';
import Overlay from 'react-native-modal-overlay';

export default class OverlayExample extends Component {
  state = {
    modalVisible: true, 
  }
  
  onClose = () => this.setState({ modalVisible: false});
  
  render() {
    return (
        <Overlay visible={this.state.modalVisible} onClose={this.onClose} closeOnTouchOutside>
          <Text>Some Modal Content</Text>
        </Overlay>
    );
  }
}

Complex usage with render props

Use case: For Example you have a cross button inside your modal and you want to close the modal when the button is pressed. This can be done by calling hideModal argument in the render props instead of calling onClose. Refer to the example below:

import React, { Component, Fragment} from 'react';
import Overlay from 'react-native-modal-overlay';

export default class OverlayExample extends Component {
  state = {
    modalVisible: true, 
  }
  
  onClose = () => this.setState({ modalVisible: false});
  
  render() {
    return (
      <Overlay visible={this.state.modalVisible} onClose={this.onClose} closeOnTouchOutside
        animationType="zoomIn" containerStyle={{backgroundColor: 'rgba(37, 8, 10, 0.78)'}}
        childrenWrapperStyle={{backgroundColor: '#eee'}}
        animationDuration={500}>
        {
          (hideModal, overlayState) => (
            <Fragment>
              <Text>Some Modal Content</Text>
              <Text onPress={hideModal}>Close</Text>
            </Fragment>
          )
        }
      </Overlay>
    );
  }
}

Note that the whole hideModal and internal state of the component is being passed as arguments to the render prop.

Example Project URL: https://github.com/rgabs/react-native-modal-overlay-example

Don’t forget to hit star if you like my work :)

react-native-modal-overlay's Issues

Unable to close modal correctly

Just installed, after modal is being hidden, the background color came back

Animate out query

Great work here. I just have one query.

As far as I can tell, the overlay animates in when the visible prop becomes true. But I cannot see a way to make it animate out when the visible prop becomes false.

Is this possible in any way? (I have set childrenWrapperStyle to max width and height, so no overlay background to click)

Thanks for your time, hope you can help :)

Changes android bottom bar color

I use react-native-navigation-bar-color to change the bottom bar color for android.
When overlay is visible it changes it back to default. I think it shouldn't hinder with it.

Please update readme & example to reflect required props

Please update readme & example to include the onClose prop.

You are declaring PropTypes.isRequired in propTypes but in the example & readme you are not using it.

Slide only the modal and not the overlay

Currently, the overlay slides with the modal. But, the overlay should fade and the modal should slide.

onClose triggers twice

Hi there. When toggling the visibility, it seems to get called twice.

function toggleModalVisible() {
    setModalVisible(!modalVisible);
  }

        <Overlay
          visible={modalVisible}
          closeOnTouchOutside
          onClose={toggleModalVisible}
        >
          {(hideModal) => (
            <SettingsOverlay
              toggleModalVisible={toggleModalVisible}
              hideModal={hideModal}
              endStory={endStory}
              storyId={storyId}
            />
          )}
        </Overlay>

//SettingsOverlay:
     <View style={styles.exit}>
        <IconButton
          icon="close"
          size={20}
          onPress={toggleModalVisible} // (also double-fires when this is props.hideModal)
        />
      </View>

Is the relevant part.

This seems to happen if I use the toggle modal visible, or hideModal. It happens for both when the close button is pressed, and when touched outside.

Thanks.

ScrollView component not scrollable within the overlay?

Close the modal with a button

Hello,

I have this code:

	<Overlay visible={this.props.tale.selected}
					 onClose={this.handlers.onCloseTaleModal}
					 closeOnTouchOutside
					 animationType={'zoomIn'}
					 containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.3)' }}
					 animationDuration={500}
			>
				<Text>Compte: { this.props.tale.id }</Text>
				<Icon.Button name="play-arrow" onPress={this.handlers.navTale}>
					Lire le conte
				</Icon.Button>
			</Overlay>

And I would like to know how can I from the onPress of the button close the modal.

Thank you !