In my app I have a (lists) directory that contains a _layout.tsx, a todos.tsx and a shopping.tsx.

In the _layout.tsx I have MaterialTopTabs:

   <MaterialTopTabs
    style={{ marginTop: 24 }}
    screenOptions={{
      tabBarStyle: styles.containerStyle,
      tabBarIndicatorStyle: styles.indicator,
      tabBarActiveTintColor: '#F4F4F5',
      tabBarInactiveTintColor: '#27272A',
      tabBarAndroidRipple: {
        color: 'transparent',
      },
    }}>
    <MaterialTopTabs.Screen name="todos" options={{ title: 'To-Do Lists' }} />
    <MaterialTopTabs.Screen name="shopping" options={{ title: 'Shopping Lists' }} />
  </MaterialTopTabs>

The todos screen for example shows a list of todo lists. When I tap on one of the lists, I want to push the next screen (that shows the actual todos of the selected list) on top. Is that possible? What would the folder structure look like?

Edit: I have tried to make the (todos) screen its own stack but then the MaterialTopTabs are always shown.