React Native Travel Article App UI Clone #2 : Destinations Section
Tags: reactnative, reactnativelayout, reactnativetravel, layout
Published: 2019-11-05 07:30:13

---
title: React Native Travel Article App UI Clone #2 : Destinations Section
published: true
date: 2019-11-05 07:23:22 UTC
tags: React native,React native Layout,React native Travel ,layout
canonical_url: https://kriss.io/react-native-travel-article-app-ui-clone-2-destinations-section/
cover_image: https://kriss.io/wp-content/uploads/2019/11/React-Native-Travel-Article-App-UI-1-1.png
series: React Native Travel Article App UI
---

This tutorial is the second part of our React Native Travel Article App UI clone series. In the [previous part](https://kriss.io/react-native-travel-article-app-ui-clone-1-getting-started/), we successfully set up the overall project structure and established the base template with different UI sections for our Article List 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 Universal Listings App Template](https://www.instamobile.io/app-templates/react-native-universal-listings-app-template-backend/) that accommodates a wide variety of use cases, powered by universal features and design which allows us to implement our own apps to list anything that belongs in categories and can be added on a map. And, this second 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=zJ9QETiwdfo&list=PLNRPou200YIeu4UllJkv8-Ca19Ld_eOay&index=7) for the Travel Article 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 implement a portion of the Destinations section which we sectioned out in our previous tutorial part.  The idea is to start by implementing the Destination section with a scrolling transition. Then, we will define mock destinations data which we will later integrate into the Destinations section. Lastly, we will style and configure the contents in the Destination section in order for it to look similar to the actual app.

_So, let us begin!!_

 

## Implementing Destination Section

For starters, we are going to implement a simple Destination section template in the `renderDestinations()` method. For that, we need to use the code from the following code snippet:

```javascript
renderDestinations(){
        return(
            <View style={[styles.flex, styles.column]}>
              <ScrollView horizontal>
                <Text>Destination 1</Text>
                <Text>Destination 2</Text>
                <Text>Destination 3</Text>
              </ScrollView>
            </View>
        )
    }
```

Here, we have included a `ScrollView` component that wraps three `Text` components. The `ScrollView` component allows us to integrate the scroll feature in the app. Since there is a prop `horizontal` included in the `ScrollView` component, we will be able to scroll horizontally.

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

![](https://kriss.io/wp-content/uploads/2019/11/Screenshot_1572763971.png)

As we can see, we have got the Destinations section with three `Text` components. But this screen is not scrollable as there is no room for scrolling.

Now, we are going to style and configure this template in order to make it scrollable.

 

### Adding Dimensions

Here, we are going to add the `Dimensions` component. This component allows us to take the full `width` and `height` of the app screen. For that, we need to use the code from the following code snippet:

```javascript
import { StyleSheet, Text, View, ScrollView, Dimensions } from 'react-native'; 
const {height, width} = Dimensions.get('screen');
```

Here, we have imported the `Dimensions` component from the react-native package. Then, we have defined the `height` and `width` constants by using `get()` function of `Dimensions` module.

 

### Making Destinations Section Scrollable

Now, we are going to make the Destinations section scrollable to the right. For that, we need to make use of `Dimensions` properties and different styles in our `renderDestionations()` method template. The coding implementation to make the Destinations section scrollable is provided in the code snippet below:

```javascript
renderDestinations(){
        return(
            <View style={[styles.flex, styles.column]}>
              <ScrollView horizontal>
                <View style={[styles.flex, styles.destination]}>
                  <Text>Destination 1</Text>
                </View>
                <View style={[styles.flex, styles.destination]}>
                  <Text>Destination 1</Text>
                </View>
                <View style={[styles.flex, styles.destination]}>
                  <Text>Destination 1</Text>
                </View>
              </ScrollView>
            </View>
        )
    }
```

Here, we have included three `View` components inside the `ScrollView` component. Each `View` component wraps the `Text` component. There are also some styles bound to them. The required styles are provided in the code snippet below:

```css
destination : {
      width : width - (36 * 2),
      borderRadius : 12,
      backgroundColor : 'pink'
    }
```

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

![](https://kriss.io/wp-content/uploads/2019/11/destination-scrolling-1.gif)

As we can see, now we can scroll the `View` components with text in the `Destinations` section.

But what we want is to display only one `View` component at a time. And while scrolling it will immediately scroll to the next `View` component without consistent scrolling transition.

 

### **Configuring `ScrollView`**

Here, we are going to make some configurations to `ScrollView` so that only one `View` component inside the `ScrollView` component displayed while scrolling motion. We also need to remove the horizontal scroll bar that appears at the bottom of the Destinations section. For that, we need to include different `ScrollView` configuration props to `ScrollView.` The overall coding implementation is provided in the code snippet below:

```javascript
 <ScrollView 
                horizontal
                pagingEnabled
                scrollEnabled
                showsHorizontalScrollIndicator = {false}
                scrollEventThrottle = {16}
                snapToAlignment = "center"
              >
                <View style={[styles.flex, styles.destination]}>
                  <Text>Destination 1</Text>
                </View>
                <View style={[styles.flex, styles.destination]}>
                  <Text>Destination 1</Text>
                </View>
                <View style={[styles.flex, styles.destination]}>
                  <Text>Destination 1</Text>
                </View>
    </ScrollView>
```

 

As we can see, we have included five new props to the `ScrollView.` The function of all the props are listed below:

- `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.
- `showsHorizontalScrollIndicator`: When its value is false, the horizontal scroll bar at the bottom does not show up.
- `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.

There is also changes to some style properties which is provided below:

```css
articles : {
    },
    destination : {
      width : width - (36 * 2),
      marginHorizontal : 36,
      padding : 36,
      borderRadius : 12,
      backgroundColor : 'pink'
    },
```

 

### **Adding style to the Recommendation section**

Here, we are going to make a few style adjustments to the Recommendation section so that our Destinations section will appear better. For that, we need to use the code from the following code snippet:

```javascript
renderRecommended(){
        return(
            <View style={[styles.flex, styles.column, styles.recommended]}>
                <Text>Recommended</Text>
            </View>
        )
    }
```

The required style is provided in the code snippet below:

```css
recommended : {
      padding : 36
    }
```

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

![](https://kriss.io/wp-content/uploads/2019/11/destination-scrolling-2.gif)

As we can see, when we scroll the Destinations section cards only one card is visible at a time. This makes the section more appealing and smooth. Now, we need to add some content to the Destinations section and style them so that it will look similar to the actual app.

### 

### **Adding Mock data for Destinations section**

Here, we are going to add the mock destinations data. For that, we need to define an array variable called `destinations`. Then, we need to define the array of objects inside the `destinations` array which will represent the data for each destination in the Destinations section. The required mock `destinations` array data is provided in the code snippet below:

```javascript
const destinations = [
  {
    id: 1,
    user: {
      name: 'Lelia Chavez',
      avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
    },
    saved: true,
    location: 'Santorini, Greece',
    temperature: 34,
    title: 'Santorini',
    description: 'Santorini is one of the Cyclades islands in the Aegean Sea. It was devastated by a volcanic eruption in the 16th century BC, forever shaping its rugged landscape. The whitewashed, cubiform houses of its 2 principal towns, Fira and Oia, cling to cliffs above an underwater caldera (crater). They overlook the sea, small islands to the west and beaches made up of black, red and white lava pebbles.',
    rating: 4.3,
    reviews: 3212,
    preview: 'https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=800&q=80',
    images: [
      'https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=800&q=80',
    ]
  },
  {
    id: 2,
    user: {
      name: 'Lelia Chavez',
      avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
    },
    saved: false,
    location: 'Loutraki, Greece',
    temperature: 34,
    title: 'Loutraki',
    description: 'This attractive small town, 80 kilometers from Athens',
    rating: 4.6,
    reviews: 3212,
    preview: 'https://images.unsplash.com/photo-1458906931852-47d88574a008?auto=format&fit=crop&w=800&q=80',
    images: [
      'https://images.unsplash.com/photo-1458906931852-47d88574a008?auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1446903572544-8888a0e60687?auto=format&fit=crop&w=800&q=80',
    ]
  },
  {
    id: 3,
    user: {
      name: 'Lelia Chavez',
      avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
    },
    saved: true,
    location: 'Santorini, Greece',
    temperature: 34,
    title: 'Santorini',
    description: 'Santorini - Description',
    rating: 3.2,
    reviews: 3212,
    preview: 'https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=800&q=80',
    images: [
      'https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=800&q=80',
    ]
  },
  {
    id: 4,
    user: {
      name: 'Lelia Chavez',
      avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
    },
    location: 'Loutraki, Greece',
    temperature: 34,
    title: 'Loutraki',
    description: 'This attractive small town, 80 kilometers from Athens',
    rating: 5,
    reviews: 3212,
    preview: 'https://images.unsplash.com/photo-1458906931852-47d88574a008?auto=format&fit=crop&w=800&q=80',
    images: [
      'https://images.unsplash.com/photo-1458906931852-47d88574a008?auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1446903572544-8888a0e60687?auto=format&fit=crop&w=800&q=80',
    ]
  },
]
```

As we can see, the `destinations` array data contains four object items, each representing the single destination. Each data item contains an id, user info, location, temperature, title, description, rating, reviews, image preview and an additional set of images. Here, we are only going to include a few data from data items. But, other information from the data items will be useful in upcoming tutorials.

 

### **Separate function for each Destination cards**

Here, we are going to define a separate function called `renderDestination()` that will return the template for each destination. The coding implementation of `renderDestination()` method is provided in the code snippet below:

```javascript
renderDestination(item){
      return(
        <ImageBackground
          style={style.flex}
          source= {{uri : item.preview}}
        >
          <View style={[styles.flex, styles.row, styles.destination]}>
            <View>
              <Image source={{uri: item.user.avatar}} style={style.avatar}/>
            </View>
            <View style={[styles.flex, styles.column]}>
              <Text>{item.user.name}</Text>
              <Text>{item.location}</Text>
            </View>
            <View >
              <Text style={style.rating}>{item.rating}</Text>
            </View>
          </View>
        </ImageBackground>
      )
    }
```

Here, the `renderDestination()` function takes a single parameter called item. This `item` parameter will include each data object item from the `destinations` array that we defined earlier. Then, we have used the `item` data in order to implement a simple template. The template includes an `ImageBackground` component that wraps a `View` component. This `ImageBackground` component is used to set the background image on the app screen. The `View` component wraps the child  `View` components with `Text` component for the destination information. There are some styles bound to them that are provided in the code snippet below:

```css
avatar :{
      width: 36,
      height : 36,
      borderRadius : 18
}
```

Now, we need to configure the `ScrollView` in the `renderDestinations()` method as well. We need to call the `renderDestionation()` method in the `renderDestinations()` method by passing the `item` parameter. And, we are also going to change the `ScrollView` to `FlatList` component as well for better configuration.

_Note that we need to remember to import the `ImageBackground` component from the react-native package._

 

### Changing `ScrollView` to `FlatList`

Now, we are going to replace the `ScrollView` component in the `renderDestinations()` method with the `FlatList` component. The `FlatList` component can be configured with all the props from the `ScrollView` component as well as provide a better transition as a List view. The changes made to the `renderDestinations()` function is provided in the code snippet below:

```javascript
renderDestinations(){
        return(
            <View style={[styles.flex, styles.column]}>
              <FlatList 
                horizontal
                pagingEnabled
                scrollEnabled
                showsHorizontalScrollIndicator = {false}
                scrollEventThrottle = {16}
                snapToAlignment = "center"
                data = {destinations}
                keyExtractor = {(item, index)=> `${item.id}`}
                renderItem = {({item}) => this.renderDestination(item)}
              />
            </View>
        )
    }
```

Here, we have completely replaced the `ScrollView` component with `FlatList` component. All the props integrated into `ScrollView` are included in the `FlatList`.  The additional `data` prop takes in the `destinations` array data. The `keyExtractor` prop is used to identify each item in the list uniquely. And, the `renderItem` prop function returns the required template which in this case is calling the `renderDestination()` function with the `item` parameter.

_Note that, we need to remember to import `FlatList` component from the react-native package._

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

![](https://kriss.io/wp-content/uploads/2019/11/destination-scrolling-3.gif)

As we can see, we have got the Destination section card template on the app screen. But, this does not look appealing at all. So, we need to configure the destination card with additional components and styles to make it look like in the actual app.

 

## Configuring Single Destination card

Here, we are going to configure the Destination card with different components and styles in order to make it look appealing as in the actual app. For that, we need to make some changes to the `renderDestination()` function. The changes made in the `renderDestinations()` function is provided in the code snippet below:

```javascript
renderDestination(item){
      return(
        <ImageBackground
          style={[styles.flex, styles.destination]}
          imageStyle = {{borderRadius : 12}}
          source= {{uri : item.preview}}
        >
          <View style={[styles.row, {justifyContent: 'space-between'}]}>
            <View style={{flex : 0}}>
              <Image source={{uri: item.user.avatar}} style={styles.avatar}/>
            </View>
            <View style={[styles.column, {flex : 2, paddingHorizontal : 18}]}>
              <Text style={{color : 'white', fontWeight : 'bold'}}>{item.user.name}</Text>
              <Text style={{color : 'white'}}>{item.location}</Text>
            </View>
            <View style={{flex : 0, justifyContent : 'center', alignItems : 'flex-end'}}>
              <Text style={styles.rating}>{item.rating}</Text>
            </View>
          </View>
        </ImageBackground>
      )
    }
```

The required styles are provided in the code snippet below:

```css
 rating: {
      fontSize: 28,
      color: 'white',
      fontWeight: 'bold'
    },
    destination : {
      width : width - (36 * 2),
      marginHorizontal : 36,
      paddingHorizontal : 36,
      paddingVertical : 24,
      borderRadius : 12,
      backgroundColor : 'pink'
    },
```

Now, we also want to add an Avatar image to the header section of the List screen. For that, we need to use the code from the following code snippet:

```javascript
   header: (
          <View style={[styles.row, styles.header]}>
            <View>
              <Text>Search for place</Text>
              <Text style={{fontSize : 24}}>Destination</Text>
            </View>
            <View>
              <Image style={styles.avatar} source={{ uri: 'https://randomuser.me/api/portraits/women/32.jpg'}} /> 
            </View>
          </View>
        )
```

Here, we have included an `Image` component with a source prop for the avatar image URL.

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

![](https://kriss.io/wp-content/uploads/2019/11/destination-scrolling-final.gif)

As we can see, our destination cards in the Destinations sections look very attractive now. We have also got the Avatar image in the header. With this, we have come to the end of this part of the tutorial.

Finally, We have successfully implemented the scrolling cards transition of the Destinations section in the List screen of our React Native Travel Article UI clone app.

 

## Conclusion

This tutorial is the second part of the React Native Travel Article 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 got step by step guide on how to implement the horizontal scrolling transition in our Destinations section. Then, we also learned how to use `FlatList` with different prop configurations to make the scrolling transition of cards a lot better. Lastly, we added different elements to our destination cards with an Avatar image in the header section of the List screen as well.

In the next part of this tutorial series, we are going to implement the remaining portion of our Destinations section. This will include the Destination information card section and active scrolling dots.

_So, Stay Tuned folks!!!_

 

 

The post [React Native Travel Article App UI Clone #2 : Destinations Section](https://kriss.io/react-native-travel-article-app-ui-clone-2-destinations-section/) appeared first on [Kriss](https://kriss.io).