Rendering tabs based on authentication and user roles

[dsah]

Version

Tell us which versions you are using:
react-native 0.50.3

• react-native-router-flux v4.0.0-beta.22

Expected behaviour

Should render tabs depending on condition

Actual behaviour

There is no route defined for key0. Must be one of: "key2"

I have to implement tabs based on user roles after login. In some case, there may be 2 tabs and in other case, there may be 3 or more tabs. It wil be determined only after logged in.

Code:
renderTabs() {
const autho = []; //['admin', 'non-admin'];//this is dynamic array
return (
<Tabs lazy hideNavBar swipeEnabled={false} tabBarStyle={styles.tabBarStyle} showLabel={false} tabBarPosition={"bottom"}>
{auth0.map((accessRight, index) => {
if(accessRight==='admin')
return <Scene key="Admin" title="Admin" titleStyle={{ color: '#949494'}} titleDesc="Admin" component={Admin} icon={TabIcon('thermometer-full')} />;
if(accessRight==='non-admin)
return <Scene component={NonAdmin} key='non-admin' title="Non-Admin" titleDesc="Non-Admin" titleStyle={{ color: '#949494'}} icon={TabIcon('wrench')} headerMode="float"/>;
})}

);
}

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.

1. create tabs with some condition
2. make it rerender using redux state change
3. basically have no tabs when not logged in and after logged in have tabs based on condition

[as123456py]

Duplicate of #2349
hope to be useful to you