undefined is not an object (evaluating 'state.routes[state.index]')

[veedeo]

Im trying to implement Redux with reactnavigation
this is a sample code:

const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Main'));
  const navReducer = (state = initialState, action) => {
    console.tron.log({state,action,nextState})
    const nextState = AppNavigator.router.getStateForAction(action, state);

    // Simply return the original `state` if `nextState` is null or undefined.
    return nextState || state;
  };

Current Behavior

undefined is not an object (evaluating 'state.routes[state.index]')
getStateForAction
index.android.bundle?platform=android&dev=true&hot=true&minify=false:78599:44

{
  state:{
    index: 0,
    routes: [ { type: undefined, routeName: 'Main', key: 'Init' } ]
  },
  action: { type: '@@redux/INIT' },
  nextState: undefined
}

software	version
react-navigation	1.0.0-beta.9
react-native	0.43.4

[threecee]

@veedeo I'm having the same problem. Since you closed, maybe you figured it out?

[q273255702]

+1

[crjackso]

+1 @veedeo, can you provide any insight?

[mattotoole0]

I'm having this problem as well.

[cityvoice]

If you use nested navigators integerated with redux, try change the code

const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Main'));

to

const initialNavState=AppNavigator.router.getStateForAction(NavigationActions.reset({
	index: 0,
	actions: [
	  NavigationActions.navigate({
		routeName: 'Main',
	  }),
	],
}))

It works for me, but I don't know why, below is my nested navigators
AppNavigation.js

import MainScreenNavigator from './MainTab';
import ArticleDetailScreen from '../containers/ArticleDetailScreen';
export const AppNavigator = StackNavigator({
  Main: { screen: MainScreenNavigator},
  ArticleDetail: 
	{
		screen: ArticleDetailScreen,
		navigationOptions: ({navigation}) => ({
			title: `${navigation.state.params.title} detail`,
		})
	},
},{initialRouteName:'Main'});

MainTab.js

const MainTab = TabNavigator({
  Home: {
    screen: MainScreen,
  },
  Discovery: {
    screen: DiscoveryScreen,
  },
  ...
}, 	  
  {
	tabBarPosition :'bottom',
	initialRouteName:'Home',
       ...
  })

hope to help you!

[sunnylqm]

@cityvoice It works.
This issue only happens if initialNavState is for a TabNavigator. @grabbou @satya164

[xsgkaka]

@cityvoice
it works.but why

[Selman555]

@cityvoice
Yes it works!!!
You don't know why? That's fine, I wished I would have been smart enough to come up with your idea because I was clueless

[homewb]

@cityvoice
Amazing!!
I guess it is because StackNavigator may need to know the initial index for TabNavigator. Just guess. It doesn't matter anyways.

[deot]

@cityvoice
Amazing!!

Thanks!!

[rochapablo]

@cityvoice, for a second I can see the screen but right after I get

There is no route defined for key LoginNav. Must be one of: 'Login'

export const AppNavigator = StackNavigator(
  {
    LoginNav: { screen: LoginNav },
    RegisterNav: { screen: RegisterNav },
    Index: { screen: Drawer }
  },
  {
    headerMode: 'none',
    mode: Platform.OS === 'ios' ? 'modal' : 'card',
    initialRouteName: 'LoginNav'
  }
)

const LoginNav = StackNavigator(
  {
    Login: { screen: Login }
  }, {
    headerMode: 'none',
    mode: Platform.OS === 'ios' ? 'modal' : 'card',
    initialRouteName: 'Login'
  }
)

I tried #2565 (comment) but still the same problem.