NavigationsActions.Navigate is not working

I need to navigate to a route when I execute navigation action. I read the documentation but I did not resolve my issue. I'm using Redux-saga and React-Navigation v5.

import {put, call, select} from 'redux-saga/effects';
import {apiGet, apiGetProdutoByID} from '../../services/overAll/apiProdutos';
import {TypesProdutos} from './../ducks/produtos';
import {NavigationActions} from 'react-navigation';

export function* searchByID(action) {
  try {
    const response = yield call(apiGetProdutoByID, action.idProduto);

    yield put({
      type: TypesProdutos.SEARCH_BY_ID,
      produto: response.data.data.obj,
    });

    const produto = yield select(state => state.produtos.dataByID);
    console.log(produto);

    **yield put(
      NavigationActions.navigate({
        routeName: action.route,
        params: {produto: produto},
      }),
    );**
  } catch (error) {
    console.log(error);
    yield put({type: TypesProdutos.FAIL});
  }
}

Upvotes: 0

Views: 318

Answers (1)

Reading carefully the documentation of react-navigation, I find about NavigationRef, that's provides a navigation any file of the app. So I create a file RootNavigation with the code:

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

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

and on the NavigationContainer component:

import {navigationRef} from './routes/RootNavigation';

...

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

and in the file of action with redux-saga:

export function* searchByID(action) {
  try {
    ...

    **RootNavigation.navigate(action.route, {produto: produto});**
  } catch (error) {
    console.log(error);
    yield put({type: TypesProdutos.FAIL});
  }
}

It's working!

Upvotes: 1

Related Questions