React Native Plant App UI #1 : jump Started

This React Native Plant App UI clone tutorial series was inspired by the React Native Templates that provides 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. Some of the examples of apps that we can build using these templates are real estate properties, restaurants, bars, cars, dealerships, e-commerce products, marketplace used products, hotels, travel locations, etc. This tutorial series replicates the coding implementations and designs from the Youtube video tutorial by for the Plant App UI Clone. The video tutorial delivers the coding implementation of the overall app very thoroughly. This tutorial series is the implementation of the same coding style and designs in the form of the article. Through this written article tutorial series, the learners can look into the code and implementation of different UI sections of the app more clearly. It negates one of the disadvantages of learning from a video tutorial that is having to pause the video in different sections to understand the implementation. In the written tutorial series, the learners can go through each step and take their time understanding the implementations. React UI Kit Overview In this first part of this tutorial series, we are going to set up the starter project for the upcoming tutorial parts. This first part will form the base for the overall tutorial by organizing different files and folders required in this tutorial series. Here, the idea is to start with a new React Native starter project using expo. After that, we will establish a basic project directory structure for the overall project including navigator configuration. Then, we will also set up the different theme constants and configure the App.js file to cache the assets. So, let us begin!! Note that, in this tutorial, we are going to use the EXPO as the React Native project development tool. So first, we are going to create a boilerplate React Native application using expo client. Creating Starter React Native project First and foremost, since we are going to use the expo as a development engine, we need to install it into our system. To install expo globally into our system, we need to have Node Package Manager(NPM) installed first. Then, we need to run the following command: npm install -g expo Now, we need to create a boilerplate react native application using expo. In order to do this, we need to run following command in the desired project directory: expo init // project name==> Plant After running the above command, we will be asked to choose the template for the boilerplate app. Here, we are going to choose the template. The blank template provides a very minimal app template as clean as an empty canvas. The selection screenshot is provided below: blank As we can see, we choose the blank template and hit enter. Then, we need to enter the project name and after that, the boilerplate react native app is configured into our directory. Now in the App.js file, we are going to use the template from the following code snippet: React ; { StyleSheet, Text, View } ; { render(){ ( Plant App ); } } styles = StyleSheet.create({ : { : , : , : , : , }, }); import from 'react' import from 'react-native' export default . class App extends React Component return View style {styles.container} View const container flex 1 backgroundColor '#fff' alignItems 'center' justifyContent 'center' Now, we need to enter the project directory and then run the command: expo start Then, we will get the following boilerplate app in our emulator screen: As we can see, we have got the starter template running in the emulator. The screen is not configured with too many styles and layout designs. Just a simple white screen with text in the middle. Configuring project files and folders Now, in the project folder, we need to create four new directories named , , , and . For the directory, we need to create eight JavaScript files. In the directory, we need to create a JavaScript file called ‘index.js’ which will hold our navigator configurations. In the folder, we are going to keep the default constants that we are going to use in this app. ‘screens’ ‘navigation’ ‘components’ ‘constants’ ‘./screens/’ ‘/navigation/’ ‘./constants/’ The overall project folder structure is provided in the screenshot below: Here, we need to set up all the files in the required folders as shown in the screenshot above. Component files Now, we also need to add ten component files in the ‘./components/’ folder as shown in the screenshot below: Here, we have just created the files for the components that we are going to use in this tutorial series. We are going to implement these components in our next tutorial. But, we can see that we have file in the folder. In this index.js file, we are going to import all the components and return them as a whole. The configuration in the index.js file is provided in the code snippet below: ‘index.js’ ‘./components/’ Block ; Badge ; Button ; Card ; Input ; Text ; Progress ; Divider ; Switch ; { Block, Badge, Button, Card, Input, Text, Progress, Divider, Switch }; import from "./Block" import from "./Badge" import from "./Button" import from "./Card" import from "./Input" import from "./Text" import from "./Progress" import from "./Divider" import from "./Switch" export Setting up React Navigation Here, we are going to set up our navigation configurations so that we will be able to navigate from screen to screen in our app. For that, we need to install the package along with its supporting dependent packages as shown in the code snippet below: react-navigation >>>expo install react-navigation >>>expo install react-native-gesture-handler >>>expo install react-navigation-stack Now, that we have installed the required packages, we can now set up our navigator in the index.js file of folder. In index.js file, we will set up a stack navigator with all the screen as shown in the code snippet below: ‘./navigation’ { Image } ; { createAppContainer } ; { createStackNavigator } ; Welcome ; Login ; SignUp ; Forgot ; Explore ; Browse ; Product ; Settings ; screens = createStackNavigator({ Welcome, Login, SignUp, Forgot, Explore, Browse, Product, Settings, }, { : { : {}, : , : , : {}, : {}, } }); createAppContainer(screens); import from 'react-native' import from 'react-navigation' import from 'react-navigation-stack' import from '../screens/Welcome' import from '../screens/Login' import from '../screens/SignUp' import from '../screens/Forgot' import from '../screens/Explore' import from '../screens/Browse' import from '../screens/Product' import from '../screens/Settings' const defaultNavigationOptions headerStyle headerBackImage Image headerBackTitle null headerLeftContainerStyle headerRightContainerStyle export default Here, we have imported the createStackNavigator function from the package. This createStackNavigator function enables us to stack our screens in other to configure an app container with screens to navigate. Then, we have also imported the screens from the directory. Then, all the screens are included in the function as the 1st parameter. In the 2nd parameter, we have configured the . The navigation options configured to this object are applied by default to all the screens. Here, in the object we have initialized different options for the header which are not configured yet. react-navigation-stack ‘./screens/’ createStackNavigator defaultNavigationOptions defaultNavigationOptions defaultNavigationOptions Lastly, we have made use of the function from the react-navigation package. In this function, we have passed the screens navigator constant that we have defined as a stack navigator. This function will create a container for our app binding all the screens stacked together. createAppContainer Download Necessary Assets Here, we need to download the necessary assets which include images and icons for our project. The icons and images are kept in separate folders inside the assets folder. The idea is to download the assets folder and then copy the images and icons folder to the folder of our project. ‘./assets/’ The link to download the required assets is provided . here Configuring the constants Now, we are going to configure our constants in the folder. In the constants folder, we have three files which are , and . The will contain the mock data that is required in the different UI sections of the app. So, if we require the use of any mock data for any screens, we are just going to import it from the mock.js file and use it in the screen UI. The file will contain the default style properties that we are going to use throughout this app. ‘./constants/’ mock.js theme.js index.js mock.js theme.js The required mock data to be added to file are provided in the code snippet below: mock.js categories = [ { : , : , : [ , ], : , : ( ) }, { : , : , : [ , ], : , : ( ) }, { : , : , : [ , ], : , : ( ) }, { : , : , : [ , ], : , : ( ) }, { : , : , : [ , ], : , : ( ) }, { : , : , : [ , ], : , : ( ) }, ]; products = [ { : , : , : , : [ , , ], : [ ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ] } ]; explore = [ ( ), ( ), ( ), ( ), ( ), ( ), ]; profile = { : , : , : , : ( ), : , : , : , : , }; { categories, explore, products, profile, } const id 'plants' name 'Plants' tags 'products' 'inspirations' count 147 image require '../assets/icons/plants.png' id 'seeds' name 'Seeds' tags 'products' 'shop' count 16 image require '../assets/icons/seeds.png' id 'flowers' name 'Flowers' tags 'products' 'inspirations' count 68 image require '../assets/icons/flowers.png' id 'sprayers' name 'Sprayers' tags 'products' 'shop' count 17 image require '../assets/icons/sprayers.png' id 'pots' name 'Pots' tags 'products' 'shop' count 47 image require '../assets/icons/pots.png' id 'fertilizers' name 'fertilizers' tags 'products' 'shop' count 47 image require '../assets/icons/fertilizers.png' const id 1 name '16 Best Plants That Thrive In Your Bedroom' description 'Bedrooms deserve to be decorated with lush greenery just like every other room in the house – but it can be tricky to find a plant that thrives here. Low light, high humidity and warm temperatures mean only certain houseplants will flourish.' tags 'Interior' '27 m²' 'Ideas' images require '../assets/images/plants_1.png' require '../assets/images/plants_2.png' require '../assets/images/plants_3.png' // showing only 3 images, show +6 for the rest require '../assets/images/plants_1.png' require '../assets/images/plants_2.png' require '../assets/images/plants_3.png' require '../assets/images/plants_1.png' require '../assets/images/plants_2.png' require '../assets/images/plants_3.png' const // images require '../assets/images/explore_1.png' require '../assets/images/explore_2.png' require '../assets/images/explore_3.png' require '../assets/images/explore_4.png' require '../assets/images/explore_5.png' require '../assets/images/explore_6.png' const username 'Kriss' location 'Asia' email 'kriss@kriss.com' avatar require '../assets/images/avatar.png' budget 5000 monthly_cap 7000 notifications true newsletter false export Here, we have got the mock data for each screen which includes profile, explore, products and categories. Now, the required default style configurations to be added in the file are provided in the code snippet below: theme.js colors = { : , : , : , : , : , : , : , : , }; sizes = { base: , : , : , : , h1: , : , : , : , : , : , : , }; fonts = { : { : sizes.h1 }, : { : sizes.h2 }, : { : sizes.h3 }, : { : sizes.header }, : { : sizes.title }, : { : sizes.body }, : { : sizes.caption }, }; { colors, sizes, fonts }; const accent "#F3534A" primary "#0AC4BA" secondary "#2BDA8E" tertiary "#FFE358" black "#323643" white "#FFFFFF" gray "#9DA3B4" gray2 "#C5CCD6" const // global sizes 16 font 14 radius 6 padding 25 // font sizes 26 h2 20 h3 18 title 18 header 16 body 14 caption 12 const h1 fontSize h2 fontSize h3 fontSize header fontSize title fontSize body fontSize caption fontSize export Here, we have predefined the color, size and font style properties that we are going to use in this project. Now, we are going to export the constants from both mock.js and theme.js file through file of the folder. For that, we need to import the and files into the index.js file and export theme as shown in the code snippet below: index.js ‘./constants’ mock.js theme.js * theme ; * mocks ; { theme, mocks, }; import as from './theme' import as from './mocks' export Here we have exported all the exports from both theme.js and mock.js file through a single file i.e. index.js. Now, we can simply import the index.js file into our screens and components to use the theme and mock data. Configuring App.js Here, we are going to configure the App.js file so that we can cache our assets. Since we have too many images and icons files in this project, caching these files would make the app run faster. For that, we need to install a new package called . This package provides an Expo universal module to download assets and pass them into other APIs. In order to install this package, we need to run the following command: expo-asset >>>expo install expo-asset Now, we need to import this package along with some other package in the App.js file as shown in the code snippet below: { AppLoading } ; { Asset } ; Navigation ; import from 'expo' import from 'expo-asset' import from './navigation/index' Here, we have imported the expo-asset package as module. We have also imported which tells Expo to keep the app loading screen open if it is the first and only component rendered in your app. And, we have also imported the index.js file of folder as . This component holds the app container that we created in the index.js file. Asset AppLoading ‘./navigation/’ Navigation Navigation Now, we need to import all the images that are required in this project so that we can cache them: images = [ ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ( ), ]; // import all used images const require './assets/icons/back.png' require './assets/icons/plants.png' require './assets/icons/seeds.png' require './assets/icons/flowers.png' require './assets/icons/sprayers.png' require './assets/icons/pots.png' require './assets/icons/fertilizers.png' require './assets/images/plants_1.png' require './assets/images/plants_2.png' require './assets/images/plants_3.png' require './assets/images/explore_1.png' require './assets/images/explore_2.png' require './assets/images/explore_3.png' require './assets/images/explore_4.png' require './assets/images/explore_5.png' require './assets/images/explore_6.png' require './assets/images/illustration_1.png' require './assets/images/illustration_2.png' require './assets/images/illustration_3.png' require './assets/images/avatar.png' Here, we have imported all the images from the assets folder and stored them in images constant as an array. Handling the Caching of Images Here, we are going to configure a function called . In this function, we are going to configure the code necessary for caching the images. The overall coding implementation of this function is provided in the code snippet below: handleResourcesAsync() handleResourcesAsync = () => { cacheImages = images.map( { Asset.fromModule(image).downloadAsync(); }); .all(cacheImages); } async // we're caching all the images // for better performance on the app const => image return return Promise Here, we have defined a constant called which is initialized to the array function of images constant. This array function iterates through each item in the images array and then returns each image synced to cache download. Lastly, this function returns the cacheImages constant as a Promise. cacheImages map() map() Now, the overall configuration of the App.js file is provided in the code snippet below: { state = { : , } handleResourcesAsync = () => { cacheImages = images.map( { Asset.fromModule(image).downloadAsync(); }); .all(cacheImages); } render() { (! .state.isLoadingComplete && ! .props.skipLoadingScreen) { ( export default . class App extends React Component isLoadingComplete false async // we're caching all the images // for better performance on the app const => image return return Promise if this this return console.warn(error)} onFinish={() => this.setState({ isLoadingComplete: true })} /> ) } return ( AppLoading startAsync {this.handleResourcesAsync} onError {error ); } } const styles = StyleSheet.create({ }); Here, in the function, we have returned the component on the basis of state. The state is defined to handle the loading state of the app. If this state is false then component is returned else the Navigation component is returned. render() AppLoading isLoadingComplete isLoadingComplete AppLoading Implementing a Simple Welcome Screen In this last step, we are going to implement a simple template in the screen in order to show that our app runs perfectly in the emulator with all the configurations. Welcome.js Since we have just created the files in the screen folders and have not implemented any templates to them, the app may throw the error. Here, we are just going to create a template for Welcome.js screen, so we need to all the other imports in the folder as shown in the screenshot below: comment out index.js file of our ‘./navigation/’ Now, our navigator has only a Welcome screen. Templating Welcome screen Here, we are going to add the React Native template to the Welcome.js file. The overall coding implementation of the screen is provided in the code snippet below: Welcome React ; { StyleSheet, Text, View } ; { render(){ ( Welcome ); } } styles = StyleSheet.create({ : { : , : , : , : , }, }); import from 'react' import from 'react-native' export default . class Welcome extends React Component return View style {styles.container} View const container flex 1 backgroundColor '#fff' alignItems 'center' justifyContent 'center' Hence, we will get the following result in our emulator screen: Hence, we have got the Welcome screen on our emulator screen. With this, we have come to the end of this part of our tutorial. Finally, we have successfully set up and configured all the files and folders necessary for the implementation of the React Native Plant App UI clone. Conclusion This is the first part of our tutorial series to clone the React Native Plant App UI. In this part of the tutorial, we first learned how to set up a stater react native app project by using expo. Then, we learned how to configure different directories and files in order to form the base of our overall project. After that, we got step by step guide on how to set up the navigator for our app screens. We also set up default constants in our folder which we will use in our screens and components in upcoming tutorials. Then, we configured the App.js in order to cache the image assets and also display the app loading state and app Welcome screen. Lastly, we implemented a simple template for the Welcome screen and run the app in an Android emulator to show that the app runs fine with all the configurations. ‘/constants’ Well, this tutorial just paves the foundation for upcoming tutorials. In the next part, we are going to set the predefined components by implementing all the components in the folder. ‘./components’ So, Stay Tuned folks!!!