This tutorial is the thirteenth part of our React Native Plant App tutorial series. In the previous part, we successfully completed the implementation of the Sliders and Toggles 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 motivation for this tutorial series came from the Mobile Themes 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 thirteenth part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kit for 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 thirteenth part of this tutorial series, we are going to handle the Input section edits of the Settings Screen and Tab section tab clicks in the Browse screen. The idea is to make the inputs in the Inputs section of the Settings screen editable. Here, we will make only the username and location inputs editable whereas the email input will remain non-editable. Then, we are going to show the categories section in the Browse Screen in accordance with the tab clicks of the Tabs section.
So, let us begin!!
Handling Input Edits in Settings Screen
Here, we are going to make the inputs in the Inputs section editable. We might remember that we have placed the ‘edit’ buttons to the right side of the inputs in the Inputs section of the Settings screen. We need to make the inputs actually editable while clicking the edit buttons and save the edits as well. But first, we need to define some state variables in order to handle them. For that, we need to use the code from the following code snippet:
state = {
budget: 850,
monthly: 1700,
notifications: true,
newsletter: false,
editing: null,
profile: {},
}
Here, we have defined two new state variables editing and profile. Now, we need to initialize the profile state variable to the profile prop data in the componentDidMount react hook function as shown in the code snippet below:
componentDidMount() {
this.setState({ profile: this.props.profile });
}
Functions to handle the editing
Here, we are going to define three new functions that are required to handle the editing and saving of input fields in the Inputs section. First, we are going to define a function called toggleEdit() which will make the input fields editable while clicking the edit button. And, based on toggleEdit() function, we need to change the button from edit to save and vice-versa. The overall implementation of toggleEdit() function is provided in the code snippet below:
toggleEdit(name) {
const { editing } = this.state;
this.setState({ editing: !editing ? name : null });
}
Here, we are just changing our editing state based on the value of editing itself to the name of the user or null. Now, another function we need to define is called renderEdit(). This function returns either the TextInput component or the Text component based on the value of editing state variable set by the toggleEdit() function. The overall implementation of this function is provided in the code snippet below:
renderEdit(name) {
const { profile, editing } = this.state;
if (editing === name) {
return (
<TextInput
defaultValue={profile[name]}
onChangeText={text => this.handleEdit([name], text)}
/>
)
}
return <Text bold>{profile[name]}</Text>
}
Now, the third function that we need to define is called handleEdit() which takes two parameters. This function takes the name of the user and the text value from the Input component as parameters in order to change and save the edits in the input fields. This will change the profile state based on the editing done by the user. The overall implementation of handleEdit() function is provided in the code snippet below:
handleEdit(name, text) {
const { profile } = this.state;
profile[name] = text;
this.setState({ profile });
}
Now, we need to call these functions in the Inputs Section template of the Setting screen. But first, we need to define the editing state constant in the render() function:
render(){
const { profile, editing } = this.props;
Now, we need to call the functions as shown in the code from the following code snippet in the render() function :
<Block style={styles.inputs}>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>Username</Text>
{this.renderEdit('username')}
</Block>
<Text medium secondary onPress={() => this.toggleEdit('username')}>
{editing === 'username' ? 'Save' : 'Edit'}
</Text>
</Block>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>Location</Text>
{this.renderEdit('location')}
</Block>
<Text medium secondary onPress={() => this.toggleEdit('location')}>
{editing === 'location' ? 'Save' : 'Edit'}
</Text>
</Block>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>E-mail</Text>
<Text bold>{profile.email}</Text>
</Block>
</Block>
</Block>
Here, we have called each function in the respective places in the Input Section template of the render() function. We have also displayed the edit or save button based on the editing state variable.
Hence, we will get the following result in our emulator screen:
As we can see, we can edit as well as save the username and location inputs. Hence, we have successfully completed the handling of inputs in the Inputs section of the Settings screen.
Handling tabs in Browse Screen
Here, we are going to make the tabs buttons in the Tabs section of the work. The idea is to show the categories in the Categories section based on the active tab that is being selected. This means the categories appearing on the Categories section of the Browse screen will be in accordance with the selection of a particular tab in the tabs section. For that, we need to define a new state variable called categories in the Browse.js file as shown in the code snippet below:
state = {
active: 'Products',
categories : []
}
Here, we have defined a new state array variable called categories to store the categories based on the tab clicks. Now, we need to initialize this categories state variable to the categories prop in the componentDidMount react hook as shown in the code snippet below:
componentDidMount() {
this.setState({ categories: this.props.categories });
}
Functions to handle the change of categories based on tab clicks
Here, we are going to define a new function called handleTab(). This tab is going to filter out the categories from the categories prop and then set it to the categories state based on the tab clicks. the overall implementation of handleTab() function is provided in the code snippet below:
handleTab = tab => {
const { categories } = this.props;
const filtered = categories.filter(
category => category.tags.includes(tab.toLowerCase())
);
this.setState({ active: tab, categories: filtered });
}
Now, we need to call this function in the Tabs section template of the Browse screen. But before that, we need to initialize the categories state in the render() function:
render(){
const { profile, navigation } = this.props;
const { categories } = this.state;
Here, we are taking categories from the state instead of the prop.
Now, we need to call the handleTab() function in the render() function as shown in the code snippet below:
<TouchableOpacity
key={`tab-${tab}`}
style={[
styles.tab,
isActive ? styles.active : null
]}
onPress={() => this.handleTab(tab)}
>
<Text size={16} medium gray={!isActive} secondary={isActive}>
{tab}
</Text>
</TouchableOpacity>
Here, we have called the handleTab() function with tab parameter in the onPress event of the TouchableOpacity component. Instead of changing the active state, we have called the function here.
Hence, we will get the following result in the emulator screen:
As we can see, now the categories can be filtered by tapping the tab buttons in the Tabs section of the Browse screen. Hence, we have successfully completed the handling of tab clicks and changing the category cards in the Browse screen.
Navigation to Explore Screen
Here, we are going to implement the navigation to the Explore screen from the Browse screen. We have already set up the navigation configurations to the Explore screen in the Category cards of the Browse screen.
We must remember to uncomment the Explore screen in the index.js file of the ‘./navigation/’ folder.
Now, we need to implement the simple react native template for the Explore screen. The simple React Native template for the Explore screen is provided in the code snippet below:
import React from 'react';
import { StyleSheet } from 'react-native';
import { Button, Block, Text} from '../components';
export default class Explore extends React.Component {
render(){
const {navigation} = this.props
const category = navigation.getParam('category');
return (
<Block center middle>
<Text>{category.name}</Text>
</Block>
);
}
}
Here, we have implemented a simple react native template in the Explore.js file. We have imported some necessary components from the react-native as well as the predefined custom components. We have made use of a parameter called category that has been passed down from the Browse screen to the Explore screen.
Hence, we will get the following result in the emulator screen:
As we can see, we can now navigate to the Explore screen while clicking on category cards in the Browse screen. With this, we have come to the end of this part of the tutorial.
Finally, we have successfully implemented the handling of inputs and tabs from the Settings and Browse screen as well as add the navigation to the Explore screen in our React Native Plant UI App.
Conclusion
This tutorial is the thirteenth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the twelveth part of this tutorial series. In this part of the tutorial, we got step by step guidance on to handle the input fields in the Inputs section of the Settings screen and make them editable. Then, we also got detailed insight on how to show the categories in the Categories section of the Browse screen based on the tab clicks. Lastly, we also added navigation to the Explore screen from the Browse screen.
In the next part of this tutorial series, we are going to start implementing some of the UI sections of the Explore screen.
