I have a screen has material bottom tab (have 2 tabs). A second tab has material top tab (have 2 tabs). You can see in attached image. When the second tab of the top is focused, and I press the first tab of the bottom, it jumps to the first tab of the top and focus to second tab of the bottom. I want it to stay in the first tab of the bottom.How can I fix that?
Thank you!
This is parent tab component
const Tab = createMaterialBottomTabNavigator();
export default function HomeComponent({ navigation }) {
return (
<Tab.Navigator
backBehavior='none'
shifting={true}
id="TabBottom"
>
<Tab.Screen
name={ScreenName.DBMReport}
component={ReportComponent}
options={{
tabBarIcon: "chart-donut-variant",
tabBarLabel: "Report",
tabBarColor: Color.RED
}}
/>
<Tab.Screen
name={ScreenName.DBMSetting}
component={SettingComponent}
options={{
tabBarIcon: "cog",
tabBarLabel: "Setting",
tabBarColor: Color.TEAL
}}
/>
</Tab.Navigator>
)
}
This is second tab component (SettingComponent)
const Tab = createMaterialTopTabNavigator();
export default function SettingComponent({ navigation }) {
return (
<Tab.Navigator
backBehavior='none'
id='TabTop'
>
<Tab.Screen name={ScreenName.DBMSource} component={SourceComponent}
options={{
tabBarLabel: "Tab 1",
tabBarLabelStyle: { color: Color.TEAL },
tabBarAllowFontScaling: true,
tabBarIndicatorStyle: { backgroundColor: Color.TEAL },
}}
/>
<Tab.Screen name={ScreenName.DBMLoan} component={LoanComponent}
options={{
tabBarLabel: "Tab 2",
tabBarLabelStyle: { color: Color.MAGENTA },
tabBarAllowFontScaling: true,
tabBarIndicatorStyle: { backgroundColor: Color.MAGENTA },
}} />
</Tab.Navigator>
)
}
