react-native-animated-modal-old

1.1.0 • Public • Published

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

Name Type Default Description
animationIn string 'slideInUp' Modal show animation
animationInTiming number 300 Timing for the modal show animation (in ms)
animationOut string 'slideOutDown' Modal hide animation
animationOutTiming number 300 Timing for the modal hide animation (in ms)
backdropColor string 'black' The backdrop background color
backdropOpacity number 0.70 The backdrop opacity when the modal is visible
backdropTransitionInTiming number 300 The backdrop show timing (in ms)
backdropTransitionOutTiming number 300 The backdrop hide timing (in ms)
isVisible bool REQUIRED Show the modal?
children node REQUIRED The modal content
onModalShow func () => null Called when the modal is completely visible
onModalHide func () => null Called when the modal is completely hidden
style any null Style applied to the modal

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!

Package Sidebar

Install

npm i react-native-animated-modal-old

Weekly Downloads

0

Version

1.1.0

License

ISC

Unpacked Size

183 kB

Total Files

5

Last publish

Collaborators

  • angeloocana