react-native-screens

import React, { useState } from 'react'; import { Button, View, Text } from 'react-native'; import { enableScreens, ScreenContainer, Screen, ScreenStackHeaderConfig, } from 'react-native-screens'; // Call enableScreens at the top level of your app to optimize screen rendering. // This should be done once, typically in index.js or App.tsx. enableScreens(); // Basic screen component demonstration function MyScreen({ title, color, onNavigate }: { title: string; color: string; onNavigate?: () => void }) { return ( <Screen style={{ flex: 1, backgroundColor: color }}> {/* ScreenStackHeaderConfig is often used within Screen to define header properties */} <ScreenStackHeaderConfig title={title} backgroundColor={color === 'white' ? '#f0f0f0' : color} // You can add many more props for header customization // largeTitle={true} // iOS specific /> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text style={{ fontSize: 24, marginBottom: 20 }}>{title}</Text> {onNavigate && ( <Button title={`Go to Next`} onPress={onNavigate} /> )} </View> </Screen> ); } // Main App component to demonstrate ScreenContainer export default function App() { const [activeScreenIndex, setActiveScreenIndex] = useState(0); const screens = [ <MyScreen key="home" title="Home Screen" color="white" onNavigate={() => setActiveScreenIndex(1)} />, <MyScreen key="details" title="Details Screen" color="lightblue" onNavigate={() => setActiveScreenIndex(0)} />, ]; return ( // ScreenContainer is the root component that manages native screens <ScreenContainer style={{ flex: 1 }}> {screens.map((screen, index) => ( // activityState controls whether the screen is active (mounted and visible) // 0: inactive (unmounted/hidden), 1: transitioning, 2: active (visible) <Screen key={screen.key} style={{ flex: 1 }} activityState={index === activeScreenIndex ? 2 : 0}> {screen} </Screen> ))} </ScreenContainer> ); }