visit
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.
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.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!!
expo install react-native-modal-dropdown
Then, we need to import this package as
Dropdown
component in the Map.js file as shown in the code snippet below:import Dropdown from 'react-native-modal-dropdown';
In this step, we are going to add the
Dropdown
component 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: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:
Note that, if the space below the dropdown is not adequate for dropdown, the dropdown shows itself in drop up style.
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,
},
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,
},
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),
},
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. 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. 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>
.............
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 . Hope you enjoyed this tutorial series!! See you in the next one!!