React Native Car Parking Finder App UI Clone #6: Implementing Modal View

This tutorial is the sixth part of our React Native Car Parking App UI clone series. In the , we successfully implemented the Header section in our map screen as well as organized our code. In this part of the tutorial series, we are going to continue from where we left off in the last part. So, it is recommended to go through all the previous parts of this tutorial series in order to get the full insight and development of the project. last part As mentioned in the previous parts, the motivation for this tutorial series came from the React Native App Templates that provides us with a dynamic, fully-coded starter kit written in React Native that anyone can use to build their own store locator React Native application or initiate their own startup. And, this sixth part is also the continuation of coding implementations and designs from the YouTube video tutorial by for the Car parking Finder App UI clone. The video tutorial seems to deliver the implementations of different UI sections using a fast coding style that may be difficult to understand for any developer especially the beginners. However, this tutorial gives step by step guidance on the implementation of each UI section. Hence, the readers can relax and take time to learn and implement the UI. React UI Kit Overview In this sixth part of the tutorial series, we are going to implement a Modal that displays extended information of the parking card section with different UI sections. The idea is to install the react-native-modal package and integrate it into the map screen. Then, we are going to configure the Modal in order to make it look like in the actual app. Lastly, we will implement different sections inside the Modal view and style them. So, let us begin!! Installing Modal Package Here we are going to install the package into our project. This package provides an enhanced, animated and customizable react-native modal. The main aim of this package is to is expanding the original react-native component by adding animations and styles customization options while still providing a plain-simple API. Now in order to install this package into our project, we need to run the following command: react-native-modal Modal expo install react-native-modal Then, we need to import this package as Modal component in the Map.js file as shown in the code snippet below: import Modal from 'react-native-modal'; Implementing modal In this step, we are going to implement the modal into our Map screen. For that, we need to define a state called in order to handle the opening and closing of the modal. The should be defined as shown in the code snippet below: activeModal activeModal state = { : {}, : , : } hours active null activeModal null Now, we need to activate the modal when pressing the buy button on our parking spot card. For that, we need to change the state of in the event of component as shown in the code snippet below: activeModal onPress TouchableOpacity .setState({ : item })}> ${item.price *2} {item.price}x{hours[item.id]} hrs this activeModal View style {styles.buyTotal} View > Text style {{fontSize: 25 color : theme.COLORS.white Text /View> </ Here, we have just implemented a trigger to open the modal but have not implemented the actual component yet. So now, we are going to implement the actual modal. Modal Defining a new function for modal Here, we are going to define a new function called . This function will return the template with the component. The overall implementation of this function is provided in the code snippet below: renderModal() Modal renderModal(){ {activeModal} = .state; (!activeModal) ; ( {activeModal.title} ) } const this if return null return this.setState({ activeModal: null })} onBackdropPress={() => this.setState({ activeModal: null })} > Modal isVisible onBackButtonPress {() Modal Here, inside the method, we have defined constant from the state variable. Then, if the state is empty then the function will return null which will not show the on the app screen. However, if the state is not empty, the function will return the template with component. The component here is configured with different props. renderModal() activeModal activeModal renderModal() Modal activeModal Modal Modal The prop is used to show the modal on the screen. In the and events of the component we have changed the state to null in order to hide the from the screen. We have also integrated some component wrapping Text component with some inline styles. isVisible onBackButtonPress onBackdropPress Modal activeModal Modal View Now, we need to call the method in the function of our file as shown in the code snippet below: renderModal() render() Map.js render(){ ( ………… { .renderParkings()} { .renderModal()} ) } Now, the required style used in the function is provided in the code snippet below: renderModal() modal : { : theme.COLORS.white } backgroundColor Hence, we will get the following result in the emulator screen: As we can see, a modal appears on the screen. But the modal is too small, so we need to configure it with more props and style in order to make the modal more appealing. Configuring Modal properties and styles Here, we are going to configure the component with some additional props and styles. For that, we need to use the code from the following code snippet: Modal renderModal(){ {activeModal} = .state; (!activeModal) ; ( {activeModal.title} ) } const this if return null return this.setState({ activeModal: null })} onBackdropPress={() => this.setState({ activeModal: null })} onSwipeComplete={() => this.setState({ activeModal: null })} > Modal isVisible useNativeDriver style {styles.modalContainer} onBackButtonPress {() Modal Here, we have included a prop called which uses the native driver configurations and properties to handle the workings of Modal. We have also included a event which changes the state to null. Then, we have also provided a style property to the component which is provided in the code snippet below: useNativeDriver inSwipeComplete activeModal Modal modalContainer: { : , : , }, : { : height * , : theme.COLORS.white, }, margin 0 justifyContent 'flex-end' modal height 0.75 backgroundColor Hence, we will get the following result in the emulator screen: As we can see, the Modal component now covers more than half of the lower part of the screen. Adding Modal content Now, we are going to add some content inside the Modal view. We have added the trigger to open the Modal when we press the buy button in each car parking spot. When triggering, we have set the activeModal state to the particular parking spot data from the data array. Now, we are going to use the value stored in the activeModal state in order to add the different parking spot information to the Modal. For that, we need to use the code from the following code snippet in the function: parkingsSpots renderModal renderModal(){ {activeModal , hours} = .state; (!activeModal) ; ( {activeModal.title} {activeModal.description} {activeModal.price} {activeModal.rating} {activeModal.distance} {activeModal.free}/{activeModal.total} Choose your Booking Period ${activeModal.price *2} {activeModal.price}x{hours[activeModal.id]} hrs > ) } const this if return null return this.setState({ activeModal: null })} onBackdropPress={() => this.setState({ activeModal: null })} onSwipeComplete={() => this.setState({ activeModal: null })} > Modal isVisible useNativeDriver style {styles.modalContainer} onBackButtonPress {() Modal Here, we have added different and component to display the information in the data array. We have also used the component which wraps the and component for the final buy button in the Modal. The components are bound to different styles which are provided in the code snippet below: View Text parkingsSpots TouchableOpacity View Text modal: { : , : height * , : theme.SIZES.base * , : theme.COLORS.white, : theme.SIZES.base, : theme.SIZES.base, }, flexDirection 'column' height 0.75 padding 2 backgroundColor borderTopLeftRadius borderTopRightRadius Hence, we will get the following result in our emulator screen: As we can see, some content has appeared on the screen but are out of place. Now, we need to style them properly in order to make the Modal content look appealing as in the actual app. Here, we can also notice that we have added the additional distance and description data in the Modal content. But these data are not included in the parkingsSpots data array. So, we need to include that first. Adding addition data Here, we are going to add the distance and description data to each item in the data array as shown in the code snippet below: parkingsSpots parkingsSpots = [ { : , : , : , : , : , : , : { : , : , }, : , : , }, { : , : , : , : , : , : , : { : , : , }, : , : , }, { : , : , : , : , : , : , : { : , : , }, : , : , }, ]; const id 1 title 'Parking 1' price 5 rating 4.2 spots 20 free 10 coordinate latitude 37.78735 longitude -122.4334 distance 2.5 description `Description about this parking lot Open year 2018 Secure with CTV` id 2 title 'Parking 2' price 7 rating 3.8 spots 25 free 20 coordinate latitude 37.78845 longitude -122.4344 distance 3.5 description `Description about this parking lot Open year 2018 Secure with CTV` id 3 title 'Parking 3' price 10 rating 4.9 spots 50 free 25 coordinate latitude 37.78615 longitude -122.4314 distance 1 description `Description about this parking lot Open year 2018 Secure with CTV` Styling the content Here, we are going to style the components inside the component in order to make the Modal content appear as in the actual app. For that, we need to use the code in the following code snippet: Modal .setState({ : })} onBackdropPress={() => .setState({ : })} onSwipeComplete={() => .setState({ : })} > {activeModal.title} {activeModal.description} ${activeModal.price} {activeModal.rating} {activeModal.distance}km {activeModal.free}/{activeModal.spots} Choose your Booking Period: Proceed to pay ${activeModal.price * hours[activeModal.id]} this activeModal null this activeModal null this activeModal null View style {styles.modal} Modal Here, we have added different inline style properties as well as styles from the component. The required styles from the component is provided in the code snippet below: StyleSheet StyleSheet modalInfo: { : , : , : theme.SIZES.base, : , : , : theme.COLORS.overlay, : theme.COLORS.overlay, }, : { : height * , }, : { : , : , : , : , : theme.SIZES.base * , : theme.COLORS.red, }, : { : , : theme.SIZES.base * , : theme.COLORS.white, } flexDirection 'row' justifyContent 'space-evenly' paddingVertical borderTopWidth 1 borderBottomWidth 1 borderTopColor borderBottomColor modalHours paddingVertical 0.11 payBtn borderRadius 6 flexDirection 'row' alignItems 'center' justifyContent 'space-between' padding 1.5 backgroundColor payText fontWeight '600' fontSize 1.5 color Hence, we will get the following result in our emulator screen: As we can see, we have got all the components in the proper positions which makes the Modal look more appealing. Now, we need to add icons to the Modal. Adding Icons Here, we are going to add the icons to the respective UI sections in the Modal content. We have already imported the package from the package provided by the expo client. Now, we are going to include the Ionicons component as shown in the code snippet below: Ionicons vector-icons ${activeModal.price} {activeModal.rating} {activeModal.distance}km {activeModal.free}/{activeModal.spots} View style {[styles.parkingIcon, justifyContent: flex-start Here, we have provided the size and color props to the Ionicons component. The props are in accordance to our and variable from the file. COLORS SIZES theme.js Hence, we will get the following result in our emulator screen: As we can see, we have got the icons in our view. But we can see there is something missing in section with ‘Choose your Bookings Period’. In this section, we need to add the hours section as in the parking spot cards. Modal Adding hours section to Modal Here, we are simply going to add the hours section to modal. We are going to add this section using below the component having ‘Choose your Booking Period’ text as shown in the code snippet below: Text Choose your Booking Period: Text style {{ textAlign: center fontWeight: 500 Text 5:00 hrs Text style {{ color: theme.COLORS.gray Text /View> </ Here, the component wraps the component with text showing hours. The required style is provided in the code snippet below: View Text modalHours: { : height * , }, : { : , : , : , : theme.SIZES.base, }, paddingVertical 0.15 modalHoursDropdown flexDirection 'row' justifyContent 'center' alignItems 'center' paddingVertical Hence, we will get the following result in our emulator screen: As we can see, we have got the hours section in our Modal. With this, we have come to the end of this part of our tutorial. Finally, we have successfully completed the implementation of Modal in our Map screen. Conclusion This tutorial is the sixth part of the React Native Car Parking Finder App UI clone tutorial series. In this part, we continued from where we left off in the fifth part of this tutorial series. In this part of the tutorial, we learned how to set up the package in order to implement the Modal in our Map screen. We also learned how to configure the Modal component in order to make it look as well as transition better. Then, we also got insight into adding different UI sections inside the component. Finally, we were successful in implementing the view just as in the actual app design. react-native-modal Modal Modal In the next part of this tutorial series, we are going to implement a time dropdown in our parking spot card section.