123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- import 'react-native-gesture-handler';
- import * as React from 'react';
- import { DevSettings, View, Text } from 'react-native';
- import { enableScreens } from 'react-native-screens';
- import AsyncStorage from '@react-native-community/async-storage';
- import ReactNavigation4Example from './ReactNavigation4Example';
- import ReactNavigation5Example from './ReactNavigation5Example';
- import SimpleExample from './SimpleExample';
- import NativeStackExample from './NativeStackExample';
- import ReactNativeSafeAreaView from './ReactNativeSafeAreaView';
-
- enableScreens();
-
- const STORAGE_KEY = 'rnsac-current-example';
-
- export default function App() {
- const [currentExample, setCurrentExample] = React.useState<string | null>(
- null,
- );
-
- React.useEffect(() => {
- async function loadCurrentExample() {
- const example = await AsyncStorage.getItem(STORAGE_KEY);
- setCurrentExample(example ?? null);
- }
- loadCurrentExample();
- }, []);
-
- React.useEffect(() => {
- async function saveCurrentExample() {
- if (currentExample != null) {
- await AsyncStorage.setItem(STORAGE_KEY, currentExample);
- }
- }
- saveCurrentExample();
- }, [currentExample]);
-
- React.useEffect(() => {
- DevSettings.addMenuItem('Show Simple Example', () => {
- setCurrentExample('simple');
- });
- DevSettings.addMenuItem('Show React Navigation 4 Example', () => {
- setCurrentExample('react-navigation-4');
- });
- DevSettings.addMenuItem('Show React Navigation 5 Example', () => {
- setCurrentExample('react-navigation-5');
- });
- DevSettings.addMenuItem('Show Native Stack Example', () => {
- setCurrentExample('native-stack');
- });
- DevSettings.addMenuItem('Show React Native Safe Area View Example', () => {
- setCurrentExample('react-native-safe-area-view');
- });
- }, []);
-
- switch (currentExample) {
- case 'simple':
- return <SimpleExample />;
- case 'react-navigation-4':
- return <ReactNavigation4Example />;
- case 'react-navigation-5':
- return <ReactNavigation5Example />;
- case 'native-stack':
- return <NativeStackExample />;
- case 'react-native-safe-area-view':
- return <ReactNativeSafeAreaView />;
- default:
- return (
- <View
- style={{
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- padding: 24,
- }}
- >
- <Text style={{ textAlign: 'center', fontSize: 14 }}>
- Open the dev menu to choose an example
- </Text>
- </View>
- );
- }
- }
|