React Native Screens

React Native Screens provides native navigation primitives for React Native applications, offering superior performance through native screen management. It enables true native screens instead of plain React Native Views, leading to better memory management, improved transition performance, and seamless integration with platform navigation patterns.

Package Information

• Package Name: react-native-screens
• Package Type: npm
• Language: TypeScript
• Installation: npm install react-native-screens

Core Imports

ESM:

import {
  enableScreens,
  Screen,
  InnerScreen,
  ScreenStack,
  ScreenStackItem,
  ScreenContainer,
  SearchBar,
  ScreenStackHeaderConfig
} from "react-native-screens";

CommonJS:

const {
  enableScreens,
  Screen,
  InnerScreen,
  ScreenStack,
  ScreenStackItem,
  ScreenContainer,
  SearchBar,
  ScreenStackHeaderConfig
} = require("react-native-screens");

Basic Usage

import React from 'react';
import { View, Text } from 'react-native';
import {
  enableScreens,
  Screen,
  ScreenStack,
  ScreenStackHeaderConfig
} from 'react-native-screens';

// Enable native screens (typically done in index.js)
enableScreens();

function App() {
  return (
    <ScreenStack>
      <Screen active={1}>
        <ScreenStackHeaderConfig title="Home" />
        <View>
          <Text>Home Screen Content</Text>
        </View>
      </Screen>
    </ScreenStack>
  );
}

Architecture

React Native Screens is built around several key architectural concepts:

• Native Screen Management: Each Screen component represents a true native screen rather than a React Native View
• Screen Stacks: ScreenStack provides native navigation stack functionality with platform-appropriate transitions
• Lifecycle Integration: Automatic screen lifecycle management with React's component lifecycle and native navigation events
• Performance Optimization: Built-in support for React Freeze to suspend inactive screens and reduce memory usage
• Platform Integration: Deep integration with iOS UINavigationController and Android Fragment management
• Modular Design: Core components, utilities, and experimental features are organized into logical capability areas

Capabilities

Core Functions

Essential functions for enabling and configuring the native screens functionality.

function enableScreens(shouldEnableScreens?: boolean): void;
function enableFreeze(shouldEnableReactFreeze?: boolean): void;
function screensEnabled(): boolean;
function freezeEnabled(): boolean;

Core Functions

Screen Components

Main components for creating and managing native screen hierarchies.

function Screen(props: ScreenProps): JSX.Element;
function InnerScreen(props: ScreenProps): JSX.Element;
function ScreenContainer(props: ScreenContainerProps): JSX.Element;
function ScreenStack(props: ScreenStackProps): JSX.Element;
function ScreenStackItem(props: ScreenStackItemProps): JSX.Element;
function FullWindowOverlay(props: ViewProps): JSX.Element;
function ScreenFooter(props: ViewProps): JSX.Element;
function ScreenContentWrapper(props: ViewProps): JSX.Element;
function SearchBar(props: SearchBarProps): JSX.Element;

Screen Components

Header Components

Components for configuring native navigation headers with platform-specific styling.

function ScreenStackHeaderConfig(props: ScreenStackHeaderConfigProps): JSX.Element;
function ScreenStackHeaderLeftView(props: ViewProps): JSX.Element;
function ScreenStackHeaderCenterView(props: ViewProps): JSX.Element;
function ScreenStackHeaderRightView(props: ViewProps): JSX.Element;
function ScreenStackHeaderBackButtonImage(props: ViewProps): JSX.Element;

Header Components

Navigation Utilities

Utility functions, hooks, and configuration objects for navigation behavior.

const isSearchBarAvailableForCurrentPlatform: boolean;
function executeNativeBackPress(): boolean;
function useTransitionProgress(): TransitionProgressContext;

Navigation Utilities

Experimental Features

Beta and experimental components including bottom tabs, split views, and advanced screen hosting.

function BottomTabs(props: BottomTabsProps): JSX.Element;
function BottomTabsScreen(props: BottomTabsScreenProps): JSX.Element;
function SplitViewHost(props: SplitViewHostProps): JSX.Element;
function SplitViewScreen(props: SplitViewScreenProps): JSX.Element;

Experimental Features

Types and Interfaces

Comprehensive TypeScript definitions for all components, props, and configuration options.

interface ScreenProps {
  active?: 0 | 1 | Animated.AnimatedInterpolation<number>;
  stackPresentation?: StackPresentationTypes;
  stackAnimation?: StackAnimationTypes;
  gestureEnabled?: boolean;
  statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
  // ... extensive additional properties
}

type StackPresentationTypes = 
  | 'push' 
  | 'modal' 
  | 'transparentModal' 
  | 'containedModal' 
  | 'containedTransparentModal' 
  | 'fullScreenModal' 
  | 'formSheet' 
  | 'pageSheet';

type StackAnimationTypes = 
  | 'default' 
  | 'fade' 
  | 'fade_from_bottom' 
  | 'flip' 
  | 'none' 
  | 'simple_push' 
  | 'slide_from_bottom' 
  | 'slide_from_right' 
  | 'slide_from_left'
  | 'ios_from_right' 
  | 'ios_from_left';

Types and Interfaces

Platform Support

iOS Features

• Large title navigation bars with iOS 11+ styling
• Native search bar integration with UISearchController
• Form sheet and page sheet presentation styles
• Visual effect blur backgrounds
• SF Symbols icon support
• Split view layouts for iPad
• Native swipe gestures and interactive transitions

Android Features

• Material Design navigation patterns
• Edge-to-edge display support
• Hardware back button integration
• Fragment-based screen management
• Navigation bar configuration
• Android-specific transition animations

Cross-platform Features

• React component lifecycle integration
• Screen orientation control
• Status bar styling
• Modal presentations
• Stack navigation patterns
• React Freeze performance optimization

Migration and Integration

React Native Screens is designed to work seamlessly with popular navigation libraries:

• React Navigation: Full integration as the native screen implementation
• React Native Navigation: Alternative native navigation solution
• Custom Solutions: Direct usage for building custom navigation systems

For applications upgrading from React Navigation v5 or earlier, enable native screens by calling enableScreens() early in your app initialization. For newer React Navigation versions, native screens are enabled by default when this package is installed.

Performance Considerations

• Memory Management: Native screens automatically manage memory more efficiently than JavaScript-based screen implementations
• React Freeze: Inactive screens can be suspended to reduce CPU and memory usage
• Native Transitions: Hardware-accelerated transitions provide 60fps performance
• Platform Optimization: Each platform uses its native navigation primitives for optimal performance

Configuration Flags

interface CompatibilityFlags {
  isNewBackTitleImplementation: boolean;
  usesHeaderFlexboxImplementation: boolean;
}

interface FeatureFlags {
  experiment: {
    controlledBottomTabs: boolean;
  };
  stable: {};
}

const compatibilityFlags: CompatibilityFlags;
const featureFlags: FeatureFlags;

These flags enable downstream navigation libraries to detect feature availability and maintain backward compatibility across different versions of react-native-screens.