💫 Update: Ex - ModalSheetViewTest01 Scaffolding

example/src/App.tsx

@@ -1,29 +1,83 @@
-import * as React from 'react';
+import * as React from "react";
+import { StyleSheet } from "react-native";
 
-import { StyleSheet, View, Text } from 'react-native';
-import { RNIModalView } from 'react-native-ios-modal';
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+
+import { HomeScreen } from "./components/HomeScreen";
+
+import { SHARED_ENV } from "./constants/SharedEnv";
+import { ROUTE_ITEMS } from "./constants/Routes";
+import { ROUTE_KEYS } from "./constants/RouteKeys";
+
+const shouldEnableTabs =
+  SHARED_ENV.enableReactNavigation && SHARED_ENV.enableTabNavigation;
+
+
+function Tab1StackScreen() {
+  if (shouldEnableTabs) {
+    const Tab1Stack = createNativeStackNavigator();
+
+    return (
+      <Tab1Stack.Navigator initialRouteName='Home'>
+        <Tab1Stack.Screen name='Home' component={HomeScreen} />
+      </Tab1Stack.Navigator>
+    );
+  } else {
+    return null;
+  }
+}
 
 export default function App() {
-  return (
-    <View style={styles.container}>
-      <RNIModalView style={{backgroundColor: 'red'}}>
-        <View>
-          <Text>Hello World</Text>
-        </View>
-      </RNIModalView>
-    </View>
-  );
+  if (shouldEnableTabs) {
+    const TabNavigator = createBottomTabNavigator();
+
+    return (
+      <NavigationContainer>
+        <TabNavigator.Navigator>
+          <TabNavigator.Screen name='Tab1' component={Tab1StackScreen} />
+          <TabNavigator.Screen name='Tab2' component={HomeScreen} />
+        </TabNavigator.Navigator>
+      </NavigationContainer>
+    );
+  } else if (SHARED_ENV.enableReactNavigation) {
+    const Stack = createNativeStackNavigator();
+
+    return (
+      <NavigationContainer>
+        <Stack.Navigator
+          initialRouteName={ROUTE_KEYS.home}
+          screenOptions={{
+            contentStyle: {
+              backgroundColor: (SHARED_ENV.shouldSetAppBackground
+                ? "black"
+                : undefined
+              ),
+            },
+            headerShadowVisible: false,
+            headerStyle: {
+              backgroundColor: (SHARED_ENV.shouldSetAppBackground
+                ? "black"
+                : undefined
+              ),
+            },
+          }}
+        >
+          {ROUTE_ITEMS.map((item) => (
+            <Stack.Screen
+              key={item.routeKey}
+              name={item.routeKey}
+              component={item.component}
+            />
+          ))}
+        </Stack.Navigator>
+      </NavigationContainer>
+    );
+  }
+
+  return <HomeScreen />;
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
-  },
 });

example/src/components/ExampleList.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+
+import {
+  StyleSheet,
+  FlatList,
+  type ListRenderItem,
+  type ViewStyle,
+} from "react-native";
+
+import { CardButton, ExampleItemCard } from "react-native-ios-utilities";
+import { useNavigation } from "@react-navigation/native";
+
+import { SHARED_ENV } from "../constants/SharedEnv";
+import { EXAMPLE_ITEMS, type ExampleListItem } from "../constants/ExampleCardItems";
+
+
+const EXAMPLE_LIST_ITEMS = EXAMPLE_ITEMS.map(
+  (item, index) => {
+    switch(item.type) {
+      case 'screen':
+        return ({
+          id: index + 1,
+          component: (props: Record<string, unknown>) => {
+            // @ts-ignore
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const navigation = SHARED_ENV.enableReactNavigation && useNavigation();
+
+            return (
+              <ExampleItemCard
+                {...{props}}
+                style={styles.exampleListItem}
+                index={index + 1}
+                title={item.title ?? item.routeKey}
+                subtitle={item.subtitle}
+                description={item.desc}
+              >
+                <CardButton
+                  title="Navigate"
+                  subtitle={`Push: ${item.routeKey}`}
+                  onPress={() => {
+                    // @ts-ignore
+                    navigation?.push(item.routeKey);
+                  }}
+                />
+              </ExampleItemCard>
+            );
+          },
+        });
+
+      default:
+        return ({
+          id: index + 1,
+          component: item.component as any,
+        });
+    };
+  }
+);
+
+export function ExampleList(props: {
+  style: ViewStyle;
+  contentContainerStyle: ViewStyle;
+}) {
+  const renderItem: ListRenderItem<ExampleListItem> = ({item}) => (
+    React.createElement(item.component, {
+      index: item.id,
+      style: styles.exampleListItem,
+    })
+  );
+
+  return (
+    <FlatList
+      style={props.style}
+      contentContainerStyle={props.contentContainerStyle}
+      data={EXAMPLE_LIST_ITEMS}
+      renderItem={renderItem}
+      keyExtractor={(item) => `item-${item.id}`}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  rootContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    paddingHorizontal: 10,
+    paddingBottom: 100,
+    paddingTop: 20,
+  },
+  exampleListItem: {
+    marginBottom: 15,
+  },
+});

example/src/components/HomeScreen.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { StyleSheet, SafeAreaView } from "react-native";
+import { ExampleList } from "./ExampleList";
+
+
+export function HomeScreen() {
+  return (
+    <SafeAreaView style={styles.rootContainer}>
+      <ExampleList
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContentContainer}
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  rootContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    paddingHorizontal: 10,
+    paddingBottom: 100,
+    paddingTop: 20,
+  },
+  exampleListItem: {
+    marginBottom: 15,
+  },
+});

example/src/constants/ExampleCardItems.ts

@@ -0,0 +1,65 @@
+import { HomeScreen } from "../components/HomeScreen";
+import { AppMetadataCard } from "../examples/AppMetadataCard";
+
+import { ModalSheetViewTest01 } from "../examples/ModalSheetViewTest01";
+
+import type { ExampleItemProps } from "../examples/SharedExampleTypes";
+import type { RouteEntry } from "./Routes";
+
+
+type ExampleItemBase = {
+  component: unknown;
+};
+
+export type ExampleItemRoute = ExampleItemBase & RouteEntry & {
+  type: 'screen';
+  title?: string;
+  subtitle?: string;
+  desc?: Array<string>;
+};
+
+export type ExampleItemCard = ExampleItemBase & {
+  type: 'card';
+}
+
+export type ExampleItem = 
+  | ExampleItemRoute
+  | ExampleItemCard;
+
+export type ExampleListItem = {
+  id: number;
+  component: React.FC<ExampleItemProps>;
+};
+
+export const EXAMPLE_ITEMS: Array<ExampleItem> = (() => {
+  const screenItems: Array<ExampleItemRoute> = [
+    {
+      component: HomeScreen,
+      type: 'screen',
+      routeKey: 'home',
+      desc: [
+        'Used for testing navigation events + memory leaks',
+      ],
+    },
+  ];
+
+  const cardItems: Array<ExampleItemCard> = [
+    {
+      type: 'card',
+      component: ModalSheetViewTest01,
+    },
+  ]; 
+
+  // if (SHARED_ENV.enableReactNavigation) {
+  //   items.splice(0, 0, ...[DebugControls]);
+  // }
+
+  return [
+    {
+      type: 'card',
+      component: AppMetadataCard,
+    },
+    ...screenItems, 
+    ...cardItems
+  ];
+})();

example/src/constants/RouteKeys.ts

@@ -0,0 +1,7 @@
+
+export const ROUTE_KEYS = {
+  home: 'home', 
+  dummyTest01: 'dummyTest01',
+};
+
+export type RouteKey = keyof (typeof ROUTE_KEYS);

example/src/constants/Routes.ts

@@ -0,0 +1,25 @@
+import { HomeScreen } from "../components/HomeScreen";
+import type { RouteKey } from "./RouteKeys";
+
+
+export type RouteEntry = {
+  routeKey: RouteKey
+  component: React.ComponentType<{}>;
+};
+
+export const ROUTE_ITEMS: Array<RouteEntry> = [
+  {
+    routeKey: 'home',
+    component: HomeScreen,
+  }
+];
+
+export const ROUTE_MAP: Record<RouteKey, RouteEntry> = (() => {
+  const map: Record<string, RouteEntry> = {};
+
+  for (const routeItem of ROUTE_ITEMS) {
+    map[routeItem.routeKey] = routeItem;
+  };
+
+  return map;
+})();

example/src/constants/SharedEnv.ts

@@ -0,0 +1,8 @@
+export const SHARED_ENV = {
+  enableReactNavigation: true,
+  enableTabNavigation: false,
+  shouldSetAppBackground: false
+};
+
+export const IS_USING_NEW_ARCH = 
+  (global as any)?.nativeFabricUIManager != null;