How to make a large header on iOS in React Navigation

In this article, you will learn how to create a large collapsible animated title on iOS in React Navigation. Larger titles are used across the system apps, from the App Store and Apple Music to Notes and Mail. The Health app is shown below:

Large titles are implemented inside @react-navigation/native-stack   which is using react-native-screens at behind the scenes.

Let's see how to implement large title. as I said before we need to use native-stack then we have to add  headerLargeTitle props to true.  

const Stack = createNativeStackNavigator();

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

To see large title to collapse when scroll, we have to wrap the content with scrollable view like ScrollView , FlatList etc. if the content smaller than screen itself  large header wont collapse.We also need to specify contentInsetAdjustmentBehavior="automatic" in your ScrollView, FlatList etc.

You can check out full example in this snack. you may also need to give to large header. you can  check  headerLargeStyle and headerLargeTitleStyle properties in React Navigation.

Note: Please don't forget headerLargeTitle is only for iOS. it has no effect on Android

React Navigation headerLargeTitle on iOS - Snack

Try this project on your phone! Use Expo’s online editor to make changes and save your own copy.

Snack