This tutorial is the third part of our React Native Plant App tutorial series. In the , we successfully implemented all the components in our folder. 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. previous part './components' In case of wanting to learn from the beginning, all the parts for this tutorial series are available below: React Native Plant App UI #1: Getting Started React Native Plant App UI #2: Implementing Custom Components As mentioned in the previous parts, this tutorial series was inspired by the React Native App Templates that accommodates 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 third part is also the continuation of coding implementations and designs from the Youtube video tutorial by for the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly but without any verbal guidance. This tutorial series is the implementation of the same coding style and designs in the form of the article. Thus, the learners can go through each step and take their time understanding the implementations. React UI Kit Overview In this third part of this tutorial series, we are going to implement some UI portions of the Welcome Screen. The idea is to start by implementing the Welcome Screen Header/Slogan section. Then, we are going to section out the different UI sections that we are going to implement in the Welcome screen in the form of functions. Lastly, we are going to add different buttons on the Welcome screen along with the navigation config. So, let us begin!! Implementation of Welcome Screen Here, we are going to implement some of the UI sections of the Welcome screen in the file. First, we are going to set the header or slogan section of the Welcome screen. For that, we need to use the code from the following code snippet in the function of Welcome.js file: Welcome.js render() render(){ ( <Block center bottom flex={0.4}>
         <Text h1 center bold>
           Your Home.
           <Text h1 primary> Greener.</Text>
         </Text>
         <Text h3 gray2 style={{ marginTop: theme.sizes.padding / 2 }}>
           Enjoy the experience.
         </Text>
       </Block> <Block center middle>
         <Text>Welcome</Text>
       </Block> );
 } return < > Block </ > Block Here, we have used the component as well as some components. These components are not from the react-native package. Hence, these are the pre-defined custom components that we implemented in the earlier tutorial part. We have also assigned some props to the components which are already configured inside the component files. Thus, we need to import the constant file to the file: Block Text theme.js Welcome.js { theme } ; import from '../constants' Hence, we will get the following result in the emulator screen:  As we can see, we have got the slogan section on our Welcome screen which looks very appealing. Now, we are going to section our the different UI sections on the Welcome screen. So, the code becomes clearer for each section and it will be easier for us to implement as well. Separating Different UI sections in Welcome Screen Here, we are going to separate two UI sections. One is the Illustrations Section and the other is Steps(Delimiter Dots) Section. We are going to implement separate functions for both these sections. The function will return the template for these sections. Illustrations Section This section will contain the images which will be horizontally scrollable. For now, we are just going to separate it out with the renderIllustrations() function as shown in the code snippet below: renderIllustrations(){ ( <Text>Image</Text> )
 } return < > Block </ > Block Steps Section This section will contain the as per the number of Illustrations. The idea is to animate to active dot whenever we scroll the Illustrations. For this, we are going to use the function called which is provided in the code snippet below: Delimiter Dots renderSteps() renderSteps(){ ( <Text>* * *</Text> )
 } return < > Block </ > Block Now, we need to call both the functions into our function as shown in the code snippet below: render() render(){ ( <Block center bottom flex={0.4}>
         <Text h1 center bold>
           Your Home.
           <Text h1 primary> Greener.</Text>
         </Text>
         <Text h3 gray2 style={{ marginTop: theme.sizes.padding / 2 }}>
           Enjoy the experience.
         </Text>
       </Block> <Block center middle>
         {this.renderIllustrations()}
         {this.renderSteps()}
       </Block> );
 } return < > Block </ > Block Here, we have replaced the Text component having 'Welcome' text with the function calls. Hence, we will get the following result in our emulator screen: As we can see, we have separated out the two UI sections. The Illustrations section marked by 'Image' text. And, the Steps section marked by three asterisks. Implementing Buttons sections Here, we are going to add buttons to the bottom of the Welcome screen just below the Steps section. We are going to add three buttons for , and . For that, we need to use the code from the following code snippet in the function: Login Sign up Terms and Conditions(TOC) render() <Block center middle>
  { .renderIllustrations()}
  { .renderSteps()}
< Text> <Button> < Text> < this this /Block>
<Block middle flex={0.5} margin={[0, theme.sizes.padding * 2]}>
  <Button>
    <Text center>Login</ </ > Button Signup < > Text center </ > Text /Button>
  <Button>
    <Text center>Terms of service</ </ > Button /Block> Here, we have added another component below the Block component wrapping function calls. This component wraps the three components with components. Hence, we will get the following result in our emulator screen: Block Block Button Text As we can see, we have got the button in the form of text-only which does not seem appealing. So, we are going to add some styles to them in order to make them look appealing. Styling the Buttons Before applying style props to the and component, we need to make a slight configuration to the file of the folder. For that, we need to install the package called . This package provides a React component that renders a gradient view. Now, we are going to import this package as in the file as shown in the code snippet below: Button Text Button.js './components/' expo-linear-gradient LinearGradient Button.js { LinearGradient } ; import from 'expo-linear-gradient' Now, we are going to add some style props to the components as shown in the code snippet below: Note that we installed this package because the expo package that provided the LinearGradient component was already separated out to this package. Button <Block middle flex={ } margin={[ , theme.sizes.padding * ]}> <Text center semibold white>Login</Text> <Button shadow> < Text> < 0.5 0 2 < > Button gradient </ > Button Signup < > Text center semibold </ > Text /Button>
  <Button>
    <Text center caption gray>Terms of service</ </ > Button /Block> Here, we have added and prop to our buttons. We have also styled our components with some and props. Hence, we will get the following result in our emulator screen: gradient shadow Text color position As we can see, we have got beautiful buttons in our Welcome screen. The Login button has a gradient color to it and the button has a shadow style. Now, we should already have guessed that these two buttons navigate to the and screen. So, we are going to add the navigation configuration to them now. Signup Login Signup Adding Navigation to Buttons Here, we are going to add the navigation configuration to buttons. For that, we are going to use the function provided by the navigation prop as shown in the code snippet below: navigate() <Block middle flex={ } margin={[ , theme.sizes.padding * ]}> <Text center semibold white>Login</Text> <Button shadow onPress={() => .props.navigation.navigate( )}> < Text> < 0.5 0 2 this.props.navigation.navigate('Login')}> < = => Button gradient onPress {() </ > Button this 'SignUp' Signup < > Text center semibold </ > Text /Button>
  <Button onPress={() => {}}>
    <Text center caption gray>Terms of service</ </ > Button /Block> Here, we have added the navigation config to onPress event of the Button component. But, we might remember that we have commented out the Login and SignUp screens in our . Now, we need to add a simple React Native Template to these two screens. In file, we are going to use the code from the following code snippet to implement a simple template: index.js file of the './navigation' folder Now, it is now time to uncomment the Login and SignUp screen in the index.hs file of the './navigation/' folder. Login.js React ; { StyleSheet } ; { Button, Block, Text } ; { navigationOptions = { : }


 render(){ ( <Text>Login</Text> );
 }
 } styles = StyleSheet.create({

}); import from 'react' import from 'react-native' import from '../components' export default . class Welcome extends React Component static header null return < > Block middle </ > Block const Same goes for SignUp screen in the file: Signup.js React ; { StyleSheet } ; { Button, Block, Text } ; { navigationOptions = { : }


 render(){ ( <Text>Sign Up</Text> );
 }
 } styles = StyleSheet.create({

}); import from 'react' import from 'react-native' import from '../components' export default . class Welcome extends React Component static header null return < > Block middle </ > Block const Now, we can test if the navigation to these two screens works if we click their respective buttons in our Welcome screen. Hence, we will get the following result in our emulator screen: As we can see, we have successfully configured the Navigation to Login and SignUp screen when we click their respective buttons on the Welcome screen. With this, we have come to the end of this part of the tutorial. Finally, we have successfully implemented the slogan and buttons section of the Welcome screen in our React Native Plant app. Conclusion This tutorial is the third part of the React Native Plant App tutorial series. In this part, we continued from where we left off in the second part of this tutorial series. In this part of the tutorial, we implemented the slogan section of our Welcome screen by using our predefined custom components. Then, we separated out the functions which will return the templates for and section. Lastly, we learned how to make use of the component to implement buttons and style them with different props as well as configure them with the navigation features. Illustrations Steps Button In the next part of this tutorial series, we are going to implement the Illustrations and Steps section that we separated out in this tutorial part. So, Stay Tuned folks!!!

YouTube

How To Build WordPress App with React Native Part #1: Overview

React Native Travel Article App UI Clone #6 : Finish 

visit more my tutorial

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

React Native Plant App UI #3 : Implementing Welcome Screen

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Instagram-like Filters In React Native

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

Instagram-like Filters In React Native

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps