How do I make headerLargeTitle appear as large title when the component is a flat list

Question

I have a FlatList component and I want the title to be large. I defined the navigator as follows

export const SamplerStackNavigator = () => (
  <Stack.Navigator
    screenOptions={{
      headerLargeTitle: true,
    }}
  >
    <Stack.Screen name="Flat List" options={{}} component={TheList} />
  </Stack.Navigator>
);

However, it just shows the small header. I can scroll down manually to make the large header appear, but I want to make it appear large by default.

https://snack.expo.dev/@trajano/multi-tab-navigation-with-refresh

On the "Home" tab I have

When I switch to the other tab (the header is small by default)

You can pull it down and it will render to the size I want.

Answer 1

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        options={{
          headerLargeTitle: true,
        }}
        component={HomeScreen}
      />
    </Stack.Navigator>
  );
}

Finde more details here for iOS