React Native Car Parking Finder App UI Clone #7: Hours Section Dropdown

This tutorial is the seventh and final part of our React Native Car Parking App UI clone series. In the , we successfully implemented the Modal view which represents the extended parking spot card information. 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 powerful, 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 seventh 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 take time to learn and implement the UI. React UI Kit Overview In this final part of the tutorial series, we are going to implement a Hours section dropdown which is used to set the hours for utilization of the parking spot. The idea is to install the react-native-modal-dropdown package and integrate it into the car parking spot card and modal. Then, we are going to configure the dropdown in order to make it look like in the actual app. So, let us begin!! Installing Dropdown Package Here we are going to install the package into our project. This package provides react-native dropdown/picker/selector component for both Android & iOS. The package is written in pure JavaScript and is highly customizable. Now in order to install this package into our project, we need to run the following command: react-native-modal-dropdown expo react- -modal-dropdown install native Then, we need to import this package as component in the file as shown in the code snippet below: Dropdown Map.js Dropdown ; import from 'react-native-modal-dropdown' Adding Dropdown In this step, we are going to add the component to our method in the file. Here, we are going to replace the hours section containing component with the component as shown in the code snippet below: Dropdown renderParking() Map.js Text Dropdown .setState({ : item.id })} > x {item.spots} {item.title} ................... `parking- ` ${item.id} this active View style {[styles.parking, styles.shadow Here, we have provided the options prop to the component. The options prop is used to set the options of the dropdown. Hence, we will get the following result in our emulator screen: Dropdown As we can see, we have got a dropdown with ‘Please select’ default text. Now, we need to configure it to show the hours. Configuring Dropdown props Here, we are going to add some props to the component in order for it to show the hours instead of default text. For that, we need to use the code from the code snippet below: Dropdown 0 '01:00' '01:00' '02:00' '03:00' '04:00' '05:00' Here, we have set the prop value as and the prop as . Hence, we will get the following result in our android emulator: defaultIndex 0 defaultValue ’01:00′ As we can see in the simulation above, the default option visible in the dropdown is the hours time. We can also see the dropdown being triggered as we click on the hours dropdown. Note that, if the space below the dropdown is not adequate for dropdown, the dropdown shows itself in drop up style. Styling the Hours Section Here, we are going to apply different style properties to the component in order to make it look like in the actual app. For that, we need to use the code from the following code snippet: Dropdown hrs Text style {styles.hoursTitle} Text flexDirection 'row' alignItems 'center' Dropdown defaultIndex {0} defaultValue { 01:00 options {[ 01:00 02:00 03:00 04:00 05:00 style {styles.hoursDropdown} View /View> Here, we have changed some styles bounded to the components and component. We have also added a style prop to the component. The required style properties are provided in the code snippet below: View Text Dropdown hours: { : , : , : theme.SIZES.base / , : , }, : { : theme.SIZES.text, : , }, : { : theme.SIZES.base / , : theme.COLORS.overlay, : , : theme.SIZES.base, : theme.SIZES.base / , }, flex 1 flexDirection 'column' marginLeft 2 justifyContent 'space-evenly' hoursTitle fontSize fontWeight '500' hoursDropdown borderRadius 2 borderColor borderWidth 1 padding marginRight 2 Hence, we will get the following result in our emulator screen: As we can see, the hours section looks more appealing now as in the actual app. Making some style changes to the Parking Spot Card Here, we are going to make some style changes to the entire parking spot card section in the method. Some UI sections inside the parking spot card section seems a bit out of place. So, we are going to incorporate some style properties to make it similar to the actual app. renderParking() Here, we are also modifying the style of the buy button on the parking spot card. For that, we need to use the code from the following code snippet: .setState({ : item })}> {totalPrice} {item.price}x{hours[item.id]} hrs this activeModal View style {styles.buyTotal} Here, we have used component icon package in order to show the angle icon instead of the greater than sign. We also need to change some style properties in the component. So, the required style changes are provided below: FontAwesome StyleSheet parking: { : , : theme.COLORS.white, : , : theme.SIZES.base, : theme.SIZES.base * , : width - ( * ), }, : { : , : , : theme.SIZES.base * , : theme.SIZES.base, : theme.COLORS.red, : , }, : { : , : theme.SIZES.base * }, : { : , : , }, : { : , : , : }, : { : theme.COLORS.white, : theme.SIZES.base * , : , : theme.SIZES.base / , : , : theme.COLORS.white }, : { : , : theme.COLORS.white }, : { : theme.SIZES.base / , : theme.COLORS.overlay, : , : theme.SIZES.base, : theme.SIZES.base/ , : theme.SIZES.base / , }, flexDirection 'row' backgroundColor borderRadius 6 padding marginHorizontal 2 width 24 2 buy flex 1 flexDirection 'row' paddingHorizontal 1.5 paddingVertical backgroundColor borderRadius 6 parkingInfo justifyContent 'space-evenly' marginHorizontal 1.5 parkingIcon flexDirection 'row' justifyContent 'space-between' buyButton flex 0.5 justifyContent 'center' alignItems 'flex-end' buyTotalPrice color fontSize 2 fontWeight '600' paddingLeft 4 fontSize 25 color buyTotalPrice fontSize 25 color hoursDropdown borderRadius 2 borderColor borderWidth 1 paddingHorizontal paddingVertical 1.5 marginRight 2 Hence, we will get the following result in the emulator screen: Now, it looks more like in the actual app. Moreover, the parking spot card sections look more appealing now. Styling the Dropdown Here, we are going to add some style properties to the component. This will change the display of dropdown options when we click on the dropdown. For that, we are going to use the styling prop called in order to style the options. The code for this is provided in the code snippet below: Dropdown dropdownStyle Dropdown 0 '01:00' '01:00' '02:00' '03:00' '04:00' '05:00' The required style in the prop is provided in the code snippet below: dropdownStyle hoursDropdownStyle: { : -theme.SIZES.base, : theme.SIZES.base / , : -(theme.SIZES.base + ), }, marginLeft paddingHorizontal 2 marginVertical 1 Hence, we will get the following result in the emulator screen: As we can see, the dropdown options look more appealing now just as in the actual app. Now, we have successfully implemented the hours dropdown in our parking spot card. The same hours dropdown needs to be kept in the view as well. So, we are going to do that now. Modal Adding Dropdown to Modal Here, we are going to add the same component with all the configurations to the component. We might have remembered that there is an hours section with the component in the component as well. Now, we are going to replace that component with fully configured component as shown in the code snippet below: Dropdown Modal Text Modal Text Dropdown hrs Text style {{ textAlign: center fontWeight: 500 Text Dropdown defaultIndex {0} defaultValue { 01:00 options {[ 01:00 02:00 03:00 04:00 05:00 style {styles.hoursDropdown} dropdownStyle {styles.hoursDropdownStyle} View /View> Here, we have replaced the component with the component. We can notice that we have used the same in multiple places. So, why not make a separate function that returns the as a template. Text Dropdown Dropdown Dropdown Moving Hour dropdown to Separate function Here, we are going to move the component to the separate function called . The coding implementation of this function is provided in the code snippet below: Dropdown renderHours() renderHours(){ ( return ) } Dropdown defaultIndex {0} defaultValue { 01:00 options {[ 01:00 02:00 03:00 04:00 05:00 style {styles.hoursDropdown} dropdownStyle {styles.hoursDropdownStyle} Now, we need to call this function in the required Hours section of our UI. First, we are going to call the function in function as shown in the code snippet below: renderHours() renderParking() renderParking(item){ { hours } = .state; ( x {item.spots} {item.title} {this.renderHours()} hrs …………… const this return this.setState({ active: item.id })} > TouchableWithoutFeedback key { parking- item.id onPress {() Next, we are going to call the function in the function as shown in the code snippet below: renderModal() .............. { .renderHours()} hrs ............. Choose your Booking Period: Text style {{ textAlign: center fontWeight: 500 Text this color /Text> View Hence, we will get the final result as shown in the emulator screen below: As we can see, we have got the hours dropdown in both the parking spot card as well as the Modal view. Finally, we have successfully completed the implementation of dropdown in our Map screen of Car Parking Finder App UI clone. This marks the end of this tutorial series. With the end of this final part, we have successfully implemented the Car Parking Finder App UI clone in the React Native. Conclusion This tutorial is the seventh and final 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 sixth part of this tutorial series. In this part of the tutorial, we learned how to set up the package in order to implement the dropdown in our parking spot card of Map screen. react-native-modal-dropdown We also learned how to configure the component in order to make it look as well as transition better. Then, we also configured the style and added the hours dropdown to different sections of the UI. This wraps up this final part of our Car parking Finder app UI clone tutorial series. In doing so, we have finally completed the overall tutorial for the cloning of the Car parking Finder app UI. The overall demo of the project is available in the . Dropdown snack Hope you enjoyed this tutorial series!! See you in the next one!!