After RN 16 Update my Tab Navigator won´t work :(

[BigPun86]

Help! Like the title says, after i have update my react native to 0.16 the TabNavigator won't work. No idea how to explain my issue. THis is the error Message:

The TabNavigator is in the renderScene of my Navigator Component....

render: function () {
    var self = this;
    console.log('TabsAndroid render');
    return (
        <View style={{flex:1}}>
            <ToolbarAndroid
                title="ToolBar"
                subtitle={toolbarTitle (self.state.selectedTab)}
                titleColor='white'
                subtitleColor='white'
                style={mainStyle.toolbar}
                actions={toolbarActions(self.state.selectedTab)}
                onActionSelected={this._onActionSelected}>
            </ToolbarAndroid>
            <Navigator
                renderScene={this.renderScene}
                navigator={self.props.navigator}
            />
        </View>
    )

},

    return (
        <TabNavigator
            tabBarStyle={{ padding: 10, backgroundColor: VALUES.COLOR.COLOR_BLUE, height: tabBarHeight, top:0 }}
            sceneStyle={{ backgroundColor: 'transparent', paddingBottom: tabBarHeight }}>
            <TabNavigator.Item
                selected={self.state.selectedTab === 'network'}
                title={STRINGS.networkNavigationTitle}
                renderIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_network_icon_dark.png')} />}
                renderSelectedIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_network_icon_light.png')} />}
                onPress={() => this.setState({ selectedTab: 'network' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <NetworkRoute/>
                </View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={self.state.selectedTab === 'news'}
                title={STRINGS.newsNavigationTitle}
                renderIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_news_icon_dark.png')} />}
                renderSelectedIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_news_icon_light.png') } />}
                onPress={() => self.setState({ selectedTab: 'news' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <NewsRoute/>
                </View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={self.state.selectedTab === 'tabThree'}
                title={STRINGS.tabThreeNavigationTitle}
                renderIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_pickup_icon_dark.png')} />}
                renderSelectedIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_pickup_icon_light.png')} />}
                onPress={() => this.setState({ selectedTab: 'tabThree' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <tabThreeRoute/>
                </View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={self.state.selectedTab === 'more'}
                title={STRINGS.moreNavigationTitle}
                renderIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_further_icon_dark.png')} />}
                renderSelectedIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_further_icon_light.png') } />}
                onPress={() => this.setState({ selectedTab: 'more' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <MoreRoute/>
                </View>
            </TabNavigator.Item>
        </TabNavigator>
    )
},

[fbsb]

+1 Got this too! Anyone an Idea how to fix this?

[ide]

Can you try replacing your tab screens with empty <View> components? I do not think the problem is with TabNavigator (but if it is, please let us know!)

[timzaak]

If you use require to import the component?

[BigPun86]

@ide I tried using the TabNavigator with empty View Blocks, but it didn´t work. As soon as i use this Component it will break...

[BigPun86]

@timzaak you mean var TabNavigator = require('react-native-tab-navigator); ??? We´ll yes of course i did this...Still won´t work

[timzaak]

@BigPun86 you should use import,not require

[BigPun86]

@timzaak +1 worked perfectly, thanks!

[pickhardt]

I just upgraded an older project with TabNavigator to 0.20, and switched from require to import, but get the exception: "TabNavigator" is read-only

This happens even when I remove all usage of TabNavigator, and am just simply importing it.

Did you guys see this too? I see this project is using immutable but I'm not editing TabNavigator, I'm literally just using import TabNavigator from 'react-native-tab-navigator';

[ptomasroos]

Will close since this issue is more than a year, feel free to a open a new if this is still a issue.