Large titles not initially large

[thekiwi]

I've spent some time looking through previous issues/discussions but not found any answers yet, so thought I'd ask.

I'm using createNativeStackNavigator() to create a stack navigator. I would like the initial Home Screen to have a large title when first loaded. Here's what I put:

enableScreens(true);
const Stack = createNativeStackNavigator();

function HomeScreen() {
    return (
        <ScrollView contentInsetAdjustmentBehavior="automatic">
            <Text>Hello World</Text>
        </ScrollView>
    );
}

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator screenOptions={{ headerLargeTitle: true }}>
                <Stack.Screen
                    name="Home"
                    options={{ title: 'My Lists', headerLargeTitle: true }}
                    component={HomeScreen}
                />
                <Stack.Screen
                    name="Details"
                    component={ListDetailsScreen}
                    options={{ headerLargeTitle: true }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

However, every time I start the app, the navigation bar starts off in small form:

If I drag down, it works as expected, showing the large title:

But I can't figure out how to get the large title to show initially - how might I achieve that?

[cabiad]

Not a core dev, but I think #645 and #649 are related to this. It also looks like there's an open PR to fix this in #670 which would remove the need for this workaround when it gets merged and released. There's a zero timeout workaround suggested on #645 which I use successfully for now.

If it helps, here's a sample implementation of the workaround and how you might use it in a screen component.

function useLargeTitleWorkaround() {
  const [largeTitleWorkaroundReady, setLargeTitleWorkaroundReady] = useState(
    false,
  );

  useEffect(() => {
    const timer = setTimeout(() => setLargeTitleWorkaroundReady(true), 0);
    return () => clearTimeout(timer);
  }, []);

  return largeTitleWorkaroundReady;
}

function SomeScreen() {
  const largeTitleWorkaroundReady = useLargeTitleWorkaround();
  // (... other hook calls)

  if (!largeTitleWorkaroundReady) {
    return null;
  }

  // (.. rest of screen component implementation)
}

[thekiwi]

Ah amazing. I've now implemented the workaround you suggested and my titles now appear large on startup.

Hopefully it gets fixed in the core, but for now, this will do me perfectly :)

Many thanks @cabiad!

[tboba]

Hi @thekiwi, I see that you've already have your question answered, but let me comment that discussion, as I believe there's already a solution in the newest version of react-native-screens 😄

I believe in the first screen headerLargeTitle should work straight away. If it's still not working, try to set headerTranslucent prop and make sure that your ScrollView has contentInsetAdjustmentBehavior="automatic" property set (which in your case it's already there).

Cheers!