How to prevent nested tab change to initial route when changing parent tab?

Viewed 15

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>
    )
}

enter image description here

0 Answers
Related