can't find variable navigation in other component in react-native

Question

This is my App.js

import React from "react";

import Menu from "./components/Menu";

import HomeScreen from "./views/HomeScreen";
import SecondScreen from "./views/SecondScreen";

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

export default function App() {
  return (
    <Container>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={HomeScreen}
            />
            <Stack.Screen name="Second" component={SecondSCreen} />
          </Stack.Navigator>
        </NavigationContainer>
      <Menu></Menu>
    </Container>
  );
}

It works, because it shows the HomeScreen on default, but I want to navigate to the second screen via the Menu-component:

import React from "react";
import { View, Text, TouchableOpacity } from "react-native";

class Menu extends React.Component {
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            alert("Hi");
          }}
        >
          <Text>HomeScreen</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => {
            navigation.navigate("Second");
          }}
        >
          <Text>Screen 2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default Menu;

The component is visible, but when I click on the second button I expect the SecondScreen to be openend. But I get this error:

Can't find variable: navigation

What am I missing?

You are trying to access navigation outside navigation check this answer stackoverflow.com/a/62700646/1435722 — Guruparan Giritharan
– Guruparan Giritharan, Commented Jul 5, 2020 at 13:59
@GuruparanGiritharan but how can I (re)use that to make my Menu.js work? — user1469734
– user1469734, Commented Jul 5, 2020 at 14:07

Guruparan Giritharan · Accepted Answer · 2020-07-05 14:13:08Z

3

You should use the navigationRef for this scenario, as your menu is outside the navigation container

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

  export default function App() {
  return (
    <Container>
        <NavigationContainer ref={navigationRef}>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={HomeScreen}
            />
            <Stack.Screen name="Second" component={SecondSCreen} />
          </Stack.Navigator>
        </NavigationContainer>
      <Menu></Menu>
    </Container>
  );
}

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

In menu js,

import {navigate} from 'RootNavigation';

class Menu extends React.Component {
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            alert("Hi");
          }}
        >
          <Text>HomeScreen</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => {
            navigate("Second");
          }}
        >
          <Text>Screen 2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

answered Jul 5, 2020 at 14:13

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1469734 Over a year ago

Thanks a lot! Can I extend this also to get route parameters? Now I do this: navigate("Sheep", { slug: card.slug });, but I cannot access the slug parameter

Guruparan Giritharan Over a year ago

it should be available in route.params.slug in 'Sheep' screen, like normal route prop

Collectives™ on Stack Overflow

can't find variable navigation in other component in react-native

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related