This tutorial is the second part of our Camping Spots Finder App UI clone using React Native. In the previous part, we successfully implemented the Map view section along with the custom header and header tabs. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is suggested to go through the previous parts for better understanding and insight into the overall project.

As stated in the previous part, this inspiration for this tutorial series came from React Native real state template that enables us to build fully functional ready to deploy mobile applications that anyone can use to build their own React Native applications. 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.

In this second part of this tutorial series, we are going to implement the list section that we separated in the previous part of this tutorial as well as set up the navigation to the settings screen. But first, we are going to make some simple changes to the header section in order to make it look clean and proper. Then, we are going to start implementing the list section and finally add the navigation at the end.

So, let us begin!!

Simple changes to Header Section

First and foremost, we are going to make some simple changes to the header section that includes the custom header and the header tabs. Here, in the Camping.js file render() method, we are only going to include the renderMap() and renderList() method to the ScrollView component. Then, we are going to change the parent View component to SafeAreaViewcomponent and bind the style to it. After that, we are going to include the renderHeader() method above the ScrollView component as shown in the code snippet below:

render(){     
  return (       
   <SafeAreaView style={styles.container}>         
     {this.renderHeader()}         
     <ScrollView style={styles.container}>           
       {this.renderMap()}           
       {this.renderList()}         
     </ScrollView>       
   </SafeAreaView>     
  ); 
}

Note that: we need to import the SafeAreaView component as well from the react-native package.

Here, we added the SafeAreaView as a parent component because it enables us to render content within the safe area boundaries of a device. However, we need to be careful that this feature only works with the iOS platform. So, we will have to add some extra style in the Android platform in order to achieve the same output as that of SafeAreaView.

But first, we are going to wrap the entire template of renderHeader() method with another parent View component and bind it with extra style. And then, we are going to call the renderTabs() method inside this parent View component after the View component for custom header section as shown in the code snippet below:

renderHeader() {
    return (
      <View style={styles.headerContainer}>
        
        <View style={styles.header}>
          <View style={{flex: 2, flexDirection: 'row'}}>
            <View style={styles.settings}>
              <View style={styles.location}>
                <FontAwesome name="location-arrow" size={14} color="white" />
              </View>
            </View>
            <View style={styles.options}>
              <Text style={{ fontSize: 12, color: '#A5A5A5', marginBottom: 5, }}>
                Detected Location
              </Text>
              <Text style={{ fontSize: 14, fontWeight: '300', }}>
                Northern Islands
              </Text>
            </View>
          </View>
          <View style={styles.settings}>
            <TouchableOpacity onPress={() => this.props.navigation.navigate('Settings')}>
              <Ionicons name="ios-settings" size={24} color="black" />
            </TouchableOpacity>
          </View>
        </View> 
        {this.renderTabs()}
      </View>
    )
}

Now, we need to add the style headerContainer to the Stylesheet component. And the style with its properties is provided below:

headerContainer: {
    top: 0,
    marginTop : 20,            //marginTop only in Android platform as SafeAreaView component doesnot work in it
    height: height * 0.15,
    width: width,
}

Here, we need to remember to add the marginTop style property if we are developing for the Android platform. This is because the SafeAreaView component doesn’t work.

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

As we can see, we have the header section with custom header and header tabs in the proper position.

Now, we are going to implement the list section in the renderList() method that we defined in the previous tutorial part.

Read more

#react-native #mobile-apps