Make React Native Modal appear from top to bottom

Question

I noticed that the Modal component's animationType property only allows for it to slide from bottom to top. How could I change the animation and make the modal appear from top to bottom?

Thanks for your time.

Answer 1

It doesn't look like that component allows for that type of configuration.

One thing you could do is use the Animated library to create your own modal. You would set the translateY property to negative of of the height of the device, then animate the translateY value to 0:

openModal() {
    Animated.timing(this.state.modalY, {
        duration: 300,
        toValue: 0
     }).start();
  },

  closeModal() {
    Animated.timing(this.state.modalY, {
        duration: 300,
        toValue: -deviceHeight
     }).start();
  },

A full implementation is below:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Animated,
  Dimensions
} = React;

let deviceHeight = Dimensions.get('window').height
var deviceWidth = Dimensions.get('window').width

var SampleApp = React.createClass({

  openModal() {
    Animated.timing(this.state.modalY, {
        duration: 300,
        toValue: 0
     }).start();
  },

  closeModal() {
    Animated.timing(this.state.modalY, {
        duration: 300,
        toValue: -deviceHeight
     }).start();
  },

  getInitialState(){
    return {
        modalY: new Animated.Value(-deviceHeight)
    }
  },

  render() {
     var Modal = <Animated.View style={[ styles.modal, { transform: [                        {translateY: this.state.modalY}] }]}>
                                <TouchableHighlight onPress={ this.closeModal } underlayColor="green" style={ styles.button }>
                    <Text style={ styles.buttonText }>Close Modal</Text>
                  </TouchableHighlight>
                             </Animated.View>

    return (
      <View style={styles.container}>
       <TouchableHighlight onPress={ this.openModal } underlayColor="green" style={ styles.button }>
        <Text style={ styles.buttonText }>Show Modal</Text>
       </TouchableHighlight>
      { Modal }
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  button: {
    backgroundColor: 'green',
    alignItems: 'center',
    height: 60,
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white'
  },
  modal: {
    height: deviceHeight,
    width: deviceWidth,
    position: 'absolute',
    top:0,
    left:0,
    backgroundColor: '#ededed',
    justifyContent: 'center',
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);