How do you customize the top navigation header while preserving native performance?

Short answer

Pass a custom component through headerTitle or customize headerStyle and headerTintColor, and avoid replacing the entire header with JavaScript unless necessary.

Explanation

Native Stack provides good title customization through native options such as headerLargeTitle on iOS and side buttons through headerRight and headerLeft. If you replace the whole header with a JS component using header: () => <CustomHeader />, you lose native animations, the built-in Native Search Bar, and smooth blur effects.

Code example

<Stack.Screen
  name="Inbox"
  component={InboxScreen}
  options={{
    headerTitle: 'Inbox',
    headerLargeTitle: true, // Native iOS large-title feature
    headerSearchBarOptions: {
      placeholder: 'Search messages...',
      onChangeText: (event) => searchMessages(event.nativeEvent.text),
    },
    headerRight: () => (
      <Pressable onPress={openSettings}><Icon name="settings" /></Pressable>
    ),
  }}
/>

Common mistakes

• Replacing the header entirely with a regular UI component inside every screen, causing visual jumps during transitions and losing support for native large titles.

Follow-up questions

• What is the key difference between Native Stack Navigator and Stack Navigator in React Navigation?

Sources

• React Navigation docs — Native Stack Navigator: Options