React Navigation(v2) com Redux (PT-BR)

Como já devem saber, a lib react-navigation mudou. Se você costuma usar a navegação com redux mantendo estado da mesma, esse artigo é pra você.

Nós vamos criar/separar isso em uma lista de arquivos, sim uma lista, pois a vida não é justa. Então vamos lá:

Crie a pasta src/navigation e o arquivo src/navigation/routes.js. É neste lugar que vamos setar nossas rotas.

Estou usando FluidNavigator, que me permite utilizar fades nas transições, mas você pode utilizar o recomendado:
import { createStackNavigator } from 'react-navigation' (caso utilize redux)

Crie src/navigation/reducer.js that que irá gerenciar o estado da navegação e instale: yarn add react-navigation-redux-helpers

Crie src/navigation/index.js

Estamos quase lá e agora nós precisamos configurar um reducer e um middleware no createStore/configureStore, ou sei lá como você chama isso.

Ok, agora é hora de utilizar isso no seu app

src/index.js

… E agora você consegue navegar entre as paginas de algumas formas, mas vou falar de apenas duas:

1. a mais comum, no press de um botão:

this.props.navigation.navigate('paginate)

2 . Eu uso o saga pra fazer o dispatch dos retornos async

import { NavigationActions } from 'react-navigation'

NavigationActions.navigate({ routeName: 'somepage' });

BOM, É ISSO AÍ GALERA! E tenho que dizer OBRIGADO ao Higo Ribeiro pela sua incrivel ajuda na comunidade rocketseat.com.br.