How to navigate with react navigation outside react component?

Question

I'm building a code to check if access_token or refresh_token are valid. I'm using axios interceptors to check the response to generate new token.

How to use navigate(React Navigation) inside axios interceptors?

Error:

09:53:55.852 client_log FarmsList:React.FC -> error [Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons

     axios.interceptors.response.use(
          (response) => {
            return response
          },
          async (error) => {
            const navigation = useNavigation()
            const originalRequest = error.config
            const accessToken = await getAccessToken()
            const refreshToken = await getRefreshToken()
        if (
          error.response.status === 400 &&
          originalRequest.url === connectTokenUrl &&
          accessToken
        ) {
          removeConnectToken()
          navigation.navigate('SignIn')
          return Promise.reject(error)
        }
    
        if (error.response.status === 401 && !originalRequest._retry) {
          originalRequest._retry = true
          console.log('entrou 401')
          if (!refreshToken) {
            navigation.navigate('SignIn')
            return Promise.reject(error)
          }
    
          const data = {
            grant_type: 'refresh_token',
            client_id: 'xxx',
            refresh_token: refreshToken,
          }
          const formData = new FormData()
          _.forEach(data, (value, key) => {
            formData.append(key, value)
          })
    
          return axios({
            method: 'post',
            url: connectTokenUrl,
            data: formData,
            headers: {'Content-Type': 'multipart/form-data'},
          }).then((response) => {
            const {access_token, refresh_token} = response.data
            connectToken(access_token, refresh_token)
            axios.defaults.headers.common.Authorization = `Bearer ${accessToken}`
            return axios(originalRequest)
          })
        }
        return Promise.reject(error)
      },
    )

techynovice.com/… this might help you.

Naresh
– Naresh

2020-07-02 13:07:50 +00:00
Commented Jul 2, 2020 at 13:07 — Naresh
– Naresh, Commented Jul 2, 2020 at 13:07

Rohit Parte · Accepted Answer · 2024-03-12 16:20:40Z

There are several ways to access the navigation props outside the navigation.

The useNavigation hook : this is used for scenarios where you access the navigation prop from functional components which are under the navigation container. Eg : A navigation button which is inside a screen.
The navigationRef : this is used for scenarios where you access the navigation outside the navigation, used for scenarios like redux middleware.

You should use the navgation ref for this scenario and perform your navigation actions. You can use the RootNavigation.js and call the navigation actions.

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

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

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

Usage

import * as RootNavigation from '../../RootNavigation';

RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });

Vijay Joshua Nadar · Accepted Answer · 2022-07-07 12:13:12Z

First you have to create a createNavigationContainerRef and a navigate function like this:

// RootNavigation.js

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

export const navigationRef = createNavigationContainerRef()

export function navigate(name, params) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

Then add the newly created navigationRef to the NavigationContainer wrapper:

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

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

You can now import the navigate function to any .js file and use it. Hope this was useful. For further reference, refer this article.

Rodolfo Campos · Accepted Answer · 2020-07-02 14:52:14Z

0

where is your navigation param? if you can show me more of your code (your full component) will be helpful, its possible that you are calling some hook outside of your functional component

answered Jul 2, 2020 at 14:52

Rodolfo Campos

3192 silver badges8 bronze badges

3 Comments

cura Over a year ago

I don't have any param

Rodolfo Campos Over a year ago

so how are you calling 'navigation.navigate('SignIn')' without having params? you need to pass the navigation param to your component or you can import {withNavigation} from 'react-navigation'; to use it

Rodolfo Campos Over a year ago

I notice you are using useNavigationHook, but you are using it in your Axios interceptor, you need to declare it at the top of your functional component to work.

Collectives™ on Stack Overflow

How to navigate with react navigation outside react component?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related