"react-native": "^0.57.0",
"react-navigation": "^3.0.0",
"react-navigation-redux-helpers": "^2.0.7",
"react-redux": "^5.0.6",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"reduxsauce": "0.7.0",
"react-native-gesture-handler": "^1.0.9",
Updating react-navigation to 3.0.0 in my React-Native app. I have followed the official docs here React Navigation and installed all the dependencies.
However cannot resolve this issue.
AppNavigation.js
const PrimaryNav = createStackNavigator({
HomeScreen: {
screen: MainTabNav,
}, {
mode: 'modal',
headerMode: 'none',
initialRouteName: 'HomeScreen',
navigationOptions: {
headerStyle: styles.header,
},
});
export default createAppContainer(PrimaryNav);
ReduxNavigation.js
import AppNavigation from './AppNavigation';
import { reduxifyNavigator, createReactNavigationReduxMiddleware } from
'react-navigation-redux-helpers';
createReactNavigationReduxMiddleware(
'root',
state => state.nav,
);
const ReduxAppNavigator = reduxifyNavigator(AppNavigation, 'root');
render() {
const { dispatch, nav } = this.props;
<ReduxAppNavigator state={nav} dispatch={dispatch} />
}
const mapStateToProps = state => ({ nav: state.nav });
export default connect(mapStateToProps)(ReduxNavigation);
navigation.js
import { Keyboard } from 'react-native';
import AppNavigation from '../navigation/AppNavigation';
export default (state, action) => {
Keyboard.dismiss();
const newState = AppNavigation.router.getStateForAction(action, state);
return newState || state;
};
CreateStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import reduxThunkMiddleware from 'redux-thunk';
import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-
helpers';
import screenTrackingMiddleware from './screenTrackingMiddleware';
export default (rootReducer) => {
const middleware = [];
const enhancers = [];
const navigationMiddleware = createReactNavigationReduxMiddleware(
'root',
state => state.nav,
);
middleware.push(screenTrackingMiddleware);
middleware.push(navigationMiddleware);
middleware.push(reduxThunkMiddleware);
enhancers.push(applyMiddleware(...middleware));
const store = createStore(rootReducer, compose(...enhancers));
return {
store,
};
};
RootContainer.js
import ReduxNavigation from 'navigation/ReduxNavigation';
export default class RootContainer extends Component {
render() {
return (
<View style={styles.applicationView}>
<StatusBar barStyle="light-content" />
<ReduxNavigation />
</View>
);
}
}
This happens because you didn't link react-native-gesture-handler
Just type react-native link in your project dir.
And run again react-native run-android
Solved the issue by adding this plugin to .babelrc file.
[
"#babel/plugin-transform-flow-strip-types",
]
Related
In React Navigation 6, my research shows that to navigate without a prop I should make a reference and use createNavigationContainerRef. I'm able to pass down the screen name to my dispatch but for some reason when I evaluate the condition with isReady I'm always told it isn't. The code:
App.js:
import React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import 'react-native-gesture-handler'
// Provider
import { Provider as AuthProvider } from './src/context/AuthContext'
// Navigation
import { navigationRef } from './src/navigation/NavRef'
// Screens
import ResolveAuthScreen from './src/screens/ResolveAuthScreen'
const App = () => {
return (
<AuthProvider>
<NavigationContainer ref={navigationRef}>
<ResolveAuthScreen />
</NavigationContainer>
</AuthProvider>
)
}
export default App
ResolveAuthScreen.js:
import React, { useEffect, useContext } from 'react'
// Context
import { Context as AuthContext } from '../context/AuthContext'
const ResolveAuthScreen = () => {
const { tryLocalSignIn } = useContext(AuthContext)
useEffect(() => {
tryLocalSignIn()
}, [])
return null
}
export default ResolveAuthScreen
AuthContext.js (stripped down):
import AsyncStorage from '#react-native-async-storage/async-storage'
// Context
import createContext from './createContext'
// Nav
import * as NavRef from '../navigation/NavRef'
const authReducer = (state, action) => {
switch (action.type) {
case 'signin':
return { errorMessage: '', token: action.payload }
case 'clear_error':
return { ...state, errorMessage: '' }
default:
return state
}
}
const tryLocalSignIn = dispatch => async () => {
const token = await AsyncStorage.getItem('token')
console.log({ token }) // renders token
if (token) {
dispatch({ type: 'signin', payload: token })
NavRef.navigate('TrackListScreen')
} else {
NavRef.navigate('SignUp')
}
}
export const { Provider, Context } = createContext(
authReducer,
{ tryLocalSignIn },
{ token: null, errorMessage: '' },
)
NavRef.js:
import { createNavigationContainerRef } from '#react-navigation/native'
export const navigationRef = createNavigationContainerRef()
export function navigate(name, params) {
console.log({ name, params })
if (navigationRef.isReady()) {
console.log('ready')
console.log({ name, params })
navigationRef.navigate('TrackDetailScreen', { name, params })
} else {
console.log('not ready')
}
}
When I log the token from dispatch I get back the token. When I log the screen I get back TrackListScreen from navigate but whenever it's fired it always returns the console log of not ready.
Docs:
Navigating without the navigation prop
Navigating to a screen in a nested navigator
"dependencies": {
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"axios": "^0.24.0",
"expo": "~43.0.0",
"expo-status-bar": "~1.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.2",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-web": "0.17.1"
},
Why is my navigate not working after my dispatch or why does the isReady false?
I'm having the same issue. When trying to access the exported navigationRef.isReady() from a redux-saga file, it always returns false. I'm not sure this is a safe approach, nor have I properly tested this, but the following workaround seems to work for me:
App.js
import {setNavigationRef, navigationIsReady} from './NavigationService';
const navigationRef = useNavigationContainerRef();
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
setNavigationRef(navigationRef);
}}>
...
</NavigationContainer>
);
NavigationService.js
export let navigationRefCopy = undefined;
export function setNavigationRef(navigationRef) {
navigationRefCopy = navigationRef;
}
export function navigationIsReady() {
return navigationRefCopy?.isReady(); // returns true when called in a redux saga file.
}
Supposedly, I've got a small problem, but can't tackle it.
I've got a small React-Native app, one screen only.
Redux is used as a store. It's being built via Expo. While using connect of react-redux, I've got the following error:
Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of Home.
The app works if the component rendered by Home component isn't wrapped by connect().
Attach some code below.
App.js
import React from "react";
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './src/pages/Home';
import { Provider } from 'react-redux';
import configureStore from './src/stores/store';
const { store } = configureStore();
function App() {
return (
<Provider store={store}>
<AppContainer />
</Provider>
)
}
const MainNavigator = createStackNavigator({
Home: { screen: Home }
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
);
const AppContainer = createAppContainer(MainNavigator);
export default App;
Home.js
import React from "react";
import { StyleSheet, View, Text, Dimensions } from "react-native";
import SwitchEventTypes from "../components/SwitchEventTypes";
class Home extends React.Component {
constructor() {
super();
}
render() {
return (
<View>
<SwitchEventTypes />
</View>
)
}
}
SwitchEventTypes.js
import React, { Component } from "react";
import { connect } from 'react-redux';
import { StyleSheet, View, Text, Dimensions, TouchableOpacity } from "react-native";
import { updateEventType } from '../actions/actions';
const mapDispatchToProps = (dispatch) => {
return {
updateEventType: (newEventType) => {
dispatch(updateEventType(newEventType));
}
};
};
const mapStateToProps = (state) => {
return {
eventType: state.filter.eventType,
};
};
class SwitchEventTypes extends React.Component {
constructor() {
super();
this.state = {
isSwitchEventTypeOn: true
}
this.handleEventTypeChange = this.handleEventTypeChange.bind(this);
}
handleEventTypeChange(newEventType) {
this.props.updateEventType(newEventType);
}
render() {
return (
<View style={styles.switchTypesContainer}>
{this.props.eventType === 'active' ? <Text>123</Text> :
<Text>456</Text>
}
</View>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SwitchEventTypes);
store.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
const middleware = [thunk];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const composedEnhancers = composeEnhancers(
applyMiddleware(...middleware),
)
export default () => {
const store = createStore(rootReducer, composedEnhancers);
return { store };
};
package.json
"dependencies": {
"expo": "^32.0.6",
"expo-react-native-shadow": "^1.0.3",
"expo-svg-uri": "^1.0.1",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.1.tar.gz",
"react-native-calendars": "^1.32.0",
"react-native-svg": "^9.4.0",
"react-navigation": "^3.9.1",
"react-redux": "^7.0.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"react-native-switch": "^1.5.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"redux-devtools-extension": "^2.13.8",
"schedule": "^0.4.0"
},
What may be the matter? Please, help. Thanks.
Your mapDispatchToProps is returning an object. You also don't need the extra returns as fat arrow functions already have an implicit return. Will make your code a little more readable.
const mapDispatchToProps = dispatch => ({
updateEventType: (newEventType) => dispatch(updateEventType(newEventType));
});
const mapStateToProps = state => {
eventType: state.filter.eventType, // might be worth your time to investigate selectors down the road
};
I am learning React-native and trying to implement redux.
I have used React-redux & React-thunk perform a Async task from the Action. During the implementation, getting an error e.i. "middleware in not a function" when I run. If I comment out middleware and relevant code then everything works fine.
Here is my code below.
index.js
import React, {Component} from 'react';
import ResetUserContainer from "./src/Components/resetUserContainer"
import {Provider} from 'react-redux'
import {createStore,applyMiddleware} from 'redux'
import {thunk} from 'redux-thunk'
import userResetReducer from "./src/Reducers/ResetReducer"
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(userResetReducer);
export default class App extends Component {
render() {
return (
<Provider store = {store}>
<ResetUserContainer/>
</Provider>
);
}
}
ResetUserContainer.js class.
import React, { Component } from "react";
import { StyleSheet, View, ActivityIndicator } from "react-native";
import { connect } from "react-redux"
import userAction from "./Actions/UserAction"
import PropTypes from "prop-types";
class ResetUserContainer extends Components {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.requestToken();
}
render() {
return (
<View style={styles.container}>
<View style={styles.subContainer}>
onPress={this._onPressButton}
containerStyle={{ marginTop: 20 }}
/>
</View>
</View>
<ActivityIndicator
size="large"
color="red"
style={this.props.isFetching ? styles.centering : styles.hideLoader} />
</View>
);
}
_onPressButton = () => {
// this.props.requestToken();
}
}
ResetUserContainer.propTypes = {
requestToken: PropTypes.func.isRequired,
objectMember: PropTypes.object.isRequired
}
const mapStateToProps = state => {
return {
//Here using objectMember, we can access any member of action class
objectMember: state,
//we can use also like this
isFetching: state.isFetching,
errorMsg: state.errorMsg,
displayMsg: state.displayMsg,
token: state.token
}
}
export default connect(mapStateToProps, { userAction })(ResetUserContainer);
types.js
export const TOKEN_REQUEST_PROCESSED = 'TOKEN_REQUEST_PROCESSED';
export const TOKEN_REQUEST_TOKEN_SUCCEEDED= 'TOKEN_REQUEST_TOKEN_SUCCEEDED';
export const TOKEN_REQUEST_FAILED = 'TOKEN_REQUEST_FAILED';
UserAction.js
import AuthInterface from '../../Interfaces/authInterface';
import UserResetModel from '../../Models/userResetModel';
import SpecialUserModel from '../../Models/specialUserModel';
import { TOKEN_REQUEST_PROCESSED, TOKEN_REQUEST_TOKEN_SUCCEEDED, TOKEN_REQUEST_FAILED } from './types';
export const tokenRequestProcess = () => ({ type: TOKEN_REQUEST_PROCESSED });
export const tokenRequestSuccess = (token) => ({ type: TOKEN_REQUEST_TOKEN_SUCCEEDED, payload: token });
export const tokenRequestFailed = (error) => ({ type: TOKEN_REQUEST_FAILED, payload: error });
export const requestToken = () => {
return async dispatch => {
dispatch(tokenRequestProcess);
let specialuser = new SpecialUserModel("", "");
specialuser.Username = "xyz.com";
specialuser.Password = "xyz.password";
AuthInterface.authenticateSpecialUser(specialuser).then((response) => {
let result = new httpResponseModel();
result = response;
if (result.ErrorCode == "OK") {
dispatch(tokenRequestSuccess(result.token_number))
} else {
//Handel all possible failure by error msg
dispatch(tokenRequestFailed(result.error_msg));
}
}, (err) => {
dispatch(tokenRequestFailed(JSON.stringify(err)));
});
}
};
ResetReducer.js
import {
TOKEN_REQUEST_PROCESSED, TOKEN_REQUEST_TOKEN_SUCCEEDED, TOKEN_REQUEST_FAILED
} from './types';
const initialState = {
isFetching: false,
errorMsg: '',
displayMsg: '',
token: ''
};
const resetReducer = (state = initialState, action) => {
switch (action.type) {
case TOKEN_REQUEST_PROCESSED:
return { ...state, isFetching: true };
case TOKEN_REQUEST_TOKEN_SUCCEEDED:
return { ...state, isFetching: false, displayMsg: action.payload }
case TOKEN_REQUEST_FAILED:
return { ...state, isFetching: false, errorMsg: action.payload }
default:
return state;
}
}
export default resetReducer;
package.json
"dependencies": {
"react": "16.5.0",
"react-native": "^0.57.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.48.0",
"react-test-renderer": "16.5.0"
},
Please let me know if I am doing something wrong or missing something.
I have googled but couldn't solve, like here in,
Redux thunk in react native
Thanks in advance.
import {thunk} from 'redux-thunk'
Please check this line. You should change that into below.
import thunk from 'redux-thunk'
I am trying to integrate redux with react-navigation using react-navigation-redux-helpers in react-native with expo. However, though I followed the documentations I get the following error.
This navigator has both navigation and container props, so it is unclear if it should own its own state. Remove props: "nav" if the navigator should get its state from the navigation prop. If the navigator should maintain its own state, do not pass a navigation prop.
Following is my code related to the redux and react-navigation implementation.
AppNavigator.js
import React from 'react';
import {createSwitchNavigator, createStackNavigator} from 'react-navigation';
import {connect} from 'react-redux';
import {reduxifyNavigator,createReactNavigationReduxMiddleware} from "react-navigation-redux-helpers";
import MainTabNavigator from './MainTabNavigator';
export const AuthStack = createStackNavigator(
{
Main: MainTabNavigator,
},
{
headerMode: 'none'
}
);
export const AppNavigator = createSwitchNavigator(
{
Auth: AuthStack,
},
{
headerMode: 'none',
initialRouteName: 'Auth',
}
);
export const NavMiddleware = createReactNavigationReduxMiddleware(
"root",
state => state.nav,
);
const addListener = reduxifyNavigator(AppNavigator, 'root');
const mapStateToProps = state => ({
nav: state.nav,
});
export const AppWithNavigationState = connect(mapStateToProps)(addListener);
App.js
import React from 'react';
import {Platform, StatusBar, StyleSheet, View} from 'react-native';
import {AppLoading, Asset, Font, Icon} from 'expo';
import {AppWithNavigationState} from './navigation/AppNavigator';
import {applyMiddleware, createStore} from "redux";
import AppReducer from './reducers/AppReducer'
import {Provider} from "react-redux";
import {NavMiddleware} from './navigation/AppNavigator'
const store = createStore(AppReducer,applyMiddleware(NavMiddleware));
export default class App extends React.Component {
state = {
isLoadingComplete: false,
};
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
return (
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
<Provider store={store}>
<AppWithNavigationState/>
</Provider>
</View>
);
}
}
_loadResourcesAsync = async () => {
return Promise.all([
Asset.loadAsync([
require('./assets/images/robot-dev.png'),
require('./assets/images/robot-prod.png'),
]),
Font.loadAsync({
// This is the font that we are using for our tab bar
...Icon.Ionicons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free
// to remove this if you are not using it in your app
'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
}),
]);
};
_handleLoadingError = error => {
// In this case, you might want to report the error to your error
// reporting service, for example Sentry
console.warn(error);
};
_handleFinishLoading = () => {
this.setState({ isLoadingComplete: true });
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
navReducer.js
import {AppNavigator} from '../navigation/AppNavigator';
const router = AppNavigator.router;
const mainNavAction = router.getActionForPathAndParams('Auth');
const initialNavState = router.getStateForAction(mainNavAction);
const NavigationReducer = (state = initialNavState, action) => {
console.log('routes', router);
return router.getStateForAction(action, state) || state;
};
export default NavigationReducer;
AppReducer.js
"use strict";
import {VendorReducer} from './vendorReducer';
import {combineReducers} from "redux";
import NavigationReducer from "./navReducer";
const AppReducer = combineReducers({
nav:NavigationReducer,
vendor: VendorReducer,
});
export default AppReducer;
Following is my package.json.
{
"name": "my-new-project",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/samples": "2.1.1",
"expo": "^30.0.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"react-navigation": "2.16.0",
"react-navigation-redux-helpers": "2.0.6",
"react-redux": "5.0.7",
"redux": "4.0.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0"
},
"devDependencies": {
"jest-expo": "30.0.0",
"redux-devtools": "3.4.1"
}
}
I hope someone could help me to get through this. Thanks in-advance.
This was also my mistake! solved it by:
const mapStateToProps = state => ({
state: state.nav,
});
pay attention to state: state.nav.
If you need, i can post my whole redux integration with the navigation that work for me.
I'am using react navigation with redux and after redux integration, i got some errors on drawer close.
import React from "react";
. . .
import { NavigationActions } from "react-navigation";
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { addListener } from "./components/common/utils";
import Dashboard from './components/pages/Dashboard';
. . .
const MainNavigator = StackNavigator({
Dashboard : {
screen : Dashboard,
},
. . .
})
export const AppNavigator = DrawerNavigator(
{
Main: { screen: MainNavigator }
}, {
contentComponent: Menu,
drawerWidth: 300,
headerMode: 'screen',
drawerPosition: 'left',
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
}
)
class AppWithNavigationState extends React.Component {
constructor (props) {
super(props)
this.onBackPress = this.onBackPress.bind(this)
}
componentDidMount () {
BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
}
componentWillUnmount () {
BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
}
onBackPress () {
...
}
render() {
const { dispatch, nav } = this.props;
return (
<AppNavigator
navigation={{
dispatch,
state: nav,
addListener,
}}
/>
);
}
}
const mapStateToProps = state => ({
nav: state.nav,
});
AppWithNavigationState.propTypes = {
dispatch: PropTypes.func.isRequired,
nav: PropTypes.object.isRequired,
};
export default connect(mapStateToProps)(AppWithNavigationState);
Here is my reducer:
import { fromJS } from 'immutable';
import { NavigationActions } from "react-navigation";
import { combineReducers } from "redux";
import { AppNavigator } from "../../App";
import {...} from './constants';
import { ToastAndroid } from 'react-native';
const mainAction = AppNavigator.router.getActionForPathAndParams('Main');
const initialNavState = AppNavigator.router.getStateForAction(mainAction);
function nav(state = initialNavState, action) {
let nextState;
switch (action.type) {
case 'Reports':
nextState = AppNavigator.router.getStateForAction(
NavigationActions.back(),
state
);
break;
default:
nextState = AppNavigator.router.getStateForAction(action, state);
break;
}
return nextState || state;
}
const initialState = fromJS({
isLoading: true,
...
});
function store(state = initialState, action) {
switch (action.type) {
case SET_IS_LOADING:
return state.set('isLoading', action.value);
...
default:
return state;
}
}
const AppReducer = combineReducers({
nav,
store,
});
export default AppReducer;
and file i call DraweOpen:
import React from "react";
import PropTypes from "prop-types";
import { TouchableOpacity } from "react-native";
import { createStructuredSelector } from 'reselect';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Icon from "react-native-vector-icons/dist/MaterialIcons";
import { DrawerBurger } from "../common/styles";
import { navigate } from "../store/actions";
const drawerButton = (props) => (
<DrawerBurger>
<TouchableOpacity
onPress={() => props.navigate("DrawerOpen")}
>
<Icon name="menu" size={30} color="white" />
</TouchableOpacity>
</DrawerBurger>
);
drawerButton.propTypes = {
navigate: PropTypes.func.isRequired,
};
const mapStateToProps = createStructuredSelector({});
const mapDispatchToProps = dispatch => (
(
bindActionCreators({
navigate,
}, dispatch)
)
);
export default connect(mapStateToProps, mapDispatchToProps)(drawerButton);
and i call drawerButton component on navigation options like:
...
class Dashboard extends Component {
static navigationOptions = () => ({
headerTitle: <Header dashboard />,
headerStyle: { backgroundColor: '#2c4e0f' },
headerLeft: <DrawerButton />,
});
...
I followed instructions on reactnavigation.org, also read some example code to build navigator.
Actually there was no error before redux integration and the navigator structure was same except BackHandling.
Here is my actions.js:
import { NavigationActions } from "react-navigation";
import {...} from './constants';
...
export const navigate = routeName => NavigationActions.navigate({ routeName });
My environment is:
react-navigation: 1.5.11
react-native: 0.53.0
react-navigation-redux-helpers: 1.0.5
react-redux: 5.0.7
redux: 3.7.2
node: 8.9.4
npm: 5.6.0
Thank for your help.
According to the redux integration docs, it seems you've missed one step.
You need to add addNavigationHelpers from React Navigation
Usage
import {addNavigationHelpers} from 'react-navigation';
<AppNavigator navigation={addNavigationHelpers({
dispatch,
state: nav,
addListener,
})} />