InitialRouteName doesn't load correctly

[beeirl]

Actual behaviour

I have got the following configuration:

screen: TabNavigator({
    tab1: {
         screen: Tab1
        },
        tab2: {
             screen: Tab2
        },
        tab3: {
             screen: Tab3
        }
},{
        initialRouteName: 'tab2',
        animationEnabled: true,
        swipeEnabled: true,
        tabBarComponent: CustomTabBar,
        tabBarPosition: 'bottom',
        tabBarOptions: {
         showIcon: true,
             showLabel: false,
             pressColor: 'transparent'
    }
})

What is actually happening: The first screen tab1 will be shown and is immediately flickering over to the initialRouteName tab2 instead of just loading the initial route. This is obviously related to https://github.com/react-navigation/react-navigation/issues/694. But the commit of @satya164 doesn't seem to fix the issue for me.

Expected behaviour

I am expecting the TabView to render the initial route smoothly without the pre-rendering of the fist route defined in the navigator.

[satya164]

Please create a demo code on snack - https://snack.expo.io/

[beeirl]

@satya164 Here you go https://snack.expo.io/ByHN16lSG It is the SimpleTabs example of react-navigation. Seems like it is an iOS-only issue. Android seems to be fine - but I need to test it in detail.

[DavideValdo]

initialRouteName is just ignored in my case, I solved this by switching tab order but it's not the result I want, this is part of my main render method

Consider the initialRouteName of the TabNavigator

let tabFeed = {}

if (AUTH.user.sellerLevel > 0)
    tabFeed = {
        MyShop: {
            screen: StackNavigator({
            SellerProfile: {
                screen: SellerProfile
            },
            Upgrade: {
                screen: MembershipUpgrade
            },
            FieldEditor: {
                screen: FieldEditor
            },
            AddressFieldEditor: {
                screen: AddressFieldEditor
            },
            ExpiredWishes: {
                screen: ExpiredWishes
            },
            ActiveWishes: {
                screen: ActiveWishes
            },
            WishEditor: {
                screen: WishEditor
            },
            ProductsDashboard: {
                screen: ProductsDashboard
            },
            ProductEditor: {
                screen: ProductEditor
            }
            }),

            navigationOptions: {
            tabBarIcon: ({focused}) => getTabBarIcon('shopSettings', focused)
            }
        }
    }

tabFeed = {
    ...tabFeed, 
    Home: {
        screen: StackNavigator({
            Tutorial: {
                screen: HomeTutorial
            },
            UpgradeNow: {
                screen: MembershipUpgrade
            },
            Home: {
                screen: Home
            },
            LocationEditor: {
                screen: LocationEditor
            },
            WonWishesSummary: {
                screen: WonWishesSummary
            },
            WishDetail: {
                screen: WishDetail
            },
            ProductDetail: {
                screen: ProductDetail
            },
            SellerDetail: {
                screen: SellerDetail
            }
        }, {
            navigationOptions: {
                headerTitle: <Image source={require('./assets/logo.png')} style={{height: 35, alignSelf: 'center'}} resizeMode='contain' />,
                headerStyle: {
                    backgroundColor: '#112233',
                    elevation: 0,
                },
                headerTintColor: 'white'
            },
            initialRouteName: AUTH.user.isFirstLogin && !AUTH.user.sellerLevel ? 'Tutorial' : 'Home' 
        }),
        navigationOptions: {
            tabBarIcon: ({focused}) => getTabBarIcon('home', focused)
        }
    }
}

const Main = new TabNavigator(tabFeed, {
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    initialRouteName: AUTH.user.sellerLevel ? 'MyShop' : 'Home',
    tabBarOptions: {
        showIcon: true,
        showLabel: false,
        style: {
        backgroundColor: '#eee'
        },
        indicatorStyle: {
        backgroundColor: PALETTE.secondary
        }
    }
})

return (<Main />)

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.