Independent Stacks | Screen Transitions

Why This Exists

In v3, blank stack covers the old embedded-flow use case that originally pushed people toward component stack.

The two options that matter are:

independent
enableNativeScreens

They solve different problems.

`independent`

independent creates an isolated navigation tree for the blank stack.

Use it when the stack lives inside another screen, sheet, host app surface, or any embedded flow that should not join the parent React Navigation tree.

TSX

1import { createBlankStackNavigator } from "react-native-screen-transitions/react-navigation";
2
3const Stack = createBlankStackNavigator();
4
5<Stack.Navigator independent>
6  <Stack.Screen name="Home" component={HomeScreen} />
7  <Stack.Screen name="Detail" component={DetailScreen} />
8</Stack.Navigator>

When independent is enabled, the navigator wraps itself in its own NavigationIndependentTree and NavigationContainer.

Leave this off for normal app-level stacks.

`enableNativeScreens`

enableNativeScreens controls whether blank stack renders with native screen primitives from react-native-screens or with regular views.

TSX

1const Stack = createBlankStackNavigator();
2
3<Stack.Navigator enableNativeScreens={false}>
4  <Stack.Screen name="Home" component={HomeScreen} />
5</Stack.Navigator>

With the default true value, blank stack keeps react-native-screens behavior such as native activity state and freezing.

With false, blank stack renders with regular views instead of native screen primitives.

This is often the better fit for embedded flows where plain view layering behaves more naturally than native screen containers.

How They Work Together

These options are independent from each other:

independent decides whether the stack joins the parent navigation tree
enableNativeScreens decides whether the stack uses native screen primitives

That means you can combine them:

TSX

1const Stack = createBlankStackNavigator();
2
3<Stack.Navigator independent enableNativeScreens={false}>
4  <Stack.Screen name="Home" component={HomeScreen} />
5  <Stack.Screen name="Detail" component={DetailScreen} />
6</Stack.Navigator>

This is the common embedded-flow setup:

isolated navigation state
regular view rendering

When To Use Each Setup

Default Blank Stack

Use the defaults when the stack is part of your main app navigation:

TSX

1<Stack.Navigator>
2  <Stack.Screen name="Home" component={HomeScreen} />
3</Stack.Navigator>

Independent Embedded Flow

Use independent when the flow must manage its own navigation state:

TSX

1<Stack.Navigator independent>
2  <Stack.Screen name="Home" component={HomeScreen} />
3</Stack.Navigator>

Embedded Flow With Regular Views

Use independent together with enableNativeScreens={false} when the flow is embedded and you want regular view layering instead of native screen primitives:

TSX

1<Stack.Navigator independent enableNativeScreens={false}>
2  <Stack.Screen name="Home" component={HomeScreen} />
3</Stack.Navigator>

This is usually the most predictable setup for nested flows, custom containers, and surfaces where native screen layering gets in the way.

Static API

The same options are available in the static factory form:

TSX

1import { createBlankStackNavigator } from "react-native-screen-transitions/react-navigation";
2
3const Stack = createBlankStackNavigator({
4  independent: true,
5  enableNativeScreens: false,
6  screens: {
7    Home: HomeScreen,
8    Detail: DetailScreen,
9  },
10});

Practical Guidance

choose blank stack first for new work
add independent when the flow should not join the parent navigation tree
set enableNativeScreens={false} when embedded view behavior is a better fit than native screen primitives
keep enableNativeScreens on when you want the normal react-native-screens behavior inside blank stack

If you are deciding between this and component stack, choose blank stack. Component stack is now the legacy path.