React Native Car Parking Finder App UI Clone #7: Time Dropdown
Tags: reactnative, reactnativecarpark, carparkingapp, layout
Published: 2019-11-03 07:01:01

---
title: React Native Car Parking Finder App UI Clone #7: Time Dropdown
published: true
date: 2019-11-03 05:43:59 UTC
tags: React native,React native Carpark,carparking app,layout
canonical_url: https://kriss.io/react-native-car-parking-finder-app-ui-clone-7-hours-section-dropdown/
cover_image: https://kriss.io/wp-content/uploads/2019/10/React-native-layout-carparking-app.png
---

This tutorial is the seventh and final part of our React Native Car Parking App UI clone series. In the [last part](https://kriss.io/react-native-car-parking-finder-app-ui-clone-6-implementing-modal-view/), 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](https://kriss.io/react-native-car-parking-finder-app-ui-clone-1-map-view/)
- [React Native Car Parking Finder App UI Clone # 2: Scrolling/Swiping Transition](https://kriss.io/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](https://kriss.io/react-native-car-parking-finder-app-ui-clone-3-parking-spot-cards/)
- [React Native Car Parking Finder App UI Clone # 4: Map Markers](https://kriss.io/react-native-car-parking-finder-app-ui-clone-4-map-markers/)
- [R](https://kriss.io/react-native-car-parking-finder-app-ui-clone-4-map-markers/)[eact Native Car Parking Finder App UI Clone # 5: Header Section](https://kriss.io/react-native-car-parking-finder-app-ui-clone-5-header-section/)
- [React Native Car Parking Finder App UI Clone #6: Implementing Modal View](https://kriss.io/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 template](https://www.instamobile.io/app-templates/react-native-store-locator-app-template/)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](https://www.youtube.com/watch?v=CuMR9kRZJCw&list=PLNRPou200YIeu4UllJkv8-Ca19Ld_eOay&index=8) 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](https://www.npmjs.com/package/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 -->
```javascript
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 `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:

```javascript
<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: ![](https://kriss.io/wp-content/uploads/2019/11/Screenshot_1572507099.png) 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:

```javascript
              <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: ![](https://kriss.io/wp-content/uploads/2019/11/time-dropdown-1.gif) 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:

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

```javascript
  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: ![](https://kriss.io/wp-content/uploads/2019/11/Screenshot_1572508133.png) 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:

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

```css
  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: ![](https://kriss.io/wp-content/uploads/2019/11/Screenshot_1572510880.png) 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:

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

```javascript
  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: ![](https://kriss.io/wp-content/uploads/2019/11/time-dropdown-2.gif) 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:

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

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

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

```javascript
..............
         <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: ![](https://kriss.io/wp-content/uploads/2019/11/modal-time-dropdown.gif) 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](https://snack.expo.io/H1-Jw1h9S). _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](https://kriss.io/react-native-car-parking-finder-app-ui-clone-7-hours-section-dropdown/) appeared first on [Kriss](https://kriss.io).