Stack Navigation


import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

// to use multiple screens we have to make the a const for stack navigator 

const stackNavigation=createNativeStackNavigator();

Now we have to give one entry Route on opening the application and rest we will assign with some name so that we can render any screen by that name

Code


import { StatusBar } from 'expo-status-bar';
import { Component, useRef, useState, useEffect } from 'react';
import { AppRegistry, ScrollView, Image } from 'react-native';
import { StyleSheet, Text, View ,Button,TextInput} from 'react-native';
// import Home from './components/Home';
// import Imagecomp from './components/Imagecomp';
import Notes from './components/Notes';
import { NavigationContainer } from '@react-navigation/native';;
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import NewPage from './components/NewPage';

const stackNavigation = createNativeStackNavigator();
export default function App() {

  return (
    <NavigationContainer>
      <stackNavigation.Navigator initialRouteName='Notes'>
        <stackNavigation.Screen name='Notes' component={Notes} options={{title:"My notes"}} />
        <stackNavigation.Screen name='NewPage' component={NewPage} options={{title:"New Page"}} />
      </stackNavigation.Navigator>
</NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#faf3d4',
    alignItems: 'center',
    // justifyContent: 'center',
    
  },
  Button: {
    padding: '5px'
  }
});

🔥

Now These names are important because we will render the page by giving these name as param to the navigate function

Notes.js

we recive some props in the Notes component which we will use to redirect to another page in the application

we will run this function onPress of a Button so that will redirect us on the page which has the same name given in the navigate function

Problem

🔥

If You give any other name as { nav } in the param it will not work because it is like props.navtigation so you can’t change the name

Passing param to the routes

Use Of params in components

ClassBasedComponents

FunctionBasedCompoents

Important

🔥

These are the props which we are reciving in the compoenent used inside the NavigateContainer

🔥

{navigation} is one of the props which we are using to communication between the components