SJ logo

Implement a Facebook modal behavior using React Native Modal

19.04.20202 Min Read — In React Native

Implement a Facebook modal behavior using React Native Modal

https://user-images.githubusercontent.com/31947720/79690214-d8f19f00-828b-11ea-94f1-0703cb5fdee7.gif

Step 1: Install react-native-modal

react-native-modal is an enhanced, animated and customisable react-native modal.

Go to your terminal and cd to your project folder and run the command bellow:

yarn add react-native-modal

Step 2: Getting started

Behavior Analysis

Two behaviors are applied for modal in the Facebook app are:

  • Press on opacity background to close the modal, so for this case, we use onBackdropPress prop. onBackdropPress prop is called when the backdrop is pressed.
  • Swipe modal from the top to bottom to close the modal, so for this case, we use swipeDirection prop. This prop defines the direction where the modal can be swiped.

Implement

  • Make a small bar is showing on the top of the modal.

https://user-images.githubusercontent.com/31947720/79689421-5535b380-8287-11ea-9d00-fcae0dbce71c.png

We can use the <View> tag to make the UI

<View style={styles.centerContent}>
	<View style={styles.headLine} />
</View>
  • Make show/hide modal

I will use useState hook from React Hook to declare for the modal visible state. This state is used to manage show & hide modal.

  const [modalVisible, setModalVisible] = useState(false);

Assume that you have an event to show the modal by changing the state

const handleShowModal = () => {
  setModalVisible(true)
}

Next, to close the modal, either press on the backdrop or swipe the modal. Hence, we will call the setModalVisible to change the state to false

onBackdropPress={() => setModalVisible(false)}
onSwipeComplete={() => setModalVisible(false)}

Combine all of it, we can make a modal with behavior same as Facebook.

import React, { useState } from 'react';
import { StyleSheet, View } from "react-native";
import { Button, Text } from 'react-native-elements';
import Modal from 'react-native-modal';
import Colors from '../../constants/Colors'
import AntIcon from 'react-native-vector-icons/AntDesign';
export default HelloModal = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <>
      <View style={styles.container}>
        <Modal
          backdropOpacity={0.3}
          isVisible={modalVisible}
          onBackdropPress={() => setModalVisible(false)}
          onSwipeComplete={() => setModalVisible(false)}
          swipeDirection={['down']}
          style={styles.bottomView}
        >
          <View style={styles.centerContent}>
						<View style={styles.headLine} />
					</View>
          <View style={styles.content}>
            <Text style={styles.contentTitle}>Hi 👋!</Text>
            <Text h4>Hello from SiliconJungles!</Text
          </View>

        </Modal>
      </View>
    </>
  );
}

const styles = StyleSheet.create({

  content: {
    backgroundColor: 'white',
    padding: 22,
    justifyContent: 'center',
    alignItems: 'center',
    borderTopRightRadius: 17,
    borderTopLeftRadius: 17,
  },
  contentTitle: {
    fontSize: 20,
    marginBottom: 12,
  },
	centerContent: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  bottomView: {
    justifyContent: 'flex-end',
    margin: 0,
  },
headLine: {
    height: 6,
    width: 55,
    borderRadius: 5,
    backgroundColor: '#EAEAEA',

    marginBottom: 5
  },
});

https://user-images.githubusercontent.com/31947720/79688865-c2dfe080-8283-11ea-892c-49f973c533c0.gif

Alright!!! Done ^___^

© 2020 by Silicon Jungles. All rights reserved.
Last build: 15.05.2020