Thursday, August 1, 2019

React Native Modal Example

This tutorial explains how to use the modal component in React Native application. The Modal component is a simple way to present content above an enclosing view. Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. In this example we are going to update the initial state with help of toggleModal function. This function helps to hide and show the model component in react native view component.

React Native Modal Example


React Native Modal Example

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.
import React, { Component } from 'react';
import { Text, StyleSheet, View, Modal, TouchableHighlight } from 'react-native';

Step 4: create App component and place the below code inside the App component.
export default class App extends Component {

  state = {
    modalVisible: false,
  }

  toggleModal(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
    return (
      <View style={styles.container} >
        <Modal animationType={"slide"} transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => { console.log("Modal has been closed.") }}>

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

            <TouchableHighlight style={styles.touchableButton}
              onPress={() => { this.toggleModal(!this.state.modalVisible) }}>
              <Text style={styles.text}>Close Modal</Text>
            </TouchableHighlight>
          </View>
        </Modal>

        <TouchableHighlight style={styles.touchableButton} onPress={() => { this.toggleModal(true) }}>
          <Text style={styles.text}>Open Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Step 5 : Apply the below style sheet design. 
const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    modal: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: '#2196f3',
      padding: 100
    },
    text: {
      color: '#fff',
      fontSize: 20,
      textAlign: 'center',     
    },
    touchableButton: {
      width: '70%',
      padding: 10,
      backgroundColor: '#f4511e',
      marginBottom: 10,
      marginTop: 30,
    },
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to use the modal component in React Native application.

import React, { Component } from 'react';
import { Text, StyleSheet, View, Modal, TouchableHighlight } from 'react-native';


export default class App extends Component {

  state = {
    modalVisible: false,
  }

  toggleModal(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
    return (
      <View style={styles.container} >
        <Modal animationType={"slide"} transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => { console.log("Modal has been closed.") }}>

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

            <TouchableHighlight style={styles.touchableButton}
              onPress={() => { this.toggleModal(!this.state.modalVisible) }}>
              <Text style={styles.text}>Close Modal</Text>
            </TouchableHighlight>
          </View>
        </Modal>

        <TouchableHighlight style={styles.touchableButton} onPress={() => { this.toggleModal(true) }}>
          <Text style={styles.text}>Open Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    modal: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: '#2196f3',
      padding: 100
    },
    text: {
      color: '#fff',
      fontSize: 20,
      textAlign: 'center',     
    },
    touchableButton: {
      width: '70%',
      padding: 10,
      backgroundColor: '#f4511e',
      marginBottom: 10,
      marginTop: 30,
    },
  });

Screenshot :

React Native Modal Example

React Native Modal Example

This is all about React Native Modal Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

No comments:

Post a Comment