undefined is not an object (evaluating 'children[activeTab')

[darchitetto]

I am following the example you have under Usage for react-navigation, and have run into the error: undefined is not an object (evaluating 'children[activeTab') which is thrown on the componentWillMount in bottomNavigation.js

I have tried to add the activeTab property to the bottomNavigationOptions, but that did not solve the problem. Any ideas?

[timomeh]

You don't need activeTab inside bottomNavigationOptions; react-navigation handles that part.

Could you please show some code?

[darchitetto]

Sure, it is exactly like your example.

`import React from 'react' import { NavigationComponent } from 'react-native-material-bottom-navigation' import { TabNavigator } from 'react-navigation' import { AppRegistry, View, Text } from 'react-native'; import Icon from 'react-native-vector-icons'

class MoviesAndTV extends React.Component { static navigationOptions = { tabBarLabel: 'Movies & TV', tabBarIcon: () => () }

render() {
    return (
        <View>
            <Text>Hello, welcome to MoviesAndTV!</Text>
        </View>
    )
}

}

class Music extends React.Component { static navigationOptions = { tabBarLabel: 'Music', tabBarIcon: () => () }

render() {
    return (
        <View>
            <Text>Hello, welcome to music!</Text>
        </View>
    )
}

}

class Newsstand extends React.Component { static navigationOptions = { tabBarLabel: 'Newsstand', tabBarIcon: () => () }

render() {
    return (
        <View>
            <Text>Hello, welcome to Newsstand!</Text>
        </View>
    )

}

}

const MyApp = TabNavigator({ MoviesAndTV: { screen: MoviesAndTV }, Music: { screen: Music }, Newsstand: { screen: Newsstand } }, { tabBarComponent: NavigationComponent, tabBarPosition: 'bottom', tabBarOptions: { bottomNavigationOptions: { labelColor: 'white', rippleColor: 'white', activeTab: 0, tabs: { MoviesAndTV: { barBackgroundColor: '#37474F', activeTab: 0 }, Music: { barBackgroundColor: '#00796B', activeTab: 1 }, Newsstand: { activeTab: 2, barBackgroundColor: '#EEEEEE', labelColor: '#434343', // like in the standalone version, this will override the already specified labelColor for this tab activeLabelColor: '#212121', activeIcon: } } } } })

AppRegistry.registerComponent('weBuildClient', () => MyApp);`

[timomeh]

I don't know what will happen if you just return nothing in you tabBarIcon, maybe that's the error. Also you don't need activeTab anywhere.

If not, please format your code. Use ``` with the correct indention. So it's easier to find the problem here.

[darchitetto]

Here is my code, better formatted, and with the activeTab removed. It is almost identical to your sample code:

Here is my error: https://www.screencast.com/t/0pNsx6UACn9

Any help would be appreciated...

import  NavigationComponent  from 'react-native-material-bottom-navigation'
import { TabNavigator } from 'react-navigation'
import Icon from 'react-native-vector-icons';
import {
    AppRegistry,
    Text,
    Button,
    View
} from 'react-native';

class MoviesAndTV extends React.Component {
    static navigationOptions = {
        tabBarLabel: 'Movies & TV',
        tabBarIcon: () => (<Icon size={24} color="white" name="tv" />)
    }

    render() {
        return (
            <View>
                <Text>Hello, welcome to MoviesAndTV!</Text>
            </View>
        )
    }
}

class Music extends React.Component {
    static navigationOptions = {
        tabBarLabel: 'Music',
        tabBarIcon: () => (<Icon size={24} color="white" name="music-note"/>)
    }

    render() {
        return (
            <View>
                <Text>Hello, welcome to music!</Text>
            </View>
        )
    }
}

class Newsstand extends React.Component {
    static navigationOptions = {
        tabBarLabel: 'Newsstand',
        tabBarIcon: () => (<Icon size={24} color="white" name="Newsstand" />)
    }

    render() {
        return (
            <View>
                <Text>Hello, welcome to Newsstand!</Text>
            </View>
        )

    }
}

const MyApp = TabNavigator({
    MoviesAndTV: { screen: MoviesAndTV },
    Music: { screen: Music },
    Newsstand: { screen: Newsstand }
}, {
    tabBarComponent: NavigationComponent,
    tabBarPosition: 'bottom',
    tabBarOptions: {
        bottomNavigationOptions: {
            labelColor: 'white',
            rippleColor: 'white',
            tabs: {
                MoviesAndTV: {
                    barBackgroundColor: '#37474F',
                },
                Music: {
                    barBackgroundColor: '#00796B',
                },
                Newsstand: {
                    barBackgroundColor: '#EEEEEE',
                    labelColor: '#434343', // like in the standalone version, this will override the already specified `labelColor` for this tab
                    activeLabelColor: '#212121',
                    activeIcon: <Icon size={24} color="#212121" name="newsstand" />
                }
            }
        }
    }
})

AppRegistry.registerComponent('weBuildClient', () => MyApp);```

[timomeh]

Help is here. 😊

Your import statement is:

import  NavigationComponent  from 'react-native-material-bottom-navigation'

But you have to use the following import statement:

import { NavigationComponent } from 'react-native-material-bottom-navigation'

If I try it without the curly braces, I get the same error. Add them and it should work fine. 🎉

// EDIT:
I fixed a typo in the module name of the import statement.

[darchitetto]

Darn i feel like i am close. But here is the error i get when i use the import statement you have above.

https://www.screencast.com/t/jCDrF0du

[timomeh]

Sorry, I made a typo in the import statement and fixed it quick, hoped you wouldn't be so quick. :D

Use import { NavigationComponent } from 'react-native-material-bottom-navigation',
not import { NavigationComponent } from './react-native-material-bottom-navigation'.

Without the ./. The ./ is from my local development environment.

[darchitetto]

Yes, that is what I am using... Same Error ...

https://www.screencast.com/t/jCDrF0du

import React from 'react'
import { NavigationComponent } from 'react-native-material-bottom-navigation'
import { TabNavigator } from 'react-navigation'
import Icon from 'react-native-vector-icons';
import {
    AppRegistry,
    Text,
    Button,
    View
} from 'react-native';

[timomeh]

The only difference I currently see is your usage of react-native-vector-icons. Normally you use something like import Icon from 'react-native-vector-icons/MaterialIcons'.

If I use it without /MaterialIcons (or /FontAwesome or whatever you'd like to use), I get the same error as you.

For usage of the Icon component, see the documentation here.

[darchitetto]

You are brilliant!!!

Thank you so much for helping me get started. I cannot wait to use your super awesome component!!! 🥇