How to use navigation.navigate from a component outside the stack.navigation

Question

I have an application using React native where I am using react-navigation (5.2.9).

I built a Stack.Navigator where I've got my screens but I want the Footer component to be outside so it renders in all screens. The problem is, I can't navigate from the footer, which is what I need to do as the footer has a few buttons that should be changing the screen:

const Stack = createStackNavigator();

const App = () => {    
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Header />
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
            headerShown: false
          }}
          />
          <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{
            headerShown: false
          }}
          />
        </Stack.Navigator>
        <Footer />
      </NavigationContainer>
    </Provider>
  );
};

How do I pass the navigation prop to the footer component?

Soufiane Odf · Accepted Answer · 2020-04-22T00:04:46.123

63

Try this:

Create a new file named: RootNavigation.js

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

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

// file where you have the navigation

import {navigationRef} from './path/to/RootNavigation';

      <NavigationContainer ref={navigationRef}>
      .....
        <Footer />
      </NavigationContainer>

And Footer.js should be something like this:

// Footer.js

import React from 'react';
import {View, Button} from 'react-native';
import * as RootNavigation from './path/to/RootNavigation';

const Footer= () => {
  return (
    <View>
      <Button
        title={'Go to'}
        onPress={() =>
          RootNavigation.navigate('screenName ', {userName: 'Lucy'})
        }
      />
    </View>
  );
};

export default Footer;

For more info you can read the documentation. https://reactnavigation.org/docs/navigating-without-navigation-prop/

edited Apr 22 '20 at 00:04

answered Apr 21 '20 at 23:58

Soufiane Odf

1,054
2
9
23

11

Is this not literally what I answered, a day before? – Ben Butterworth Apr 22 '20 at 09:16
Thank youu, exactly what i was looking for :D – Ali Zgheib Nov 12 '20 at 12:04
Will this work if the file which I'm using the navigation in is not a component/screen ? As in, if it is not wrapped by `NavigationContainer` ? What I'm trying to achieve is to navigate to a particular screen when a notification is received. (I'm using `react-native-push-notification` for this.) But the configuration for push notifications is not to be added in any component; it should be in a separate file. – sj_959 Apr 30 '21 at 05:10
ref.current is always null. I log it in setInterval and it does not get initialized. Why? – Ali Mert Çakar Jun 28 '21 at 11:33
Well, i typed navigationRef={navigationRef} instead of ref={navigationRef}. Two hours gone on that. oh god :/ – Ali Mert Çakar Jun 28 '21 at 11:40
Finally I got a working solution. Thank you. – NightOwl Sep 08 '21 at 15:33
@how can i use CommonActions.reset() this way? – Jeesmon Joy Apr 12 '22 at 05:37
this solution doesn't work for unmounted screens – Mel May 27 '22 at 17:38

Ben Butterworth · Answer 2 · 2020-04-20T13:48:18.333

The components outside of the Stack.Screen components do not receive the navigation prop. So in this case, you have to get the NavigationContainer using refs in your footer component, as follows:

Create a ref with const myRef = React.createRef()
pass it to the <NavigationContainer ref={myRef}>, and
use that ref to navigate, myRef.current?.navigate(name, params).

It is all explained here. The docs here separate the creation of the ref in a new file, to allow you to import the ref without dependency loops/ issues. As the docs state, you can now call RootNavigation.navigate('ChatScreen', { userName: 'Lucy' }); in any js module, not just in a react component.

In your case though, you don't need the ref in separate file.

const Stack = createStackNavigator();
const navigationRef = React.createRef();

const App = () => {    
  return (
    <Provider store={store}>
      <NavigationContainer ref={navigationRef}>
        <Header />
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
            headerShown: false
          }}
          />
          <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{
            headerShown: false
          }}
          />
        </Stack.Navigator>
        <Footer navigationRef={navigationRef}/>
      </NavigationContainer>
    </Provider>
  );
};

And in <Footer/> use navigationRef.current?.navigate(name, params)

I find this is much easier to follow that the approved answer — Marnie Rodriguez, Sep 09 '20 at 20:00

score 9 · Answer 3 · answered Apr 12 '20 at 10:47

9

From the documentation. https://reactnavigation.org/docs/connecting-navigation-prop/

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function GoToButton({ screenName }) {
  const navigation = useNavigation();

  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

answered Apr 12 '20 at 10:47

Dipansh Khandelwal

601
4
8

5

Obviously I have tried what documentation says but this will only show the following error: Couldn't find a navigation.object, Is your component inside a screen in a navigator? – Carlos Saiz Orteu Apr 12 '20 at 10:53
1

Using the same method, still getting the same error. – Gourav Sanyal Jan 13 '22 at 06:22

score 3 · Answer 4 · answered Apr 26 '21 at 09:47

A simple trick to extract navigation out of screenOptions.

function NavWrapper() {
  const navigatorRef = useRef<any>();
  <Tab.Navigator
    screenOptions={({ navigation: nav }) => navigatorRef.current = nav}
  >
    <Tab.Screen name="screen1" />
  </Tab.Navigator>
}

score 2 · Answer 5 · answered Apr 12 '20 at 12:13

I ended up building a component called screen that will just wrap the content of screen and render the header/footer based on props:

import React from 'react';
import { View } from 'native-base';
import style from './style';
import Footer from '../../footer';
import Header from '../../header';

const Screen = ({
    footer,
    header,
    children,
    navigation
}) => (
  <View style={style.screen}>
    { header && <Header navigation={navigation} />}
    { children }
    { footer && <Footer navigation={navigation} />}
  </View>
);

export default Screen;

And wrapping the screens of my apps like this:

<Screen header footer navigation={navigation}>
    ... screen content
</Screen>

I feel like it is the best way if I can't sort that problem out.

score 0 · Answer 6 · answered Sep 27 '21 at 12:59

I solve this problem with a global state using React context API:

  // When enter in the HomeScreen:
  const { setGlobalNavigation, globalNavigation } = useGlobalContext();
  const navigation = useNavigation<RemindersNavigationProp>();

  useEffect(() => {
    if (setGlobalNavigation && !globalNavigation) setGlobalNavigation(navigation);
  }, [setGlobalNavigation, globalNavigation, navigation]);

  // When want to use:
  const { globalNavigation } = useGlobalContext();
  const handleNavigate = () => 
  globalNavigation.navigate("contactsStack", { screen: "newContact" });

How to use navigation.navigate from a component outside the stack.navigation

6 Answers6

Linked