This package has been deprecated

    Author message:

    This module has been moved to react-native-modal

    react-native-animated-modal

    1.1.0 • Public • Published

    react-native-animated-modal

    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!

    Install

    npm i react-native-animated-modal

    DownloadsWeekly Downloads

    6

    Version

    1.1.0

    License

    ISC

    Last publish

    Collaborators

    • mmazzarolo