How to create fade animation in modal in React Native? Code Example

To create fade animation in modal in React Native, pass fade as value in animationType prop of <Modal> component. This is similar to slide animation.

Code Example

import React, { useState } from "react";
import { Modal, StyleSheet, Text, Button, View } from "react-native";

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal
        visible={modalVisible}
        animationType={'fade'}
      >
        <View>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Slide from bottom modal</Text>
            <Button
              onPress={() => setModalVisible(!modalVisible)}
              color={'#2196F3'}
              title={'Close Modal'}
            />
          </View>
        </View>
      </Modal>
      <Button
        onPress={() => setModalVisible(true)}
        color={'#F194FF'}
        title={'Open Modal'}
       />
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22,
    backgroundColor: '#FFF000',
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

The output looks like this –

You can see from the image that modal is fading in. Next screenshot will show how it will look after animation completes –

In line 10 of our code, we are setting animationType=fade.

Live Demo

Conclusion

In order to implement fade animation in modal component of React native, you need to pass fade as value to the animationType prop.