[Solved]-React Navigation V2: Difference between navigation.push and navigation.navigate-Reactjs

wanted to make it short and simple.

navigation.navigate checks if the screen is in the stack so it takes there(to the older state) but navigation.push just takes you to the new screen without checking if the screen was visited before and if that is available in the stack.

i think i can answer the question.

we have three pages:home page1 page2.

"home" is the "initialroutename",and "page1" and "page2" is child pages.

so when we start with home,and push page1 (or navigate page1),the page stack is:

(2). page1

(1). home

and i push three times page2,the stack is:

(5). page2

(4). page2

(3). page2

(2). page1

(1). home

now i want to go home, i can

1 pop four times, or pop(4) directly;

2 navigate page1, then pop one time;

3 poptotop one time;

when page stack has no page1,navigate works the same as push,push page to top of stack and show the page.

when page stack has page1,the function of navigate is to jump to the page1 which is closest to the top of the stack,and pop others pages above page1.

for example, the following page stack:

(7). page2

(6). page2

(5). page2

(4). page1

(3). page1

(2). page1

(1). home

if you wan to go back to home,you should navigate page1 firstly ,then pop three times.

tt should be noted that when current page is page1 and you navigate to page1,nothing

happened.

here are some of the tests code i wrote,you just copy to app.js.

import * as react from 'react';
import { button, view,text } from 'react-native';
import { navigationcontainer } from '@react-navigation/native';
import { createstacknavigator } from '@react-navigation/stack';
 
function homescreen({ navigation }) {
  return (
    <view style={{}}>
      <button
        title="navigate to page1"
        onpress={() => navigation.navigate('page1',{"pagename":"page1"})}
      />
      <button
        title="push to page1"
        onpress={() => navigation.push('page1',{"pagename":"page1"})}
      />
    </view>
  );
}
 
function page({route, navigation }) {
 
  return (
    <view style={{}}>
    <text>{`current page is ${route.name}`}</text>
       <button
        title="navigate to page1"
        onpress={() => navigation.navigate('page1')}
      />
       <button
        title="push page1"
        onpress={() => navigation.push('page1')}
      />
        <button
        title="navigation to page2"
        onpress={() => navigation.push('page2')}
      />
       <button
        title="push page2"
        onpress={() => navigation.push('page2')}
      />
      <button
        title="go to homescreen"
        onpress={() => navigation.navigate('home')}
      />
        <button
        title="pop"
        onpress={() => navigation.pop()}
      />
        <button
        title="poptotop"
        onpress={() => navigation.poptotop()}
      />
    </view>
  );
}
const stack = createstacknavigator();
function mystack() {
  return (
    <stack.navigator>
     <stack.screen name="home" component={homescreen} />
      <stack.screen name="page1" component={page} />
      <stack.screen name="page2" component={page} />
    </stack.navigator>
  );
}
 
export default function app() {
  return (
    <navigationcontainer>
      <mystack />
    </navigationcontainer>
  );
}

i hope it will be helpful to you.

according to the last blog post here: for v1:

navigate(routename) and push(routename) were very similar: every time you called navigate(routename) it would push a new route to the stack.

for v2:

now navigate(routename) will first try to find an existing instance of the route and jump to that if it exists, otherwise it will push the route to the stack.

navigate > go to instance of page if exist or push a new instance

push > push a new instance even if one exist already