TypeError: TypeError: undefined is not an object (evaluating 'props.navigationState.index')

Question

i have this error shown but i don't know why :

[15:52:26] TypeError: TypeError: undefined is not an object (evaluating 'props.navigationState.index')

This error is located at: in tabBarComponent (at createBottomTabNavigator.js:72) in RCTView (at View.js:45) in View (at createBottomTabNavigator.js:102) in TabNavigationView (at createTabNavigator.js:197) in NavigationView (created by Navigator) in Navigator (created by SceneView) in SceneView (at DrawerView.js:149) in RCTView (at View.js:45) in View (at ResourceSavingScene.js:20) in RCTView (at View.js:45) in View (at ResourceSavingScene.js:16) in ResourceSavingScene (at DrawerView.js:148) in RCTView (at View.js:45) in View (at screens.native.js:83) in ScreenContainer (at DrawerView.js:138) in RCTView (at View.js:45) in View (at createAnimatedComponent.js:153) in AnimatedComponent (at DrawerLayout.js:323) in RCTView (at View.js:45) in View (at createAnimatedComponent.js:153) in AnimatedComponent (at DrawerLayout.js:322) in Handler (at DrawerLayout.js:358) in DrawerLayout (at DrawerView.js:161) in DrawerView (created by Navigator) in Navigator (at createAppContainer.js:388) in NavigationContainer (at routes.js:42) in _class (at App.js:53) in Provider (at App.js:52) in App (at registerRootComponent.js:17) in RootErrorBoundary (at registerRootComponent.js:16) in ExpoRootComponent (at renderApplication.js:34) in RCTView (at View.js:45) in View (at AppContainer.js:98) in RCTView (at View.js:45) in View (at AppContainer.js:115) in AppContainer (at renderApplication.js:33)

This error is located at: in NavigationContainer (at routes.js:42) in _class (at App.js:53) in Provider (at App.js:52) in App (at registerRootComponent.js:17) in RootErrorBoundary (at registerRootComponent.js:16) in ExpoRootComponent (at renderApplication.js:34) in RCTView (at View.js:45) in View (at AppContainer.js:98) in RCTView (at View.js:45) in View (at AppContainer.js:115) in AppContainer (at renderApplication.js:33) * src/modules/BoardScreen/index.js:21:58 in tabBarComponent - node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:12020:22 in mountIndeterminateComponent - node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:16075:21 in performUnitOfWork - ... 14 more stack frames from framework internals

it's in this line of code in :

                            active={props.navigationState.index === 0}

my index.js is like this :

export default (MainScreenNavigator = createBottomTabNavigator(
    {
        Tasks: { screen: Tasks },
        Members: { screen: Members },
        Chat: { screen: Chat }
    },
    {
        tabBarPosition: "bottom",
        tabBarComponent: props => {
            return (
                <Footer>
                    <FooterTab>
                        <Button
                            vertical
                            active={props.navigationState.index === 0}
                            onPress={() => props.navigation.navigate("Tasks")}>
                            <Icon name="bookmarks" />
                            <Text>Tasks</Text>
                        </Button>
                        <Button
                            vertical
                            active={props.navigationState.index === 1}
                            onPress={() => props.navigation.navigate("Members")}>
                            <Icon name="people" />
                            <Text>Members</Text>
                        </Button>
                        <Button
                            vertical
                            active={props.navigationState.index === 2}
                            onPress={() => props.navigation.navigate("Chat")}>
                            <Icon name="git-branch" />
                            <Text>Chat</Text>
                        </Button>
                    </FooterTab>
                </Footer>
            );
        }
    }
));

can anyone please help me.

mahmoudafer mahmoudafer · Accepted Answer · 2018-12-30T18:12:30

According to react navigation's custom navigators docs it should be props.navigation.state.index

TypeError: TypeError: undefined is not an object (evaluating 'props.navigationState.index')

1 Answers