Skip to content

AlenToma/react-native-js-only-modal

Repository files navigation

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>
)
}
  1. 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.

About

javascript only Modal for react-native

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published