This tutorial is the second part of our React Native Car Parking App UI clone series. , 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. In the previous part 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 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. React UI Kit 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 file. Map.js So, we are going to initialize an array constant called with some parking spot data as shown in the code snippet below: parkingsSpots parkingsSpots = [ { : , : , : , : , : , : }, { : , : , : , : , : , : }, { : , : , : , : , : , : }, ]; const 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 and functions that we have defined in the earlier part of the tutorial. Here in the method, we are going to use array function in order to iterate through each item in the array. renderParkings() renderParking() renderParkings() map() parkingsSpots Then, the function will call the function by sending a parameter which is an item of the array as shown in the code snippet below: map() renderParking() parkingsSpots renderParkings(){ ( ) } return {parkingsSpots.map((parking) => this.renderParking(parking))} < = > ScrollView horizontal contentContainerStyle {styles.parkings} </ > ScrollView Now, the method is going to receive an item of array as a parameter. renderParking() parkingsSpots 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){ ( <Text>{item.title}</Text> ) } return < = ` ${ }`} = > View key { parking- item.id style {styles.parking} </ > View Here, we have used the item as a key in order to identify each component of a particular parking spot uniquely. Then, for now, we have just used the title information from the parking data. id View 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 component to our screen. The component enables us to get the height and width of the entire app screen. Dimensions Map Dimensions For that, we need to import the component from the package as shown in the code snippet below: Dimensions react-native { StyleSheet, Text, View, ScrollView, Dimensions } ; import from 'react-native' Then, we need to define two constants for height and width. After that, we need to use the 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: get() const {height , width} = Dimensions.get('screen'); Now, we are going to make some changes to the method as shown in the code snippet below: renderParkings() renderParkings(){ ( ) } return {parkingsSpots.map(parking => this.renderParking(parking))} < = > ScrollView horizontal style {styles.parkings} </ > ScrollView Here, we have replaced the prop with just style prop. Then, we need to make some configurations to parking style variable as shown in the code snippet below: contentContainerStyle parking : { : , : , : , : , : width - ( * ) } backgroundColor 'white' borderRadius 6 padding 12 marginHorizontal 24 width 24 2 Here, we have added the width property to parking style with its value initialized to value from component and then some subtraction of the total width. Dimensions 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 also covers the entire lower section and the parking section overlaps the lower section. MapView MapView 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 component in the method as shown in the code snippet below: ScrollView renderParkings() renderParkings(){ ( ) } return {parkingsSpots.map(parking => this.renderParking(parking))} < = > ScrollView horizontal style {styles.parkings} pagingEnabled scrollEnabled </ > ScrollView Here, we have added the and props to the component. pagingEnabled scrollEnabled ScrollView 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 to the parking section. 24 pixels 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 to the component of method. The be initialized as false. showsHorizontalScrollIndicator ScrollView renderParkings() showsHorizontalScrollIndicator The coding implementation for this is shown in the code snippet below: <ScrollView horizontal style={styles.parkings} pagingEnabled scrollEnabled showsHorizontalScrollIndicator = { } > {parkingsSpots.map( .renderParking(parking))} < false => parking this /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 while scrolling. ScrollView For that, we need to add additional props to the component of the function as shown in the code snippet below: ScrollView renderParkings() <ScrollView horizontal style={styles.parkings} pagingEnabled scrollEnabled showsHorizontalScrollIndicator = { } scrollEventThrottle={ } snapToAlignment= > {parkingsSpots.map( .renderParking(parking))} < false 16 "center" => parking this /ScrollView> Here, we have added the and props. The scrollEventThrottle prop is set to and prop is set to center. scrollEventThrottle snapToAlignment 16 snapToAlignment 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 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: ScrollView parking : { : , : , : , : , : width - ( * ) } backgroundColor 'white' borderRadius 6 padding 24 marginHorizontal 24 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 array function. map() 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!!!
