Categories
Uncategorized

Chapter 2 – React navigation and  React native vector icons

In this chapter, we use React navigation version 5 for bootstrap app navigation and create a blank screen to show how it work finally we setup react native vector icons for add icon to tabs

install react-navigation version 5

in this version, expo team divide to multiple packages for this app we use stack and tabs so the list below is a package that we need to install

  1. react-navigation/native is core package
  2. react-navigation/stack for general navigation style
  3. react-navigation/bottom-tabs for tab-style
yarn add @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs

and dependencie package

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

setup React Navigation on iOS

for iOS, part use Cacoapod setup iOS package

cd ios; 
pod install;
cd..

setup React Navigation on Android​

in react native version 0.60 no need installation required

Organize a new structure

Next, create folder and file like the image below

For every file in the screens folder, we add starter code

import React from 'react'
import { View, Text } from 'react-native'
 
const Home = () => {
   return (
       <View>
           <Text>Home Screen</Text>
       </View>
   )
}
export default Home

add to every file and change class name

Categories
Uncategorized

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!