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

withBackdrop

withSwipeToDismiss

Events

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