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

I am trying to navigate from Screen1 to Screen2. Screen1 is being rendered in my Home screen. So far I have tried using this.props.navigation.navigate as well as what you see currently implemented.

I have created a snack expo here that recreates the exact error as well as posted some code below.

Thank you for any insight at all, I appreciate it more than you know.

EDIT:: this needs to be ran on IOS and I am using react-native-navigation

App.js

 /*passing props to home is from my overall project, I left it in incase it impacted the answer*/ 
<Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="HomeScreen" options={{ headerShown: false }}>
        {(props) => (
          <Home {...props}/>
        )}
      </Stack.Screen>
       <Stack.Screen
        name="Screen1"
        component={Screen1}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={{ headerShown: false }}
      />
  </Stack.Navigator>
);
}


export default function App() {

  return (
<NavigationContainer>
  <MyTabs/>
</NavigationContainer>
);

Screen1

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

  render() {
  return (
      <View style={{top: scale(50)}}>

          <ScrollView style={{ height: windowHeight }}>
            <this.renderList />
          </ScrollView>

      </View>
    );
  }
}

CodePudding user response：

In Screen 1

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

in Home

const Home = (props) => {


return (
<View>
    <Screen1 {...props}/>
</View>

);

}

And in App

<Tab.Navigator initialRouteName="Home">
  <Tab.Screen name="Home" options={{ headerShown: false }} component={Home}/>

   <Tab.Screen
    name="Screen1"
    component={Screen1}
    options={{ headerShown: false }}
  />

  <Tab.Screen
    name="Screen2"
    component={Screen2}
    options={{ headerShown: false }}
  />

</Tab.Navigator>

And for me working perfectly (I take some capture but I'm not authorized yet, new user...)

Say me

CodePudding user response：

make use of hook useNavigation.

Screen1.js

Step 1: import it

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

Step 2: on button press, use it like this

onPress={() => {
              navigation.navigate('Screen2');
            }}

snack expo working code

CodePudding user response：

You are not passing navigation props to Screen1. You can just pass navigation props to Screen1 like below code or it is better to make Screen1 as Initial Route instead of calling it as a component in Home screen.

Good method : Update following area in App.js like below

.... 
<Stack.Navigator initialRouteName="Screen1"> // made Screen1 as initial route
      <Stack.Screen
        name="Screen1"
        component={Screen1}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={{ headerShown: false }}
      />
  </Stack.Navigator> 
....

Method 2 : If you want Home Screen as Initial Route, then update following area in Home.js like below

....
const Home = (props) => {
    return (
      <View>
        <Screen1 navigation={props.navigation}/> // navigation props passed to Screen1 component
      </View>
    );
}
....