This tutorial is the eleventh part of our React Native Plant App tutorial series. In the previous part, we successfully completed the implementation of the overall UI of the Browse 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 eleventh 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 eleventh part of this tutorial series, we are going to start implementing some of the UI sections of the Settings screen. The Settings Screen will contain four UI sections. The four UI sections are the header section, inputs section, slider section, and the toggle section. These sections are used to adjust different features in the actual app. In this part, we are just going to implement the header section and the inputs section. But first, we need to set up the navigation to the Settings screen. And then, start doing some coding for the Settings screen.
So, let us begin!!
Navigation to the Settings screen
Here, we are going to set up the navigation to the settings screen from the Browse Screen. The navigation will be configured in the avatar profile image of the Browse screen. For that, we need to use the code from the following code snippet in the Browse.js file:
render(){
const { profile, navigation, categories } = this.props;
const tabs = ['Products', 'Inspirations', 'Shop'];
return (
<Block>
<Block flex={false} row center space="between" style={styles.header}>
<Text h1 bold>Browse</Text>
<Button onPress={() => navigation.navigate('Settings')}>
<Image source={profile.avatar} style={styles.avatar}/>
</Button>
</Block>
<Block flex={false} row style={styles.tabs}>
{tabs.map(tab => this.renderTab(tab))}
</Block>
.....................................
Here, we have set up the navigation configuration in the onPress event of the Button component wrapping the avatar Image component.
**Now, we need to uncomment the Settings screen in the index.js file of the ‘./navigation/’ folder. **
Then, we need to add the simple react native template to the Settings screen. For that, we have to use the code from the following code snippet in the Settings.js file:
import React from 'react';
import { StyleSheet, Image } from 'react-native';
import { theme, mocks } from '../constants';
import { Button, Block, Text} from '../components';
export default class Browse extends React.Component {
render(){
return (
<Block>
<Text>Settings</Text>
</Block>
);
}
}
Browse.defaultProps = {
profile : mocks.profile,
}
const styles = StyleSheet.create({
});
Here, we have already imported some of the necessary components from the react-native package as well as the predefined custom components. We have also imported the theme and mock data constants. We have also set the default prop called profile for the Settings screen which is set to profile data from the mocks module.
Hence, we will get the following result in the emulator screen:
As we can see, when we tap on the profile avatar image of the Browse screen, we are navigated to the Settings screen.
Implementing Header Section in the Settings Screen
Here, we are going to implement the header UI section of the Settings screen which is similar to that of the Browse screen. Since the coding implementation for both the screens can be the same, we are going to copy the UI section code from the Browse screen and use it in the Settings screen. For that, we need to use the following code in the render() method of the Settings.js file:
render(){
const { profile } = this.props;
return (
<Block>
<Block flex={false} row center space="between" style={styles.header}>
<Text h1 bold>Settings</Text>
<Button>
<Image source={profile.avatar} style={styles.avatar}/>
</Button>
</Block>
</Block>
);
}
Here, we have defined the profile constant from the props data. Then, we have implemented the template for the Settings screen header section which is similar to the Browse screen. The required styles are provided in the code snippet below:
header: {
paddingHorizontal: theme.sizes.base * 2,
},
avatar: {
height: theme.sizes.base * 2.2,
width: theme.sizes.base * 2.2,
},
Hence, we will get the following result in the emulator screen:
As we can see, we have got the header section in our Settings screen which is more or less similar to that of the Browse Screen.
Implementing Inputs Section of the Settings screen
Here, we are going to implement the Inputs UI section of the Settings Screen. This UI section will be just below the header section. The Inputs section will display the profile username, location and email of the app user. The username and location inputs will be editable whereas, for the email, the email used at the time of registration will be shown. Now, in order to implement this section, we need to use the code from the following code snippet in the render() function:
return (
<Block>
<Block flex={false} row center space="between" style={styles.header}>
<Text h1 bold>Settings</Text>
<Button>
<Image source={profile.avatar} style={styles.avatar}/>
</Button>
</Block>
<ScrollView showsVerticalScrollIndicator={false}>
<Block>
<Block row space="between">
<Text gray2>Username</Text>
<Text bold>kriss</Text>
</Block>
<Text medium secondary>
Edit
</Text>
</Block>
</ScrollView>
</Block>
);
Here, we have added the ScrollView component below the Block wrapping template for the header section. The ScrollView component has the vertical scroll bar disabled setting the showsVerticalScrollIndicator prop to false. The ScrollView component wraps the Block component. And, the Block component wraps a child Block component and the Text component. The child Block component wraps some Text components. All the components have some style prop bound to them.
Hence, we will get the following result in the emulator screen:
As we can see, we have got the Inputs section showing the username only. We need to add the input for the location as well as the email. But before that, we need to style this username input properly as it looks out of place in the above screenshot. As a matter of fact, the other inputs will also take the same style as username input. So, it will be easier for us.
Styling Input
Here, we are going to style and position the input properly so that the Inputs section looks appealing. For that, we need to use the code from the following code snippet:
<ScrollView showsVerticalScrollIndicator={false}>
<Block style={styles.inputs}>
<Block row space="between" >
<Block>
<Text gray2 style={{ marginBottom: 10 }}>Username</Text>
<Text bold>kriss</Text>
</Block>
<Text medium secondary>
Edit
</Text>
</Block>
</Block>
</ScrollView>
Here, the Block component wrapped by the ScrollView component is bound to some style. The other components are also bound to style props or inline styles. The required style is provided in the code snippet below:
inputs: {
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, the username input looks good now. Now, we can add other inputs in the Inputs section with additional styles to make it look even better.
Adding multiple Inputs
Here, we are going to add the inputs for the location as well as email. In order to add the inputs, we need to use the code from the following code snippet:
<ScrollView showsVerticalScrollIndicator={false}>
<Block style={styles.inputs}>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>Username</Text>
<Text bold>kriss</Text>
</Block>
<Text medium secondary>
Edit
</Text>
</Block>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>Location</Text>
<Text bold>Thailand</Text>
</Block>
<Text medium secondary>
Edit
</Text>
</Block>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>E-mail</Text>
<Text bold>contact@kriss.com</Text>
</Block>
<Text medium secondary>
Edit
</Text>
</Block>
</Block>
</ScrollView>
Here, we have added two Block components that have the template for location and email inputs. The Block components also have some style prop integrated to them. The required style is provided in the code snippet below:
inputRow: {
alignItems: 'flex-end'
},
Hence, we will get the following result in the emulator screen:
As we can see, we have got all three inputs in the Inputs section with proper styles. The edit button in the Inputs section is not usable yet. We are going to handle the editing and saving of the input section in the upcoming tutorial parts.
The data we have displayed as username, location, and email are all hardcoded. We need to use the data from our profile prop. So, we are going to do that now.
Adding data from profile prop
Here, we are going to use the data from the profile prop for the username, location, and email inputs. For that, we need to use the code from the following code snippet:
<ScrollView showsVerticalScrollIndicator={false}>
<Block style={styles.inputs}>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>Username</Text>
<Text bold>{profile.username}</Text>
</Block>
<Text medium secondary>
Edit
</Text>
</Block>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>Location</Text>
<Text bold>{profile.location}</Text>
</Block>
<Text medium secondary>
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>
<Text medium secondary>
Edit
</Text>
</Block>
</Block>
</ScrollView>
Here, we have replaced the hardcoded username, location and email data with the data from the profile prop.
Hence, we will get the following result in the emulator screen:
As we can see, we have replaced the hardcoded data with the data from the profile prop. With this, we have come to the end of this part of the tutorial.
Finally, we have successfully implemented the Header and Inputs section in the Settings Screen of our React Native Plant UI App.
Conclusion
This tutorial is the eleventh part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the tenth part of this tutorial series. In this part of the tutorial, we first set up the navigation to the settings screen with a simple react native template on the Settings screen. Then, we implemented the header section of the Settings screen which is more or less similar to the Browse screen. Then, we got stepwise guidance on how to implement the Inputs section of the Settings screen. Lastly, we integrated the actual inputs data from the profile prop as well.
