{"library":"react-native-screens","title":"React Native Screens","description":"react-native-screens is a foundational library for React Native that exposes native screen lifecycle management and view hierarchy optimization directly to JavaScript. It enables navigation libraries, such as React Navigation, to leverage platform-specific navigation primitives for improved performance, smoother transitions, and a more native look and feel. The current stable version is 4.24.0, with minor releases occurring frequently (roughly monthly) as development progresses towards a 5.0 stack implementation. A key differentiator is its focus on utilizing native APIs, which contrasts with purely JavaScript-driven navigation solutions. Notably, version 4.24.0 is the last release tested with React Native's 'legacy architecture'; upcoming versions (from 4.25.0) will drop support for older React Native versions (below 0.82) and the legacy architecture, signaling a shift towards the New Architecture (Fabric).","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-screens"],"cli":null},"imports":["import { ScreenContainer } from 'react-native-screens';","import { enableScreens } from 'react-native-screens';","import { Screen } from 'react-native-screens';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { Button, View, Text } from 'react-native';\nimport {\n  enableScreens,\n  ScreenContainer,\n  Screen,\n  ScreenStackHeaderConfig,\n} from 'react-native-screens';\n\n// Call enableScreens at the top level of your app to optimize screen rendering.\n// This should be done once, typically in index.js or App.tsx.\nenableScreens();\n\n// Basic screen component demonstration\nfunction MyScreen({ title, color, onNavigate }: { title: string; color: string; onNavigate?: () => void }) {\n  return (\n    <Screen style={{ flex: 1, backgroundColor: color }}>\n      {/* ScreenStackHeaderConfig is often used within Screen to define header properties */}\n      <ScreenStackHeaderConfig\n        title={title}\n        backgroundColor={color === 'white' ? '#f0f0f0' : color}\n        // You can add many more props for header customization\n        // largeTitle={true} // iOS specific\n      />\n      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n        <Text style={{ fontSize: 24, marginBottom: 20 }}>{title}</Text>\n        {onNavigate && (\n          <Button title={`Go to Next`} onPress={onNavigate} />\n        )}\n      </View>\n    </Screen>\n  );\n}\n\n// Main App component to demonstrate ScreenContainer\nexport default function App() {\n  const [activeScreenIndex, setActiveScreenIndex] = useState(0);\n\n  const screens = [\n    <MyScreen key=\"home\" title=\"Home Screen\" color=\"white\" onNavigate={() => setActiveScreenIndex(1)} />,\n    <MyScreen key=\"details\" title=\"Details Screen\" color=\"lightblue\" onNavigate={() => setActiveScreenIndex(0)} />,\n  ];\n\n  return (\n    // ScreenContainer is the root component that manages native screens\n    <ScreenContainer style={{ flex: 1 }}>\n      {screens.map((screen, index) => (\n        // activityState controls whether the screen is active (mounted and visible)\n        // 0: inactive (unmounted/hidden), 1: transitioning, 2: active (visible)\n        <Screen key={screen.key} style={{ flex: 1 }} activityState={index === activeScreenIndex ? 2 : 0}>\n          {screen}\n        </Screen>\n      ))}\n    </ScreenContainer>\n  );\n}","lang":"typescript","description":"This example demonstrates how to initialize `react-native-screens` with `enableScreens()`, and use `ScreenContainer` to manage basic `Screen` components with header configurations, simulating screen activation through state changes.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}