This tutorial is the seventh and final part of our React Native Car Parking App UI clone series. In the last part, 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.
<!-- /wp:paragraph --><!-- wp:paragraph -->
In case of wanting to learn from the beginning, all the parts for this tutorial series are available below:
<!-- /wp:paragraph --><!-- wp:list -->
- React Native Car Parking Finder App UI Clone # 1: Map View
- React Native Car Parking Finder App UI Clone # 2: Scrolling/Swiping Transition
- Building React Native Car Parking Finder App UI Clone # 3: Parking Spot Cards
- React Native Car Parking Finder App UI Clone # 4: Map Markers
- React Native Car Parking Finder App UI Clone # 5: Header Section
- React Native Car Parking Finder App UI Clone #6: Implementing Modal View <!-- /wp:list --><!-- wp:paragraph -->
As mentioned in the previous parts, the motivation for this tutorial series came from the React Native Store Locator App templatethat 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 React UI Kit 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.
Overview
<!-- /wp:heading --><!-- wp:paragraph -->
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.
<!-- /wp:paragraph --><!-- wp:paragraph -->
So, let us begin!!
Installing Dropdown Package
<!-- /wp:heading --><!-- wp:paragraph -->
Here we are going to install the react-native-modal-dropdown 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:
<!-- /wp:paragraph --><!-- wp:enlighter/codeblock -->
expo install react-native-modal-dropdown
<!-- /wp:enlighter/codeblock --><!-- wp:paragraph -->
Then, we need to import this package as Dropdown component in the Map.js file as shown in the code snippet below:
<!-- /wp:paragraph --><!-- wp:enlighter/codeblock -->
import Dropdown from 'react-native-modal-dropdown';
<!-- /wp:enlighter/codeblock --><!-- wp:spacer {"height":20} -->
Adding Dropdown
In this step, we are going to add the Dropdowncomponent to our renderParking() method in the Map.js file. Here, we are going to replace the hours section containing Text component with the Dropdown component as shown in the code snippet below:
<TouchableWithoutFeedback key={`parking-${item.id}`} onPress={() => this.setState({ active: item.id })} >
<View style={[styles.parking, styles.shadow]}>
<View style={styles.hours}>
<Text style={theme.SIZES.font}>x {item.spots} {item.title}</Text>
<Dropdown options={['01:00', '02:00', '03:00', '04:00', '05:00']}/>
</View>
<View style={styles.parkingInfoContainer}>
...................
Here, we have provided the options prop to the Dropdown component. The options prop is used to set the options of the dropdown. Hence, we will get the following result in our emulator screen: 
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 Dropdown 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
defaultIndex={0}
defaultValue={'01:00'}
options={['01:00', '02:00', '03:00', '04:00', '05:00']}
/>
Here, we have set the defaultIndex prop value as 0 and the defaultValue prop as ’01:00′. Hence, we will get the following result in our android emulator: 
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 Dropdown 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:
<View style={styles.hours}>
<Text style={styles.hoursTitle}>x {item.spots} {item.title}</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Dropdown
defaultIndex={0}
defaultValue={'01:00'}
options={['01:00', '02:00', '03:00', '04:00', '05:00']}
style={styles.hoursDropdown}
/>
<Text style={{ color: theme.COLORS.gray }}>hrs</Text>
</View>
</View>
Here, we have changed some styles bounded to the View components and Text component. We have also added a style prop to the Dropdown component. The required style properties are provided in the code snippet below:
hours: {
flex: 1,
flexDirection: 'column',
marginLeft: theme.SIZES.base / 2,
justifyContent: 'space-evenly',
},
hoursTitle: {
fontSize: theme.SIZES.text,
fontWeight: '500',
},
hoursDropdown: {
borderRadius: theme.SIZES.base / 2,
borderColor: theme.COLORS.overlay,
borderWidth: 1,
padding: theme.SIZES.base,
marginRight: theme.SIZES.base / 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 renderParking() 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. 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:
<TouchableOpacity style={styles.buy} onPress={() => this.setState({ activeModal: item })}>
<View style={styles.buyTotal}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<FontAwesome name='dollar' size={theme.SIZES.icon * 1.25} color={theme.COLORS.white} />
<Text style={styles.buyTotalPrice}>{totalPrice}</Text>
</View>
<Text style={{ color: theme.COLORS.white }}>
{item.price}x{hours[item.id]} hrs
</Text>
</View>
<View style={styles.buyButton}>
<FontAwesome name='angle-right' size={theme.SIZES.icon * 1.75} color={theme.COLORS.white} />
</View>
</TouchableOpacity>
Here, we have used FontAwesome 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 StyleSheet component. So, the required style changes are provided below:
parking: {
flexDirection: 'row',
backgroundColor: theme.COLORS.white,
borderRadius: 6,
padding: theme.SIZES.base,
marginHorizontal: theme.SIZES.base * 2,
width: width - (24 * 2),
},
buy: {
flex: 1,
flexDirection: 'row',
paddingHorizontal: theme.SIZES.base * 1.5,
paddingVertical: theme.SIZES.base,
backgroundColor: theme.COLORS.red,
borderRadius: 6,
},
parkingInfo : {
justifyContent: 'space-evenly',
marginHorizontal : theme.SIZES.base * 1.5
},
parkingIcon : {
flexDirection : 'row',
justifyContent : 'space-between',
},
buyButton : {
flex : 0.5,
justifyContent : 'center',
alignItems : 'flex-end'
},
buyTotalPrice : {
color: theme.COLORS.white,
fontSize: theme.SIZES.base * 2,
fontWeight: '600',
paddingLeft: theme.SIZES.base / 4,fontSize : 25,
color : theme.COLORS.white
},
buyTotalPrice : {
fontSize : 25,
color : theme.COLORS.white
},
hoursDropdown: {
borderRadius: theme.SIZES.base / 2,
borderColor: theme.COLORS.overlay,
borderWidth: 1,
paddingHorizontal: theme.SIZES.base,
paddingVertical: theme.SIZES.base/1.5,
marginRight: theme.SIZES.base / 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 Dropdown 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 dropdownStyle in order to style the Dropdown options. The code for this is provided in the code snippet below:
<Dropdown
defaultIndex={0}
defaultValue={'01:00'}
options={['01:00', '02:00', '03:00', '04:00', '05:00']}
style={styles.hoursDropdown}
dropdownStyle={styles.hoursDropdownStyle}
/>
The required style in the dropdownStyle prop is provided in the code snippet below:
hoursDropdownStyle: {
marginLeft: -theme.SIZES.base,
paddingHorizontal: theme.SIZES.base / 2,
marginVertical: -(theme.SIZES.base + 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 Modal view as well. So, we are going to do that now.
Adding Dropdown to Modal
Here, we are going to add the same Dropdown component with all the configurations to the Modal component. We might have remembered that there is an hours section with the Text component in the Modal component as well. Now, we are going to replace that Text component with fully configured Dropdown component as shown in the code snippet below:
<View style={styles.modalHours}>
<Text style={{ textAlign: 'center', fontWeight: '500' }}>Choose your Booking Period:</Text>
<View style={styles.modalHoursDropdown}>
<Dropdown
defaultIndex={0}
defaultValue={'01:00'}
options={['01:00', '02:00', '03:00', '04:00', '05:00']}
style={styles.hoursDropdown}
dropdownStyle={styles.hoursDropdownStyle}
/>
<Text style={{ color: theme.COLORS.gray }}>hrs</Text>
</View>
</View>
Here, we have replaced the Text component with the Dropdown component. We can notice that we have used the same Dropdown in multiple places. So, why not make a separate function that returns the Dropdown as a template.
Moving Hour dropdown to Separate function
Here, we are going to move the Dropdown component to the separate function called renderHours(). The coding implementation of this function is provided in the code snippet below:
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 renderHours() function in the required Hours section of our UI. First, we are going to call the function in renderParking() function as shown in the code snippet below:
renderParking(item){
const { hours } = this.state;
return(
<TouchableWithoutFeedback key={`parking-${item.id}`} onPress={() => this.setState({ active: item.id })} >
<View style={[styles.parking, styles.shadow]}>
<View style={styles.hours}>
<Text style={styles.hoursTitle}>x {item.spots} {item.title}</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
{this.renderHours()}
<Text style={{ color: theme.COLORS.gray }}>hrs</Text>
</View>
……………
Next, we are going to call the function in the renderModal() function as shown in the code snippet below:
..............
<View style={styles.modalHours}>
<Text style={{ textAlign: 'center', fontWeight: '500' }}>Choose your Booking Period:</Text>
<View style={styles.modalHoursDropdown}>
{this.renderHours()}
<Text style={{ color: theme.COLORS.gray }}>hrs</Text>
</View>
</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.
<!-- /wp:paragraph --><!-- wp:paragraph -->
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.
<!-- /wp:paragraph --><!-- wp:spacer {"height":20} -->
<!-- /wp:spacer --><!-- wp:heading {"level":3} -->
Conclusion
<!-- /wp:heading --><!-- wp:paragraph -->
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 react-native-modal-dropdown package in order to implement the dropdown in our parking spot card of Map screen. We also learned how to configure the Dropdown 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 snack. Hope you enjoyed this tutorial series!! See you in the next one!!
Affiliate Disclosure
Keep in mind that we may receive commissions when you click our links and make purchases.
The post React Native Car Parking Finder App UI Clone #7: Hours Section Dropdown appeared first on Kriss.
Top comments (0)