How to Navigate from One Screen to Another Screen

How to navigate from one screen to another in React native?

onPress handler does not getting called with navigation as the first parameter. That is undefined. navigation is a prop to your class component which is provided by stack navigator setup.

Instead of

onPress = {(navigation) => navigation.navigate('Sign Up')}

use

onPress = {() => this.props.navigation.navigate('Sign Up')}

How to navigate from one screen to another screen

OnClickListener onClickListener = new OnClickListener() {
    @Override
    public void onClick(View v) {
        startActivity(new Intent(action));
    }
};

Button button = (Button) findViewById(id);
button.setOnClickListener(onClickListener);

Navigate to another screen - 'navigation.navigate' is not a function

make use of hook useNavigation.

Home.js

const Home = (props) => {
  const navigation = useNavigation();
  return (
    <View>
      <Screen1 navigation={navigation} />
    </View>
  );
};

Screen1.js

export default class Screen2 extends React.Component {

  renderList = (props) => {
    return List.map((item, i) => {
      return (
        <View
          key={List.name}
          style={{
            width: windowWidth,
            height: scale(100),
            paddingLeft: scale(10),
          }}>
          <TouchableOpacity onPress={() => {
            props.navigation.navigate('Screen2')
          }} activeOpacity={0.7}>
            <Text style={{ fontSize: 20 }}>{item.name}</Text>
          </TouchableOpacity>
        </View>
      );
    });
  };

render() {
  const props= this.props;
  return (
    <View style={{ top: scale(50) }}>
      <ScrollView style={{ height: windowHeight }}>
         { this.renderList (props) }
      </ScrollView>
    </View>
  );
}
}

snack expo working code

How do I navigate from one screen to another in react native using props?

You can do something like this.

You need to create a StackNavigator

import { createStackNavigator } from "@react-navigation/stack";
.....
.....
const Stack = createStackNavigator();

export const RootStack = () => {
  return (
    <Stack.Navigator initialRouteName="Schools">
      <Stack.Screen name="Schools" component={MainScreen}/>
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
};

Then you can modify the Tab.Navigator to

 function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Root" component={RootStack} />  // Change this line
      <Tab.Screen name="Other" component={OtherScreen} />
    </Tab.Navigator>

Have a look at Nesting navigators in react-navigation docs

How to jump from one screen to another and clear all other screen from stack in ReactNative?

I found a way to achieve above navigation.

props.navigation.popToTop();

This will remove all screen from stack except main screen.
Hope this helps others!!

How to navigate from one screen to another scree in react native?

There is a typo in the line in App.js

this.props.navigator('SecondScreen')

It should be

this.props.navigation.navigate('SecondScreen')

Want to navigate between screens in one tab in react native

You need to nest navigators which is a basic feature of react-native-navigation.

This is described in the documentation here.

Navigating to a screen works as usual as it is described in the documentation here.

Here is a minimal working example for which I have made a working snack.

App.js

import React from 'react';

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

import Tabs from './Tabs'

export default function App() {

   return (
      <NavigationContainer>
         <Tabs />
      </NavigationContainer>
   )
}

Tabs.js with 2 Tabs

import React from 'react';

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import Home from './Home.js'
import Profile from './Profile.js'

const Tab = createBottomTabNavigator();

function Tabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}

export default Tabs;

Home.js a StackNavigator

import React from 'react';

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

import ScreenA from './ScreenA.js'
import ScreenB from './ScreenB.js'

const Stack = createNativeStackNavigator()

function Home() {
    return <Stack.Navigator>
       <Stack.Screen name="" component={ScreenA} options={{headerShown: false}} />
       <Stack.Screen name="ScreenB" component={ScreenB} />
    </Stack.Navigator>
}

export default Home;

ScreenA.js

import React from 'react'
import { View, Button } from 'react-native'

function ScreenA(props) {

  return <View>
      <Button title="NavigateToScreenBInTabHone" onPress={() => props.navigation.navigate('ScreenB')}>
      </Button>
  </View>
}

export default ScreenA;

ScreenB.js

import React from 'react'
import { View } from 'react-native'

function ScreenB() {

  return <View></View>
}

export default ScreenB;

Profile.js

import React from 'react'
import { View } from 'react-native'

function Profile() {

  return <View></View>
}

export default Profile;

change states as well as navigating to another screen

You can pass a parameter from Screen3 to the Home screen.

I have forked your demo and did some small refactoring (including changing from Class to Function components just for preference) so you may need to adapt it to your needs. You can find it here.

In Screen3 you can modify your onPress logic to the following:

navigation.navigate('Home', {
  screen: 'Home',
    params: {
      componentToShow: 'Screen2'
    }
});

Here's a breakdown of why you are seeing Home twice:

navigation.navigate('Home', {       // <-- Tab.Screen name. 
  screen: 'Home',                   // <-- Stack.Screen name.
    params: {
      componentToShow: 'Screen2'
    }
});

With this code you are now passing a route.param to the Home screen. I've included a useEffect to run any time route.params changes.

const [whichComponentToShow, setComponentToShow] = React.useState("Screen1");

React.useEffect(() => {
  if(route.params && route.params.componentToShow) {
    setComponentToShow(route.params.componentToShow);
  }
}, [route.params]);

Now, whenever a User navigates to the Home screen and a componentToShow route parameter is provided, the Home screen will update.

---

Related Topics