gotchatypescriptreact-nativeModerate

React Navigation: Stack vs Native Stack Performance

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

react-navigationnative-stackreact-native-screenstransitionsperformanceiOSAndroid

Problem

Using @react-navigation/stack (JS-based) instead of @react-navigation/native-stack results in janky transitions because the JS stack renderer does not use native animation primitives.

Solution

Prefer @react-navigation/native-stack (backed by react-native-screens) for all standard push/pop navigation. Reserve @react-navigation/stack only when you need fully custom transition animations that native stack cannot provide.

Why

Native stack uses UINavigationController on iOS and Fragment transitions on Android — the exact same transitions the OS uses for its own screens. JS stack animates via React Native's Animated API, which runs on the JS thread and can drop frames.

Gotchas

Native stack header customization is more limited than JS stack
Custom gestures on transitions require the JS stack
react-native-screens must be initialized before use: call enableScreens() from react-native-screens

Code Snippets

Using native stack navigator

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator<RootStackParamList>();

export function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

Revisions (0)

No revisions yet.