react-native-animated-modal-old v1.1.0

react-native-animated-modal-old

A customizable react-native animated modal.

Gifs!

Description

This component enhances the original react-native modal by adding animations and many possible customizations while still providing nice defaults:

• You can customize the backdrop opacity, color, animation type and animation timing.
• You can provide your own content and customize its animation type and animation timing.
• You'll know when the animations end thanks to onModalShow and onModalHide

P.S.: The modal will resize itself correctly on device rotation.

Setup

This library is available on npm, install it with: npm install --save react-native-animated-modal.

Usage

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

export default class AnimatedModalTester extends Component {
  state = {
    isModalVisible: false
  }

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

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

  render () {
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={this._showModal}>
          <Text>Show Modal</Text>
        </TouchableOpacity>
        <Modal isVisible={this.state.isModalVisible}>
          <View style={{ flex: 1 }}>
            <Text>Hello!</Text>
          </View>
        </Modal>
      </View>
    )
  }

}

For a more complex example take a look at the /example directory.

Available props

Avaliable animations

Take a look at react-native-animatable for available animations.
Pull requests and suggestions are welcome!
P.S.: Thanks @oblador for react-native-animatable!