App.tsx

import * as React from 'react';
import { Platform, SafeAreaView } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import ContentsButton from './ContentsButton';
import NativeDetector from './NativeDetector';
import Navigator from './Navigator';
import RuntimeDecoration from './RuntimeDecoration';
import Text from './Text';

const EXAMPLES = [
  {
    name: 'Text',
    component: Text,
  },
  {
    name: 'Runtime Decoration',
    component: RuntimeDecoration,
  },
  {
    name: 'Native Detector',
    component: NativeDetector,
  },
  {
    name: 'Contents Button',
    component: ContentsButton,
  },
];

const Stack = Navigator.create();
Stack.setRoutes(
  Object.fromEntries(
    EXAMPLES.map((example, index) => [
      example.name.toLowerCase().replace(/\s+/g, ''),
      {
        component: example.component,
        title: example.name,
        rightButtonAction:
          index === EXAMPLES.length - 1
            ? undefined
            : () => {
                Stack.navigateTo(
                  EXAMPLES[index + 1].name.toLowerCase().replace(/\s+/g, '')
                );
              },
      },
    ])
  )
);

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaView
        style={[{ flex: 1 }, Platform.OS === 'android' && { paddingTop: 50 }]}>
        <Stack.Navigator />
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}