React Native Boost

Native View

How Boost removes the React Native View wrapper and when it keeps it.

The Native View optimizer replaces React Native's View wrapper with its native host component. It converts props such as accessibility attributes, tabIndex, and id to preserve their behavior.

// Before
<View aria-label="Profile" id="profile" />

// After, simplified
<NativeView accessibilityLabel="Profile" nativeID="profile" />

Static values are converted at build time. Dynamic values use minimal runtime helpers where needed.

Nested components

In order to optimize a View into a NativeView, Boost needs to classify its ancestors. If it has an ancestor that is a Text or TextInput (or Boost is not sure if it has), the native host component cannot be used directly. In these cases, Boost still tries to perform a partial optimization by using a small wrapper that preserves text context instead of the full View wrapper.

Boost recognizes common parents such as Pressable, TouchableOpacity, and ImageBackground as safe ancestors for optimization. It also recognizes Animated.View from React Native and Reanimated without removing animation behavior.

When it skips

Boost keeps the original View when it cannot preserve behavior. Common reasons include:

  • A parent might inspect or change its children. This includes unknown custom parents and some scroll, list, and touchable components.
  • A prop spread might contain values that need conversion.
  • Prop conversion could change evaluation order or precedence.
  • Unistyles styles or parent context cannot be resolved.

If your project guarantees that unknown parents never add text context, unknownAncestorsDoNotRenderText can increase coverage. Enable it only when that guarantee holds.

Configuration

The optimizer is enabled by default. Set native-view to off to disable it.

On this page