<Modal>All views inside the modal</Modal>

import React, {Component} from 'react';

import {Button, Text, View, Modal, StyleSheet} from 'react-native';

export default class ModalTModalExample extends Component {

  state = {

    isModalVisible: true,

  };

  toggleModal = () => {

    this.setState({isModalVisible: !this.state.isModalVisible});

  };

  render() {

    return (

      <View style={{flex: 1}}>

        <View style={styles.header}>

          <Text>Modal Component</Text>

        </View>

        <View style={styles.body}>

          <Button title="Show modal" onPress={this.toggleModal} />

          <Modal

            animationType={'slide'}

            transparent={false}

            visible={this.state.isModalVisible}

            onRequestClose={() => {

              console.log('Modal has been closed.');

            }}>

            {/*All views of Modal*/}

            {/*Animation can be slide, slide, none*/}

            <View style={styles.modal}>

              <Text style={styles.text}>Modal is open!</Text>

              <Button

                title="Click To Close Modal"

                onPress={() => {

                  this.setState({isModalVisible: !this.state.isModalVisible});

                }}

              />

            </View>

          </Modal>

        </View>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center',

    backgroundColor: '#FAFAFA',

    marginTop: 30,

  },

  modal: {

    flex: 1,

    alignItems: 'center',

    backgroundColor: 'yellow',

    padding: 100,

  },

  text: {

    color: '#3f2949',

    marginTop: 10,

  },

  header: {

    alignItems: 'center',

    padding: 10,

    backgroundColor: 'cyan',

  },

  body: {

    backgroundColor: 'grey',

    padding: 16,

    flex: 1,

  },

});