[DIY] AirBnB Clone with React Native Part 5: Loading Modal Implementation

AirBnB Clone with React Native Part 5: Loading Modal Implementation This tutorial is the fifth chapter of our implementation of an AirBnB clone in React Native. In the previous chapter, we successfully implemented a login error notification system. In case you need to get caught up, here are links to parts 1–4: https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-1-home-screen-ui-b5ed1c9278ae https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-2-login-screen-ui-999773e860e4 https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-3-email-authentication-with-firebase-2153a00175ab https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-4-login-error-notifications-580beb4fc03c In part 5, we’re going to continue from where we left off by implementing a loading modal before generating the error notification message. Usually, we might notice a delay in the response from the server when we initialize the request. This may be caused by a slow internet connection or slow device. Here, we’re going to create or simulate such a scenario while logging in. In summary, we’re going to create a loading modal that executes when we press the login button to simulate the delay in response and show the notification error message that we implemented in the previous chapter after loading completes. So let’s get started! Creating a Loader Component First, we’re going to create a simple component named Loader in the Loader.js file. Here, we need to create a simple class named Loader that extends to the Component module of React. We’re going to implement a loading modal in this Loader component, so we need to import the Modal component from the package. For now, we’re just going to render text using a Text component wrapped inside the Modal component, as shown in the code snippet below: react-native React, { Component } ; { View, Image, Modal, StyleSheet, Text} ; { render() { ( This is modal ); } } import from 'react' import from 'react-native' export default class Loader extends Component return Modal visible {true} Modal Next, we’re going to import our Loader component into our Login component in the Login.js file: Loader “../components/Loader”; import from Then, we need to initialize or render our Loader component below the Notification component: Notification showNotification {showNotification} handleCloseNotification {this.handleCloseNotification} title "Error" message {this.state.error} View As a result, we’ll get the modal in the Loader component with text displayed at the top of the screen, as shown in the emulator screenshot below: Configuring and styling modal Next, we’re going to configure the modal using props so that it will look more appealing. The props we’re going to use here are animationType, transparent, and visible. The animationType and visible props are defined in the initialized Loader component in the Login.js file, as shown in the code snippet below: true "fade" The code in the above snippet sends the modalVisible and animationType props from parent component—i.e. the Login component—to the child component—i.e. the Loader component. Now, we need to receive the props into the child Loader component and configure the modal accordingly. The modalVisible and animationType props are made mandatory in the Loader component. The code to receive the props and configure the modal is provided below: { PropTypes } ; { render() { { animationType, modalVisible } = .props; ( This is modal ); } } Loader.propTypes = { : PropTypes.string.isRequired, : PropTypes.bool.isRequired, }; import from 'prop-types' export default class Loader extends Component const this return Modal animationType {animationType} transparent {true} visible {modalVisible} Modal animationType modalVisible As we can see above, the props are received and then bound to required modal props. Configuring the modal isn’t enough so we need to style the modal View wrapper as well. The styling is done using the Stylesheet component, and the styles required are provided in the code snippet below: wrapper: { : , : , : , : , : , : , : , }, zIndex 9 backgroundColor 'rgba(0,0,0,0.6)' position 'absolute' width '100%' height '100%' top 0 left 0 Now, our resulting modal will appear as shown in the following screenshot: Adding a GIF loading file to Image component in Modal In this step, we’re going to add a GIF file, which has a loading image in place of the Text component inside the Modal component of our Loader.js file. For that, we need to import the Image component from the react-native package, which we’ve already done at the beginning. Then, in the source prop of the Image component, we need to add a location to our GIF file. The location is (‘../img/greenLoader.gif’). The code to add this is provided below: loaderContainer: { : , : , : colors.white, : , : , : , : , : , : , }, width 90 height 90 backgroundColor borderRadius 15 position 'absolute' left '50%' top '50%' marginLeft -45 marginTop -45 As we can see in the above code snippet, the Image component is wrapped by another View component. Both the components are styled using Stylesheet. The styling for the components is provided in the code snippet below: Now, let's have the look at our resulting loading modal: As we can see, the loading GIF image appears at the center of the modal. Now, we need to execute this loading modal when the login button is pressed. Handling Loading Modal Visibility Showing Loading Modal when Login is pressed In this step, we’re going to execute the loading modal when we press the login button. For this, we need to set a state variable in the Login.js file that handles the execution of the loading modal. Here, we set the state variable as loadingVisible, which takes a boolean value. If the loadingVisible state is true, the loading modal appears on the screen, and if it’s set to false , the loading modal doesn’t appear on the screen. The code snippet to initialize the state variable loadingVisible is given below: .state = { : , : , : , : , : , : }; this user null email "" password "" formValid true error "" loadingVisible false Now we need to initialize the loadingVisible state inside the render() function so that it’s easily accessible to the render elements. The code to do this is provided below: render() { { formValid, loadingVisible } = .state; showNotification = formValid ? : ; const this const false true Now we need to pass the loadingVisible state as a prop to the Loader component by binding it to modalVisible prop, as shown in the code snippet below: "fade" Finally, we need to handle the change of the loadingVisible state when the login button is pressed. We know that when we press the login button on the screen, it executes the Login() function of the Login.js file. So we need to change the state of loadingVisible while executing the Login() function, as shown in the code snippet below: Login = { .setState({ : }); firebase .auth() .signInWithEmailAndPassword( .state.email, .state.password) .then( { .setState({ user }); }) .catch( .setState({ : error.message, : }) ); }; => () this loadingVisible true this this => user this => error this error formValid false Now when we press the login button, the Login() function executes, changing the loadingVisible state to true. As a result, the loading modal becomes visible on the screen: As we can see in the simulation above, the loading modal appears when we press the login button. But the loading modal needs to disappear when the error notification message pops up at the bottom. Hiding Loading Modal when the Notification is displayed Here, we’re going to hide the loading modal when the error notification component pops up. It’s very simple. We just need to set the loadingVisible state to false while sending the error message prop to the Notification component in the Login() function of the Login.js file. The code to do this is provided in the code snippet below: Login = { .setState({ : }); firebase .auth() .signInWithEmailAndPassword( .state.email, .state.password) .then( { .setState({ user }); .setState({ : }); }) .catch( .setState({ : error.message, : loadingVisible: }) ); }; => () this loadingVisible true this this => user this this loadingVisible false => error this error formValid false false Now, let’s refresh the emulator and check to see if everything works: As we can see, the loading modal disappears when the notification message pops up. This successfully completes our tutorial for implementing the Loading modal in our AirBnB clone using React Native. Conclusion In this tutorial, we learned how to implement a Loading modal to simulate a delay in the response from the server. We also learned how to pass data between parent and child components as props in React Native. We got detailed insight on how to use the Modal component and how to configure it using the props. To this end, we successfully created a loader which appears when logging in and disappears when an error notification pops up. This is a perfect example to simulate a loader while we wait for the response from the server. Lastly, we learned how to control the styles dynamically with the state variable and how to add animations. All the code for this tutorial is available in this . In the next chapter, we’re going to continue to implement our AirBnB clone app by adding animated checkmarks. GitHub repo credit Airbnb Clone using React Native Series by Cubui Disclosure This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.