Camping Spots Finder App UI Clone with React Native # 3: Settings Screen
Tags: reactnative, reactnativelayout
Published: 2019-10-11 11:12:09

---
title: Camping Spots Finder App UI Clone with React Native # 3: Settings Screen
published: true
date: 2019-10-11 11:12:09 UTC
tags: React native,React native Layout
canonical_url: https://kriss.io/camping-spots-finder-app-ui-clone-with-react-native-3-settings-screen/
cover_image : https://kriss.io/wp-content/uploads/2019/10/camper.png
---
 
This tutorial is the third part of our Camping Spots Finder App UI clone using React Native. In the previous part, we successfully implemented the List section along with the navigation to the settings screen. This tutorial is the continuation of where we left off in the last part. So, it is suggested to go through the previous parts for full-on insight and development of the overall project.
 
As mentioned in the previous parts, this inspiration for this tutorial series came from [React native real estate template](https://www.instamobile.io/app-templates/real-estate-app-template-react-native/?ref=4094&campaign=dev.to) 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 third 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=bIsQ-hjrYM4&list=PLNRPou200YIeu4UllJkv8-Ca19Ld_eOay&index=13) for the Camping Spots Finder App clone.
 
In this third part of this tutorial series, we are going to implement the settings screen with all the required UI sections.  The required sections include a header with navigations and group sections with buttons and switch.  We have already implemented the navigation to settings screens whose file is Settings.js. First, we are going to configure it then build the settings screen UI, section by section.
 
_So, let us begin!!_
 
## Importing required Packages
 
First of all, we are going to import all the packages that we are going to need in order to implement the overall UI of the settings screen. The packages that we need to import are provided in the code snippet below:
 
```javascript
import {React , Component} from 'react''
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Dimensions,
  SafeAreaView
} from 'react-native';
import { Ionicons, Foundation, FontAwesome } from '@expo/vector-icons';
```
 
Here, we import some components from the react-native package. And also import some Icons packages that we are going to use from the vector-icons package provided by the expo.
 
 
 
## Configuring Settings file
 
Here, we are going to implement the base coding template for the settings screen. We also need to make use of `Dimensions` component in order to initialize the `height` and `width` constant to the overall screen dimension. Then, we are going to set up a class called `Settings` which extends to `Component` module as shown in the code snippet below:
 
```javascript
const { width, height } = Dimensions.get('screen');
class Settings extends React.Component {
  static navigationOptions = {
    header: null,
  };
  render(){
    return (
      <View></View>
    );
  }
}
export default Settings;
```
 
Here, the `navigationOptions` object with `header` configuration is set to `null` because we are going to implement a custom header here.
 
Now, we need to separate the different sections that we need to implement in the settings screen.
 
### **Settings up different UI sections of the Settings screen**
 
Here, we are going to set up different UI sections for the settings screen because it will be easy for us to implement one section at a time as we progress. We will use the `renderHeader()` function as in the Camping screen which will return the custom header template. Then, we will separate the rest of the body section of settings screen inside the `render()` method of Settings.js file as shown in the code snippet below:
 
```javascript
renderHeader(){
    return(
      <View>
        <View style={styles.header}>
          <View style={{flex : 1}}>
            <Text></Text>
          </View>
          <View style={{flex : 1}}>
            <Text>Filter</Text>
          </View>
          <View style={{flex : 1}}>
            <Text></Text>
          </View>
        </View>
      </View>
    )
  }
  render(){
    return (
      <SafeAreaView style={styles.container}>
        {this.renderHeader()}
        <ScrollView style={styles.container}>
          <Text>Sort By</Text>
          <Text>Type</Text>
          <Text>Price</Text>
          <Text>More Options</Text>
        </ScrollView>
      </SafeAreaView>
    );
  }
```
 
Here, we have some `View` components wrapping `Text` component in our header template inside `renderHeader()` function. The parent component in our `render()` function is `SafeAreaView` which enables us to implement the app screen within the proper boundaries of the device screen. We need to remember that `SafeAreaView` component only works for the iOS platform. So, in the Android platform, we need to add some additional styles. There are some styles bound to template components as well which is provided in the code snippet below:
 
```javascript
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: height * 0.1,
    width: width,
    paddingHorizontal: 14,
  },
});
```
 
Hence, we will get the following result in our emulator screen:
 
![](https://kriss.io/wp-content/uploads/2019/10/Screenshot_1570712975-512x1024.png)
 
 
 
## Implementing Header Section
 
We have already separated a section for the header at the top. In this step, we are going to implement the header section with `View` components that wrap the icons as well as text with some styles. We are going to implement this in renderHeader() function. The parent `View` component encloses three child `View` components. The first child `View` component has a flex style that wraps the `TouchableOpacity` component wrapping the `Ionicons` component with an icon. The second child `View` component with some inline flex styles will wrap a `Text` component and the third `View` component will also wrap a `TouchableOpacity` component as shown in the code snippet below:
 
```javascript
renderHeader(){
    return(
      <View style={styles.header}>
        <View style={{ flex: 1 }}>
          <TouchableOpacity>
            <Ionicons name="md-arrow-back" size={24} />
          </TouchableOpacity>
        </View>
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Text style={styles.title}>Filter</Text>
        </View>
        <View style={{ flex: 1, alignItems: 'flex-end' }}>
          <TouchableOpacity>
            <Ionicons name="ios-search" size={24} />
          </TouchableOpacity>
        </View>
      </View>
    )
  }
```
 
Here, we have required `Ionicons` component with icons and `TouchableOpacity` component makes them clickable. Since `SafeAreaView` component does not work in Android platform, we will have to add an additional style as shown in the code snippet below:
 
```javascript
header: {
    marginTop : 20,           //in case of android 
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: height * 0.1,
    width: width,
    paddingHorizontal: 14,
  },
```
 
As a result, we get a custom header in settings screen as shown in the screenshot below:
 
![](https://kriss.io/wp-content/uploads/2019/10/Screenshot_1570713513.png)
 
### Adding navigation
 
Now, we are going to add the navigation back to our Campings screen in the icons that we set up in our header. Since, we have only a Campings screen other that settings screen, we are going to set the navigation to HoCme screen for both the icons. For that, we need to make use of `navigate` function provided by `navigation` prop in the `onPress` event of the `TouchableOpacity` component wrapping the icons as shown in the code snippet below:
 
```javascript
renderHeader(){
    return(
      <View style={styles.header}>
        <View style={{ flex: 1 }}>
          <TouchableOpacity>
            <Ionicons name="md-arrow-back" size={24} onPress={() => this.props.navigation.navigate('Campings')} />
          </TouchableOpacity>
        </View>
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Text style={styles.title}>Filter</Text>
        </View>
        <View style={{ flex: 1, alignItems: 'flex-end' }}>
          <TouchableOpacity>
            <Ionicons name="ios-search" size={24} onPress={() => this.props.navigation.navigate('Campings')} />
          </TouchableOpacity>
        </View>
      </View>
    )
  }
```
 
Hence, we will get the following result in our emulator screen:
 
![](https://kriss.io/wp-content/uploads/2019/10/navigate.gif)
 
 
 
Therefore, we have successfully completed the implementation of the header section in our settings screen. Now, we move on to the implementation of the body section of the settings screen.
 
 
 
## **Implementing Settings screen Body Sections**
 
In this step, we are going to implement the different sections of the settings screen body, section by section. We have already separated four body sections in the earlier step in our `render()` function below the `renderHeader()` function. The sections that we are going to implement are Sort By, Type, Price, and More Options.
 
### **Separating Body Section Headers**
 
Here, we are going to separate different sections for Sort By, Type, Price and More Options with implementing a header text for each one. For that, we are going to add `View` components inside the `ScrollView` component of the `render()` function which will wrap addition two child `View` components as shown in the code snippet below:
 
```javascript
render(){
    return (
      <SafeAreaView style={styles.container}>
        {this.renderHeader()}
        <ScrollView style={styles.container}>
          <View style={styles.section}>
            <View>
              <Text style={styles.title}>Sort By</Text>
            </View>
            <View>
            </View>
          </View>
          <View style={styles.section}>
            <View>
              <Text style={styles.title}>Type</Text>
            </View>
            <View>
            </View>
          </View>
          <View style={styles.section}>
            <View>
              <Text style={styles.title}>Price</Text>
            </View>
            <View>
            </View>
          </View>
          <View style={styles.section}>
            <View>
              <Text style={styles.title}>More Options</Text>
            </View>
            <View>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
```
 
Here, the View component wrapping the additional two View component has some styles bound to it. The first child `View` component is for the header text and the second child `View` component is for the group buttons which we will implement later. We have a `Text` component with some styles as well as text wrapped by the first `View` component.  The styles that are included in the above code below are provided in the code snippet below:
 
```javascript
  section: {
    flexDirection: 'column',
    marginHorizontal: 14,
    marginBottom: 14,
    paddingBottom: 24,
    borderBottomColor: '#EAEAED',
    borderBottomWidth: 1,
  },
  title: {
    fontSize: 18,
    marginVertical: 14,
  },
```
 
Hence, we will get the following result in our emulator screen:
 
![](https://kriss.io/wp-content/uploads/2019/10/Screenshot_1570721304.png)
 
Now, we have got different sections of the settings screen UI separated with section headers. Now, we are going to implement the different sections one by one starting with the More Options section.
 
 
 
### **Implementing the More Options section**
 
Here, we are going to start with the implementation of the More Options section template. In this section, we will have some option text with a switch button on the right-hand side of the screen. So first, we need to import the `Switch` component from the react-native package as shown in the code snippet below:
 
```javascript
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Dimensions,
  SafeAreaView,
  Switch
} from 'react-native';

```
 
Now, we are going to work on the second child `View` component which is placed below the first child `View` component containing the section headers. We are going to bind the `View` component with some styles that wraps the `Text` component as well as the `Switch` component as shown in the code snippet below:
 
```javascript
          <View style={styles.section}>
            <View>
              <Text style={styles.title}>More Options</Text>
            </View>
            <View>
              <View style={styles.option}>
                <Text style={{ fontWeight: '500', }}>Show spots that are full</Text>
                <Switch/>
              </View>
              <View style={styles.option}>
                <Text style={{ fontWeight: '500', }}>Show only highly rated spots</Text>
                <Switch/>
              </View>
              <View style={styles.option}>
                <Text style={{ fontWeight: '500', }}>Show only Free Spots</Text>
                <Switch/>
              </View>
            </View>
          </View>
```
 
Here, the `View` component and `Text` component has some styles which is provided in the code snippet below:
 
```javascript
option: {
    marginBottom: 14,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
}
```
 
As a result, we get the More Options section with switch buttons as shown in the screenshot below:
 
![](https://kriss.io/wp-content/uploads/2019/10/Screenshot_1570723048.png)
 
As we can see, we have got the text as well as switch buttons at the right. But, these switch buttons do not work yet. We need to configure it with state and props in order to make it work properly.
 
#### **Configuring Switch buttons**
 
Here, we are going to configure the switch button with the state, props, and events in order to make it work properly. For that, we need to set the state variable for each switch button as shown in the code snippet below:
 
```javascript
state = {
    option_full: true,
    option_rated: true,
    option_free: false,
  }
render(){
    const {option_free, option_full, option_rated} = this.state;
```
 
Here, we have set three state variables for three switch buttons which are initialized to constants inside the render() function. These three states namely `option_full`, `option_rated` and `option_free` are used to handle the on and off state of switch buttons. The `Switch` component provides a prop called `value` which is set to appropriate state value. Then, we need to change the state of each state variables as we click on the switch button as shown in the code snippet below:
 
```javascript
          <View style={styles.section}>
            <View>
              <Text style={styles.title}>More Options</Text>
            </View>
            <View>
              <View style={styles.option}>
                <Text style={{ fontWeight: '500', }}>Show spots that are full</Text>
                <Switch 
                    value={option_full}
                    trackColor={{false: "#EAEAED", true: "#FF7657"}}
                    onValueChange={() => this.setState({ option_full: !option_full })}
                />
              </View>
              <View style={styles.option}>
                <Text style={{ fontWeight: '500', }}>Show only highly rated spots</Text>
                <Switch 
                   value={option_rated}
                   trackColor={{false: "#EAEAED", true: "#FF7657"}}
                   onValueChange={() => this.setState({ option_rated: !option_rated })}
                />
              </View>
              <View style={styles.option}>
                <Text style={{ fontWeight: '500', }}>Show only Free Spots</Text>
                <Switch 
                   value={option_free}
                   trackColor={{false: "#EAEAED", true: "#FF7657"}}
                   onValueChange={() => this.setState({ option_free: !option_free })}
                />
              </View>
            </View>
          </View>
```
 
Here, the `onValueChange` event of the `Switch` component is initialized with a state change method that changes the state every time the switch is clicked. The `trackColor` prop of the `Switch` component allows us to configure the color of the switch according to ON or OFF state in reference to a `true` or `false` value of the switch.
 
Hence, we will get the following result in our emulator screen: ![](https://kriss.io/wp-content/uploads/2019/10/switch-buttons.gif)
 
 
 
As we can see, we have successfully implemented the More Options section with working switch buttons. Now, we are going to implement the price section of our settings screen body.
 
 
 
### **Implementing Price Section**
 
Here, we are going to implement the Price section of our settings screen body. In the price section, we will have group buttons with text which will emphasize the price value as in the actual app. We are going to work with the second child `View` component just below the first child `View` component containing the price section header.
 
First, we are going to implement the group buttons. The second child `View` component is integrated with some styles. Then, it wraps the `TouchableOpacity` component with some styles which in turn wraps the `Text` component for button text as shown in the code snippet below:
 
```javascript
           <View style={styles.section}>
            <View>
              <Text style={styles.title}>Price</Text>
            </View>
            <View style={styles.group}>
              <TouchableOpacity style={styles.button}>
                <Text>Free</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.button}>
                <Text>$$</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.button}>
                <Text>$$$</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.button}>
                <Text>$$$$</Text>
              </TouchableOpacity>
            </View>
          </View>
```
 
The styles which are assigned to `View` and `TouchableOpacity` component in above code snippet is provided in the code snippet below:
 
```javascript
  group: {
    flexDirection: 'row',
    borderRadius: 14,
    borderWidth: 1,
    borderColor: '#FF7657',
    justifyContent: 'space-between',
  },
  button: {
    flex: 1,
    padding: 14,
    alignContent: 'center',
    alignItems: 'center',
  },
```
 
Hence, we get the following result in our emulator screen:
 
![](https://kriss.io/wp-content/uploads/2019/10/Screenshot_1570725277.png)
 
As we can see, we have got the group buttons in the price section. But, these group buttons are not clickable. For that, we need to configure the group button with state variables to set the active group button.
 
 
#### **Configuring Active group button for Price section**
 
Here, we are going to configure the group buttons in order to make it clickable and show the active button among the group buttons. For that, we need to set the state called `price`which will handle the active state of each button in group buttons as shown in the code snippet below:
 
```javascript
state = {
    price: 'free',
    option_full: true,
    option_rated: true,
    option_free: false,
  }
render(){
    const {
      option_free, 
      option_full, 
      option_rated, 
      price,
    } = this.state;
```
 
Now, we need to set the style to the `TouchableOpacity` and `Text` components according to the `price` state value. Then, we need to change the `price` state value according to the button that will be clicked. For that, we need to trigger the state change function inside the `onPress` event of the `TouchableOpacity` component as shown in the code snippet below:
 
```javascript
            <View style={styles.group}>
              <TouchableOpacity
                style={[styles.button, styles.first, price === 'free' ? styles.active : null]}
                onPress={() => this.setState({ price: 'free' })}
              >
                <Text style={[styles.buttonText, price === 'free' ? styles.activeText : null]}>Free</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.button, price === '$$' ? styles.active : null]}
                onPress={() => this.setState({ price: '$$' })}
              >
                <Text style={[styles.buttonText, price === '$$' ? styles.activeText : null]}>$$</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.button, price === '$$$' ? styles.active : null]}
                onPress={() => this.setState({ price: '$$$' })}
              >
                <Text style={[styles.buttonText, price === '$$$' ? styles.activeText : null]}>$$$</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.button, styles.last, price === '$$$$' ? styles.active : null]}
                onPress={() => this.setState({ price: '$$$$' })}
              >
                  <Text style={[styles.buttonText, price === '$$$$' ? styles.activeText : null]}>$$$$</Text>
              </TouchableOpacity>
            </View>
```
 
Here, we have an active style for the active button when pressed. The active style is based on the value of the `price` state. As we click on buttons, the value of `price` state changes and according to the change in its value, the active button and text style is set to appropriate `TouchableOpacity` and `Text` component. The active button and text styles are provided below:
 
```javascript
  buttonText: {
    textAlign: 'center',
    fontWeight: '500',
  },
  active: {
    backgroundColor: '#FF7657',
  },
  activeText: {
    color: '#FFF'
  },
  first: {
    borderTopLeftRadius: 13,
    borderBottomLeftRadius: 13,
  },
  last: {
    borderTopRightRadius: 13,
    borderBottomRightRadius: 13,
  },
```
 
Hence, we will get the following result in our emulator screen:
 
![](https://kriss.io/wp-content/uploads/2019/10/price-buttons.gif)
 
As we can see, we have successfully implemented the price section along with working group buttons. Now, we are going to implement the Sort By section which is quite similar to the price section.
 
 
 
### **Implementing Sort By Section**
 
Here, we are going to implement the Sort By section of our settings screen body. In the Sort By section, we will have group buttons with text which will emphasize the sort by the filter as in the actual app. We are going to work with the second child `View` component just below the first child `View` component containing the Sort by section header.
 
First, we are going to implement the group buttons. The second child `View` component is integrated with some styles. Then, it wraps the `TouchableOpacity` component with some styles which in turn wraps the `Text` component for button text as shown in the code snippet below:
 
```javascript
           <View style={styles.section}>
            <View>
              <Text style={styles.title}>Sort By</Text>
            </View>
            <View style={styles.group}>
              <TouchableOpacity style={styles.button}>
                <Text styles={styles.buttonText}>Distance</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.button}>
                <Text styles={styles.buttonText}>Ratings</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.button}>
                <Text styles={styles.buttonText}>Reviews</Text>
              </TouchableOpacity>
            </View>
          </View>
```
 
The styles which are assigned to `View` and `TouchableOpacity` component in above code snippet is already available in the styles constant of  `StyleSheet` component.
 
Hence, we get the following result in our emulator screen:
 
![](https://kriss.io/wp-content/uploads/2019/10/Screenshot_1570726248.png)
 
 
 
As we can see, we have got the group buttons in the Sort By section. But, these group buttons are not clickable. For that, we need to configure the group button with state variables to set the active group button.
 
#### **Configuring Active group button for Sort By section**
 
Here, we are going to configure the group buttons in order to make it clickable and show the active button among the group buttons. For that, we need to set the state called `sort` which will handle the active state of each button in group buttons as shown in the code snippet:
 
```javascript
state = {
    sort: 'distance',
    price: 'free',
    option_full: true,
    option_rated: true,
    option_free: false,
  }
render(){
    const {
      option_free, 
      option_full, 
      option_rated, 
      price,
      sort
    } = this.state;
```
 
Now, we need to set the style to the `TouchableOpacity` and `Text` components according to the `sort` state value. Then, we need to change the `sort` state value according to the button that will be clicked. For that, we need to trigger the state change function inside the `onPress` event of the `TouchableOpacity` component as shown in the code snippet below:
 
```javascript
            <View style={styles.group}>
              <TouchableOpacity
                style={[styles.button, styles.first, sort === 'distance' ? styles.active : null]}
                onPress={() => this.setState({ sort: 'distance' })}
              >
                <Text style={[styles.buttonText, sort === 'distance' ? styles.activeText : null]}>Distance</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.button, sort === 'ratings' ? styles.active : null]}
                onPress={() => this.setState({ sort: 'ratings' })}
              >
                <Text style={[styles.buttonText, sort === 'ratings' ? styles.activeText : null]}>Ratings</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.button, styles.last, sort === 'reviews' ? styles.active : null]}
                onPress={() => this.setState({ sort: 'reviews' })}
              >
                <Text style={[styles.buttonText, sort === 'reviews' ? styles.activeText : null]}>Reviews</Text>
              </TouchableOpacity>
            </View>
```
 
Here, we have an active style for the active button when pressed. The active style is based on the value of the `sort` state. As we click on buttons, the value of `sort` state changes and according to the change in its value, the active button and text style is set to appropriate `TouchableOpacity` and `Text` component.
 
Hence, we will get the following result in our emulator screen:
 
![](https://kriss.io/wp-content/uploads/2019/10/sort-button.gif)
 
As we can see, we have successfully implemented the Sort By section along with working group buttons. Now, we are going to implement the Type section which is quite similar to the price and Sort By section.
 
 
 
### **Implementing Type Section**
 
Here, we are going to implement the Type By section of our settings screen body. In the Type section, we will have group buttons with text which will emphasize the type of landscape in the actual app. We are going to work with the second child `View` component just below the first child `View` component containing the Type section header.
 
First, we are going to implement the group buttons. The second child `View` component is integrated with some styles. Then, it wraps the `TouchableOpacity` component with some styles which in turn wraps the `Text` component for button text as shown in the code snippet below:
 
```javascript
          <View style={styles.section}>
            <View>
              <Text style={styles.title}>Type</Text>
            </View>
            <View style={styles.group}>
              <TouchableOpacity style={styles.button}>
                <Text styles={styles.buttonText}>All</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.button}>
                <Text styles={styles.buttonText}>Testing</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.button}>
                <Text styles={styles.buttonText}>RV Camping</Text>
              </TouchableOpacity>
            </View>
          </View>
```
 
The styles which are assigned to `View` and `TouchableOpacity` component in above code snippet is already available in the styles constant of  `StyleSheet` component.
 
Hence, we get the following result in our emulator screen:
 
![](https://kriss.io/wp-content/uploads/2019/10/Screenshot_1570727289.png)
 
 
 
 
 
As we can see, we have got the group buttons in the Type section. But, these group buttons are not clickable. For that, we need to configure the group button with state variables to set the active group button.
 
#### **Configuring Active group button for Type**  **section**
 
Here, we are going to configure the group buttons in order to make it clickable and show the active button among the group buttons. For that, we need to set the state called `type` which will handle the active state of each button in group buttons as shown in the code snippet:
 
```javascript
  state = {
    sort: 'distance',
    type: 'all',
    price: 'free',
    option_full: true,
    option_rated: true,
    option_free: false,
  }
  render(){
    const {
      option_free, 
      option_full, 
      option_rated, 
      price,
      sort,
      type

```
 
Now, we need to set the style to the `TouchableOpacity` and `Text` components according to the `type` state value. Then, we need to change the `type` state value according to the button that will be clicked. For that, we need to trigger the state change function inside the `onPress` event of the `TouchableOpacity` component as shown in the code snippet below:
 
```javascript
           <View style={styles.group}>
             <TouchableOpacity
                style={[styles.button, styles.first, type == 'all' ? styles.active : null]}
                onPress={() => this.setState({ type: 'all' })}
              >
                <Text style={[styles.buttonText, type == 'all' ? styles.activeText : null]}>All</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.button, type == 'tent' ? styles.active : null]}
                onPress={() => this.setState({ type: 'tent' })}
              >
                <Text style={[styles.buttonText, type == 'tent' ? styles.activeText : null]}>Tenting</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.button, styles.last, type == 'rv' ? styles.active : null]}
                onPress={() => this.setState({ type: 'rv' })}
              >
                <Text style={[styles.buttonText, type == 'rv' ? styles.activeText : null]}>RV Camping</Text>
              </TouchableOpacity>
            </View>
```
 
Here, we have an active style for the active button when pressed. The active style is based on the value of the `type` state. As we click on buttons, the value of `type` state changes and according to the change in its value, the active button and text style is set to appropriate `TouchableOpacity` and `Text` component.
 
Hence, we will get the following result in our emulator screen:
 
![](https://kriss.io/wp-content/uploads/2019/10/type-buttons.gif)
 
As we can see, we have successfully implemented the Type section along with working group buttons.
 
With this, we have come to an end of this part of our tutorial series to implement the Camping Spots Finder App UI clone. Finally, we have successfully completed the implementation of different sections of settings screen UI.
 
 
 
## Conclusion
 
This tutorial is the third part of the Camping Spot Finder App UI clone tutorial series. In this part, we continued from where we left off in the second part of this tutorial series. In the part of the tutorial, we first learned how to create different UI sections in the app screen. We also learned how to implement the switch buttons using `Switch` component from the react-native package. And, we also got step by step guidance on how to implement the group buttons and set its active state.
 
In the next part, we are going to add the icons to the Type section as well as add the marker in our Map View in our Camping Spots Finder App UI clone.
 
_So, Stay Tuned folks!!_
 
The post [Camping Spots Finder App UI Clone with React Native #3 : Settings Screen](https://kriss.io/camping-spots-finder-app-ui-clone-with-react-native-3-settings-screen/) appeared first on [Kriss](https://kriss.io).

## Disclosure
This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article