Car Parking Finder App UI Clone with React Native #2 : Scrolling/Swiping Transition

This tutorial is the second part of our React Native Car Parking App UI clone series. In the previous part, we successfully implemented the MapView section as well as separated different UI sections for the map screen. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to establish the basis and get insight into the overall project.

As mentioned in the previous part, the motivation to implement this UI clone series came from the React Native App Templates that provides us with a dynamic, 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 second part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kit for the Camping Spots Finder App clone. The video tutorial provides overall guidance using fast coding which may be difficult to grasp for any developer especially the beginners.

This written tutorial provides the step by step implementation which will be easier to understand and implement.

Overview

In this second part of this tutorial series, we are going to make some configurations to the parking section that we separated in the previous part of this tutorial. The idea is to define some mock car parking spot data and integrate that data into the parking section as a card view. Then, we are going to implement scrolling animations to swipe each parking spot card to the left. Here, we are going to make the scrolling or swiping transition as smooth as possible.

So, let us begin!!

Defining Mock Data

Here, we are going to define the mock data array which will contain the parking spot information as key-value pair in the object. Hence, we are going to initialize an array of objects in the Map.js file.

So, we are going to initialize an array constant called

parkingsSpots

with some parking spot data as shown in the code snippet below:

const parkingsSpots = [
    {
      id: 1,
      title: 'Parking 1',
      price: 5,
      rating: 4.2,
      spots: 20,
      free: 10
    },
    {
      id: 2,
      title: 'Parking 2',
      price: 7,
      rating: 3.8,
      spots: 25,
      free: 20
    },
    {
      id: 3,
      title: 'Parking 3',
      price: 10,
      rating: 4.9,
      spots: 50,
      free: 25
    },
  ];

Each data has an id, title, price, rating, the total number of parking spots as spots and total free parking spots as free.

Now, we are going to integrate this data into our parking section by using it in our renderParkings() and renderParking() functions that we have defined in the earlier part of the tutorial. Here in the renderParkings() method, we are going to use map() array function in order to iterate through each item in the

parkingsSpots

array.

Then, the map() function will call the renderParking() function by sending a parameter which is an item of the

parkingsSpots

array as shown in the code snippet below:

renderParkings(){
      return(
          <ScrollView horizontal contentContainerStyle={styles.parkings}>
              {parkingsSpots.map((parking) => this.renderParking(parking))}
          </ScrollView>
      )
  }

Now, the renderParking() method is going to receive an item of

parkingsSpots

array as a parameter.

Then, we are going to use the parameter item in order to return the template with parking spot data as shown in the code snippet below:

renderParking(item){
      return(
          <View key={`parking-${item.id}`} style={styles.parking}>
              <Text>{item.title}</Text>
          </View>
      )
  }

Here, we have used the item

id

as a key in order to identify each

View

component of a particular parking spot uniquely. Then, for now, we have just used the title information from the parking data.

Hence, we will get the following result in our emulator screen:

As we can see, we have got three parking spots data in the parking section.

Implementing the Swiping Action in Parking section

Here, we are going to convert each parking data into a card design. Then, we are going to make only a single parking spot card visible on the screen. We will need to swipe the card to the left in order to view another parking spot card.

Adding Dimensions Component

Now, we are going to begin by adding the

Dimensions

component to our

Map

screen. The

Dimensions

component enables us to get the height and width of the entire app screen.

For that, we need to import the

Dimensions

component from the react-native package as shown in the code snippet below:

import { StyleSheet, Text, View, ScrollView, Dimensions } from 'react-native';

Then, we need to define two constants for height and width. After that, we need to use the get() method with parameter as ‘screen’ in order to get the full width and height of the app screen. The code for this is provided in the code snippet below:

const {height , width} = Dimensions.get('screen');

Now, we are going to make some changes to the renderParkings() method as shown in the code snippet below:

renderParkings(){
      return(
          <ScrollView horizontal style={styles.parkings}>
              {parkingsSpots.map(parking => this.renderParking(parking))}
          </ScrollView>
      )
  }

Here, we have replaced the

contentContainerStyle

prop with just style prop. Then, we need to make some configurations to parking style variable as shown in the code snippet below:

parking : {
    backgroundColor : 'white',
    borderRadius : 6,
    padding : 12,
    marginHorizontal: 24,
    width : width - ( 24 * 2 )
  }

Here, we have added the width property to parking style with its value initialized to value from

Dimensions

component and then some subtraction of the total width.

Hence, we will get the following result in our emulator screen:

As we can see, the parking section appears as cards with parking data. And, the cards are horizontally scrollable as well. The

MapView

also covers the entire lower section and the parking section overlaps the lower

MapView

section.

But, the scrolling action does not look ideal here. What we want is to show only one parking spot card when we perform the scrolling or swiping action. So, we need to make some additional configuration in order to achieve that.

Additional configuration for smooth Swiping Action

Now, we are going to make some additional configuration to our parking section cards in order to make the transition of parking spot cards smooth. And, we also need to make only one parking spot card visible at a time.

For that, we need to add some additional prop to

ScrollView

component in the renderParkings() method as shown in the code snippet below:

renderParkings(){
      return(
          <ScrollView 
            horizontal 
            style={styles.parkings}
            pagingEnabled
            scrollEnabled
            >
              {parkingsSpots.map(parking => this.renderParking(parking))}
          </ScrollView>
      )
  }

Here, we have added the pagingEnabled and scrollEnabled props to the

ScrollView

component.

pagingEnabled : When its value is true, the scroll view stops on multiples of the scroll view’s size when scrolling. The default value is false.
scrollEnabled : When its value is false, the view cannot be scrolled via touch interaction. The default value is true.

These two props will help to make the scrolling transition smooth. Next, we also need to add some gap to the bottom of the parking spot cards. For that, we need to configure some styles in the parkings variable as shown in the code snippet below:

parkings:{
    position: 'absolute',
    right: 0,
    left: 0,
    bottom: 24,
  },

Here, we have added the bottom gap of 24 pixels to the parking section.

Hence, we will get the following result in our emulator screen:

As we can see, the parking section with parking spot cards appears more appealing. The scrolling transition also appears more smooth.

But, we can see the horizontal scroll bar at the bottom of the parking section. Now, we need to remove that scroll bar. For that, we need to add a prop called showsHorizontalScrollIndicator to the

ScrollView

component of renderParkings() method. The

showsHorizontalScrollIndicator

be initialized as false.

The coding implementation for this is shown in the code snippet below:

 <ScrollView 
            horizontal 
            style={styles.parkings}
            pagingEnabled
            scrollEnabled
            showsHorizontalScrollIndicator = {false}
            >
              {parkingsSpots.map(parking => this.renderParking(parking))}
          </ScrollView>

Hence, we will get the following result in our emulator screen:

As we can see, the horizontal scroll bar at the bottom is not visible now. But still, the swiping transition does not seem smoother. There is some lagging effect when swiping from one parking spot card to another.

Now, in order to make the scrolling more smoother and remove the lagging effect, we need to add some addition prop to control the throttle of

ScrollView

while scrolling.

For that, we need to add additional props to the

ScrollView

component of the renderParkings() function as shown in the code snippet below:

 <ScrollView 
            horizontal 
            style={styles.parkings}
            pagingEnabled
            scrollEnabled
            showsHorizontalScrollIndicator = {false}
            scrollEventThrottle={16}
            snapToAlignment="center"
            >
              {parkingsSpots.map(parking => this.renderParking(parking))}
          </ScrollView>

Here, we have added the scrollEventThrottle and snapToAlignment props. The scrollEventThrottle prop is set to 16 and snapToAlignment prop is set to center.

scrollEventThrottle: This prop is used to controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number corresponds to better accuracy for code that is tracking the scroll position.
snapToAlignment: This prop will define the relationship of the snapping to the scroll view.

Adding these two props to

ScrollView

component will make the transition of swiping action more smooth. In addition to this, we are going to increase the padding of our parking spot cards as shown in the code snippet below:

parking : {
    backgroundColor : 'white',
    borderRadius : 6,
    padding : 24,
    marginHorizontal: 24,
    width : width - ( 24 * 2 )
  }

Hence, we will get the following result in our emulator screen:

As we can see, the swiping action of the parking spot cards in the parking section is a lot smoother now. This swiping action looks more appealing than before. With this, we have come to the end of this part of the tutorial.

Therefore, we have successfully implemented the smooth swiping/scrolling action transition of the parking section in our React Native Car Parking Finder App UI clone.

Conclusion

This tutorial is the second 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 first part of this tutorial series. In this part of the tutorial, we first set up the mock parking spots data. And then we integrated them into the map screen using the map() array function.

Then, we also learned how to make the parking spot card in the parking section which can be scrolled horizontally. Lastly, we got the detailed guidance on implementing the smooth swiping/scrolling transition of parking spot card in the parking section.

In the next part of this tutorial series, we are going to start implementing the parking spot card design as well as integrate additional data to them.

So, Stay Tuned folks!!!