This tutorial is the twelveth part of our React Native Plant App tutorial series. In the previous part, we successfully completed the implementation of the Header and Input sections in the Settings 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 get insight and knowledge of the overall project.
As mentioned in the previous parts, the inspiration for this tutorial series came from the Mobile App Templates that provide a wide variety of mobile application templates written in React Native and powered by universal features and design. These app templates allow us to implement our own apps and even start our own startups. And, this twelveth part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kitfor the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly. However, there is no verbal guidance for coding and implementation. Hence, this tutorial series is the implementation of the same coding style and designs in the form of the article.
Overview
In this twelveth part of this tutorial series, we are going to implement the remaining UI portions of the Settings Screen. The remaining UI portions are the Slider section and the Toggles section. The idea is to start implementing the Sliders section by making use of slider package. Then, we are going to implement the Toggle section using the Switch component. This will complete the implementation of the UI portion in our Settings Screen.
So, let us begin!!
Implementing Slider section
Here, we are going to implement the slider section which will contain the Slider component from the slider package. But before that, we need to divide this Slider section from our Inputs section. For that, we are going to use the divider which is provided in the code snippet below:
import { Button, Block, Text, Divider} from '../components';
Here, we have imported the Divider component from our predefined custom components. Now, we are going to use the Divider component in the render() method as shown in the code snippet below:
<ScrollView showsVerticalScrollIndicator={false}>
<Block style={styles.inputs}>
..............................................
......................................
</Block>
<Divider margin={[theme.sizes.base, theme.sizes.base * 2]} />
</ScrollView>
Here, we have used the Divider component with style prop just below the Block wrapping the template for the Inputs section.
Implementing Slider UI section
Here, we are going to create the basic template for the slider section before adding the slider components. For that, we need to use the code from the following code snippet:
<Divider margin={[theme.sizes.base, theme.sizes.base * 2]} />
<Block style={styles.sliders}>
<Block>
<Text gray2>Budget</Text>
<Text caption gray2 right>$1,000</Text>
</Block>
<Block>
<Text gray2>Monthly Cap</Text>
<Text caption gray2 right>$5,000</Text>
</Block>
</Block>
<Divider />
Here, we have added the Block component just below the Divider component that we added earlier. The Block component wraps two child Block components. Both the child Block components wrap the Text components with the required text for the Slider section. There is also another Divider component below the parent Block component that creates the horizontal line below the Slider section. The Block and Text components contain the style prop.
The required style is provided in the code snippet below:
sliders: {
marginTop: theme.sizes.base * 0.7,
paddingHorizontal: theme.sizes.base * 2,
},
Hence, we will get the following result in the emulator screen:
As we can see, we have got the basic Slider section template with horizontal divider lines both above and below the section. Now, the things that are missing in this section are the sliders itself. Hence, we are going to add them now.
Adding slider package
Here, we are going to install the slider package called react-native-slider into our project. This package provides the React Native component used to select a single value from a range of values as a slider. In order to install this package, we need to run the following command in our project command prompt:
>>>expo install react-native-slider
Now, after the completion of the installation, we need to import this package as a Slider component in the Settings.js file:
import Slider from 'react-native-slider';
Now, we are going to define some state variables for the slider values. For that, we need to use the code from the following code snippet:
state = {
budget: 850,
monthly: 1700,
}
Here, we have defined the budget and monthly state variables in order to configure the Slider component.
Configuring Slider component
Here, we are going to the Slider component with all the necessary props and styles. For that, we need to use the code from the following code snippet:
<Block style={styles.sliders}>
<Block>
<Text gray2>Budget</Text>
<Slider
minimumValue={0}
maximumValue={1000}
style={{ height: 19 }}
thumbStyle={styles.thumb}
trackStyle={{ height: 6, borderRadius: 6 }}
minimumTrackTintColor={theme.colors.secondary}
maximumTrackTintColor="rgba(157, 163, 180, 0.10)"
value={this.state.budget}
onValueChange={value => this.setState({ budget: value })}
/>
<Text caption gray2 right>$1,000</Text>
</Block>
<Block>
<Text gray2>Monthly Cap</Text>
<Text caption gray2 right>$5,000</Text>
</Block>
</Block>
Here, we have added the Slider components to our first child Block component from before. The Slider component is configured with different props which are explained below:
-
maximumValue: It is the initial maximum value of the slider. The default value is 1. -
minimumValue: It is the initial minimum value of the slider. The default value is 0. -
onValueChange: It is the callback continuously called while the user is dragging the slider. -
minimumTrackTintColor: The color used for the track to the left of the button. It overrides the default blue gradient image on iOS. -
maximumTrackTintColor: The color used for the track to the right of the button. It overrides the default gray gradient image on iOS. -
value: It is the initial value of the slider. The value should be betweenminimumValueandmaximumValuewhich defaults to 0 and 1 respectively.
The required style is provided in the code snippet below:
thumb: {
width: theme.sizes.base,
height: theme.sizes.base,
borderRadius: theme.sizes.base,
borderColor: 'white',
borderWidth: 3,
backgroundColor: theme.colors.secondary,
},
Hence, we will get the following result in the emulator screen:
As we can see, we have got the slider with proper style and configuration in the Slider section of our Settings screen. But we have added only one slider. In this case, we need to sliders. We are going to add another one similar to this now.
Adding Another Slider
Here, we are going to add the second Slider component for the Monthy Cap sub-section. For that, we need to use the code from the following code snippet:
<Block style={styles.sliders}>
<Block margin={[10, 0]}>
<Text gray2 style={{ marginBottom: 10 }}>Budget</Text>
<Slider
minimumValue={0}
maximumValue={1000}
style={{ height: 19 }}
thumbStyle={styles.thumb}
trackStyle={{ height: 6, borderRadius: 6 }}
minimumTrackTintColor={theme.colors.secondary}
maximumTrackTintColor="rgba(157, 163, 180, 0.10)"
value={this.state.budget}
onValueChange={value => this.setState({ budget: value })}
/>
<Text caption gray right>$1,000</Text>
</Block>
<Block margin={[10, 0]}>
<Text gray2 style={{ marginBottom: 10 }}>Monthly Cap</Text>
<Slider
minimumValue={0}
maximumValue={5000}
style={{ height: 19 }}
thumbStyle={styles.thumb}
trackStyle={{ height: 6, borderRadius: 6 }}
minimumTrackTintColor={theme.colors.secondary}
maximumTrackTintColor="rgba(157, 163, 180, 0.10)"
value={this.state.monthly}
onValueChange={value => this.setState({ monthly: value })}
/>
<Text caption gray right>$5,000</Text>
</Block>
</Block>
Here, we have added the second Slider component with the same configuration as first. The only change is in its state variable which in this case is monthly. Hence, we will get the following result in the emulator screen:
As we can see, we have got both sliders in the Sliders section. And we can adjust them by sliding motion as well. This completes our implementation of the Slider section.
Now, we move on to the implementation of the Toggles section just below the bottom Divider component of the Slider section.
Implementing Toggles Section
Here, we are going to implement the Toggles section which will contain the switches to enable notification and newsletters in the app. For that, we need to define the state variables to be configured in the Switch component. The state variables that need to be initialized are provided in the code snippet below:
state = {
budget: 850,
monthly: 1700,
notifications: true,
newsletter: false,
}
Here, we have defined two state variables. The notification state is set to true and the newsletter state is set to false. Now, we need to import the Switch component from our react-native package as shown in the code snippet below:
import { StyleSheet, Image, Switch} from 'react-native';
Adding and Configuring Switch component
Here, we are going to add the Switch component to our Sliders section in the render() function. Then, we are going to configure it with some props. For that, we need to use the code from the following code snippet:
render(){
const { profile } = this.props;
return (
<Block>
<Block flex={false} row center space="between" style={styles.header}>
.............................................
</Block>
<ScrollView showsVerticalScrollIndicator={false}>
<Block style={styles.inputs}>
............................................
</Block>
<Divider margin={[theme.sizes.base, theme.sizes.base * 2]} />
<Block style={styles.sliders}>
........................................
</Block>
<Divider/>
<Block style={styles.toggles}>
<Block row center space="between">
<Text gray2>Notifications</Text>
<Switch
value={this.state.notifications}
onValueChange={value => this.setState({ notifications: value })}
/>
</Block>
<Block row center space="between">
<Text gray2>Newsletter</Text>
<Switch
value={this.state.newsletter}
onValueChange={value => this.setState({ newsletter: value })}
/>
</Block>
</Block>
</ScrollView>
</Block>
);
}
Here, we have added the Block component below the Divider component separating the Toggles section from the Sliders section. The Block component wraps two child Block components. Both the child Block components wrap a Text component and a Switch component. The Switch component is configured with props for value from the state variable. And in toggling the switch, the onValueChange event is triggered which changes the value of the respective state variables.
The required style is provided in the code snippet below:
toggles: {
paddingHorizontal: theme.sizes.base * 2,
}
Hence, we will get the following result in our emulator screen:
As we can see, we have got the toggle Switch components in the Toggles section of the Settings screen. Now, we need to style the Toggles section properly.
Styling the Toggles section
In order to style the Toggles section, we are going to use some style props to the components that are involved in the creation of the Toggles section template. For that, we need to use the code from the following code snippet:
<Block style={styles.toggles}>
<Block row center space="between" style={{ marginBottom: theme.sizes.base * 2 }}>
<Text gray2>Notifications</Text>
<Switch
value={this.state.notifications}
onValueChange={value => this.setState({ notifications: value })}
/>
</Block>
<Block row center space="between" style={{ marginBottom: theme.sizes.base * 2 }}>
<Text gray2>Newsletter</Text>
<Switch
value={this.state.newsletter}
onValueChange={value => this.setState({ newsletter: value })}
/>
</Block>
</Block>
Hence, we will get the following result in the emulator screen:
As we can see, we have got the proper Toggles section in the Settings Screen. The switches can be toggled as well with the active and inactive styles. With this, we have come to the end of this part of the tutorial.
Finally, we have successfully completed the implementation of overall UI sections in the Settings screen of the React Native Plant UI App.
Conclusion
This tutorial is the twelveth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the eleventh part of this tutorial series. In this part of the tutorial, we got step by step guidance on how to make use of the Slider component from the react-native-slider package in order to add the sliders to the Sliders section. Then, we also got an insight into making use of Switch component from the react-native package in order to add the toggles for the Toggles section. Finally, we completed the overall UI sections of the Settings Screen in our React Native Plant UI App.
In the next part of this tutorial series, we are going to handle the editing of inputs in the Inputs section of the Settings screen as well as handle tab clicks in the Browse Screen.
