I was using

CodePudding user response：

The problem is not with the definition of TopTab, but the current implementation leads to the issue.

The TopTab navigation must be in a Stack.Screen. forget about the BottomTabNavigation, it uses a different approach to show the screens.

So You must use TopTabNavigation inside of a screen

Just for an example with the current implementation:

const Stack = createNativeStackNavigator()
const TopTab = createMaterialTopTabNavigator()

const topBarStack = () => {
  return (
    <TopTab.Navigator>
      <TopTab.Screen name='first-tab' component={firstTab} />
      <TopTab.Screen name='second-tab' component={secondTab} />
    </TopTab.Navigator>
  )
}
    
export default function App() {
  return (     
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={topBarStack} options={options} />
        <Stack.Screen name="TodoDetail" component={TodoDetail} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}