react-native-js-only-modal

If you are new to react-native you will find that react-native already has a Modal component that you could already use.

Now the different between this and what react-native already have is that, first this is only js library, it dose not use any native code and also dose not reuse react-native Modal component like other libraries.

Which make it much faster at rendering and easier to customize.

Features

Smooth enter/exit animations Plain simple and flexible APIs Customizable backdrop styling Listeners for the modal animations start and ending Resize itself correctly on device rotation

Setup

The library available at npm install react-native-js-only-modal

Snack Example

react-native-js-only-modal

usage

Since react-native-js-only-modal dose not include any native code and use only js then you need it to be able to reach the root of the app.

In APP components add the Provider around the whole component

1. import { Provider } from 'react-native-js-only-modal';

import { Provider } from 'react-native-js-only-modal';
const App =()=> {
return (
 <Provider>
  ...Your components here
 </Provider>
)
}

2. Create a component and nest its content inside of it

import { Modal } from 'react-native-js-only-modal';
 
function WrapperComponent() {
 // show the Modal by setting `visible` = true
 const [visible, setVisible] = React.useState(true);
  return (
    <View>
      <Modal visible={visible}>
        <View style={{ flex: 1 }}>
          <Text>I am the modal content!</Text>
        </View>
      </Modal>
    </View>
  );
}

The visible prop is the only prop you'll really need to make the modal work: you should control this prop value by saving it in your wrapper component state and setting it to true or false when needed.

Modal already has transparent background so by setting style you can customize it however you like.

Available props

Name	Type	Default	Description
visible	boolean	REQUIRED	Show the modal?
onCloseRequest	Function	undefined	Triggered when the backdrop gets clicked/swaped
hideBackDrop	boolean	false	Do not show backdrop
backDropStyle	StyleProp<ViewStyle>	undefined	override the default style, eg opacity, backgroundColor
style	StyleProp<ViewStyle>	undefined	Modal Content Style
containerStyle	StyleProp<ViewStyle>	undefined	The Modal wrapper style, You can specify the position of the content by for example add justifyContent: "flex-start" to make the Modal apear at the top. Also If you have any issue with the height of the modal you could specify maxHeight and minHeight here
easing	string	"ease"	Timing function for the animation. Valid values: linear, ease, ease-in, ease-out, ease-in-out, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-circ, ease-out-circ, ease-in-out-circ, ease-in-expo, ease-out-expo, ease-in-out-expo, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-quart, ease-out-quart, ease-in-out-quart, ease-in-quint, ease-out-quint, ease-in-out-quint, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-back, ease-out-back, ease-in-out-back. See react-native-animatable for more info
animationIn	string	"slideInDown"	Specify the animation when the Modal appear eg visible= true see react-native-animatable for other animations
animationOut	string	"slideOutUp"	Specify the animation when the Modal disappear eg visible= false see react-native-animatable for other animations
direction	string	"normal"	Direction of animation, especially useful for repeating animations. Valid values: normal, reverse, alternate, alternate-reverse.
duration	number	100	For how long the animation will run (milliseconds).
onAnimationBegin	Function	undefined	A function that is called when the animation has been started.
onAnimationEnd	Function	undefined	A function that is called when the animation has been completed successfully or cancelled. Function is called with an endState argument, refer to endState.finished to see if the animation completed or not.
useNativeDriver	boolean	false	Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling.
dimensions	string	"window"	The library gets the Dimensions by screen or window. This is useFull when using FullScreen mode so that the backdrop takes all the screen. When using react-native-web is best to use window instead of screen
disableBackHandler	boolean	false	When clicking mobile back button onCloseRequest will be called if specified

Available animations

I am using react-native-animatable for animations, so you can see there what animation it offers.

More than one Modal

When viewing more than one Modal it works that the last visible Modal gets on top of all other Modal.

And this is done by specifing the zIndex

zIndex default start value is 90000 you can increase or decrease this value by specifying zIndex for Provider

Style size

Settings Modal style height,width,minWidth,minHeight to %, will be calculated based on screen or window size

ScrollView

Modal dose not containe ScrollView so you have to add it if you want to use any.