react-native-modalview

An advanced and composable Modal component for react-native

Features

• Very modular through composable components
• all features are easy to toggle on/off via props
• Smooth open/close animations
• Extendable with own animations/easings/...
• Customizable backdrop opacity, color, duration and easing
• Event listeners for the modal states onOpen, onOpened, onClose, onClosed

Demo

coming soon

Setup

This library is available on npm, install it with: npm install --save react-native-modalview or yarn add react-native-modalview.

Usage

Use all of the features or toggle features on and off via props;

import React, { Component } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import Modal from 'react-native-modalview'

export default class ModalDemo extends Component {
  state = {
    showModal: false
  }

  _showModal = () => this.setState({ showModal: true })

  _hideModal = () => this.setState({ showModal: false })

  render () {
    const { showModal } = this.state;
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={this._showModal}>
          <Text>Show Modal</Text>
        </TouchableOpacity>
        <Modal 
          open={showModal}
          backdrop={true}
          swipeToDismiss={true}
          onClosed={this._hideModal}
        >
          <View style={{ backgroundColor: '#fff' }}>
            <Text>Hello!</Text>
          </View>
        </Modal>
      </View>
    )
  }

}

If you don't need all the functionality like backdrop or swipeToDismiss you can also import the base components and compose the Modal without this functionality or extend it with your own.

import { ModalBase, withBackdrop} from 'react-native-modalview'
import { compose } from 'ramda';

const Modal = compose(
  withBackdrop, 
)(ModalBase);

Props

ModalBase

| Name | Type| Default | Description | | --- | --- | --- | --- | | open | bool | false | open/close the modal | | disabled | bool | false | disable open/closing of the modal | | children | node | REQUIRED | The modal content | | style | any | null | Style applied to the modal | | positionVertical | string | 'center' | vertical position of the modal. possible values: 'start', 'center', 'end' | | positionHorizontal | string | 'center' | horizontal position of the modal. possible values: 'start', 'center', 'end' | | animation | string | 'slideBottom' | convenience prop to set the animation type for open/close. | | animationDuration | number | 300 | convenience prop to set the animation duration for open/close/backdrop | | animationEasing | string | 'easeOut' | convenience prop to set the animation easing for open/close/backdrop | | animationIn | string | animation | animation type for opening the modal | | animationInDuration | string | animationDuration | animation duration for opening the modal | | animationInEasing | string, func | animationEasing | animation easing for opening the modal | | animationOut | string | animation | animation type for closing the modal | | animationOutDuration | string | animationDuration | animation duration for closing the modal | | animationOutEasing | string, func | animationEasing | animation easing for closing the modal | | animationUseNativeDriver | bool | false | use useNativeDriver for animations | | overlay | bool | false | wrap view in react-native Modal to present content above everything else | | testID | string | null | Used to locate this view in end-to-end tests. |

withBackdrop

| Name | Type| Default | Description | | --- | --- | --- | --- | | backdrop | bool | false | show/hide backdrop | | backdropClickToClose | bool | false | close modal by clicking on backdrop | | backdropColor | string | #00000099 | change backdrop color | | backdropAnimationDuration | string | animationDuration | animation duration for opening and closing the backdrop | | backdropAnimationEasing | string, func | animationEasing | animation easing for opening and closing the backdrop |

withSwipeToDismiss

| Name | Type| Default | Description | | --- | --- | --- | --- | | swipeToDismiss | bool | false | enable/disable swipe-to-dismiss functionality | | swipeThreshold | number | 50 | threshold to reach in pixels to close the modal | | swipeArea | number | null | width/height in pixels of the swipeable area. By default the whole modal is swipeable. |

Events

| Name | Type| Default | Description | | --- | --- | --- | --- | | onLayout | func | null | invoked on mount and layout changes | | onContentLayout | func | null | invoked when content layout changes | | onClose | func | null | invoked when the modal starts closing | | onClosed | func | null | invoked when the modal is closed completely | | onOpen | func | null | invoked when the modal starts opening | | onOpened | func | null | invoked when the modal is opened completely |

Animations

• fade
• slideBottom
• slideTop
• slideRight
• slideLeft
• scaleBackground
• scaleForeground
• custom animation func

Easings

• linear
• easeIn
• easeOut
• easeInOut
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInSine
• easeOutSine
• easeInOutSine
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInBounce
• easeOutBounce
• easeInOutBounce
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• custom easing func

TODO

• [ ] usage examples
• [ ] unit-tests
• [ ] demo gifs