CODEWITHSUNDEEP
react-nativereact-navigation
HaiN
HaiN

Reputation: 915

How can I access a current navigation inside a React.Component using reactnavigation 5?

I'm now using react-navigation version 5 following an expo tutorial to navigate to another screen inside a Stack (embedded in a Tab Navigator).

In the tutorial, they always used a function to init a specific screen so the navigation parameter will easy to be called inside the function's body. Eg:

function HomeScreen({ navigation })

//Called

        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />

But, if I construct a React.Component instead, how can I access the navigation inside that Component to navigate to another component? plz

Please run the codes bellow on expo if my explanations are bad. Thanks,

import * as React from 'react';
import { Button, Text, View, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


class Options extends React.Component {

  navigaeToAnotherScreen() {
    console.log('How can I access current navigation plz?');
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world! Option</Text>
        <Button title="Go To Main" onPress={() => this.navigaeToAnotherScreen() }/>
      </View>
    );
  }
}

function OptionsScreen({ navigation }) {
  return (
    <Options/>
  );
}

function DetailsScreen({ navigation }) {

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details!</Text>
      <Button title="Detail" onPress={ () => navigation.push('Options')}/>
    </View>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.push('Details')}
      />
    </View>
  );
}

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
      <HomeStack.Screen name="Options" component={OptionsScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createStackNavigator();

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Upvotes: 0

Views: 306

Answers (1)

Maulik Dhameliya
Maulik Dhameliya

Reputation: 1558

try this I noticed you didn't pass existing props to Options

function OptionsScreen({ navigation }) {
  return (
    <Options navigation={navigation} />
  );

then try this

 navigaeToAnotherScreen() {
    this.props.navigation.navigate("AnyScreen");
  }

Upvotes: 1

Related Questions