604 reads

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

by AbsekNovember 24th, 2019

Too Long; Didn't Read

This tutorial is the seventh and final part of our React Native Car Parking App UI clone series. 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. In this 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.

Company Mentioned

featured image - 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 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 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

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 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:

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';

Adding 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:

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.

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 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!!