feat: extract shared example and use in in both Example and FabricExa…

.github/workflows/android-e2e-test.yml

@@ -37,6 +37,8 @@ jobs:
           cache: 'yarn'
       - name: Install root node dependencies
         run: yarn install && yarn submodules
+      - name: Install shared app dependencies
+        run: (cd apps/examples && yarn install)
       - name: Install node dependencies
         id: install_deps
         working-directory: ${{ env.WORKING_DIRECTORY }}

.github/workflows/ios-e2e-test.yml

@@ -40,6 +40,8 @@ jobs:
         run: brew tap wix/brew && brew install applesimutils
       - name: Install root node dependencies
         run: yarn install && yarn submodules
+      - name: Install shared app dependencies
+        run: (cd apps/examples && yarn install)
       - name: Install node dependencies
         working-directory: ${{ env.WORKING_DIRECTORY }}
         run: yarn

Example/App.tsx

@@ -1,196 +1,3 @@
-import React from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  Text,
-  I18nManager,
-  Platform,
-  StatusBar,
-} from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import RNRestart from 'react-native-restart';
+import App from '../apps/examples';
 
-import { ListItem, SettingsSwitch } from './src/shared';
-
-import SimpleNativeStack from './src/screens/SimpleNativeStack';
-import SwipeBackAnimation from './src/screens/SwipeBackAnimation';
-import StackPresentation from './src/screens/StackPresentation';
-import HeaderOptions from './src/screens/HeaderOptions';
-import StatusBarExample from './src/screens/StatusBar';
-import Animations from './src/screens/Animations';
-import BottomTabsAndStack from './src/screens/BottomTabsAndStack';
-import Modals from './src/screens/Modals';
-import Orientation from './src/screens/Orientation';
-import SearchBar from './src/screens/SearchBar';
-import Events from './src/screens/Events';
-import Gestures from './src/screens/Gestures';
-
-import { enableFreeze } from 'react-native-screens';
-import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-
-enableFreeze();
-
-if (Platform.OS === 'android') {
-  StatusBar.setTranslucent(true);
-}
-
-const SCREENS: Record<
-  string,
-  {
-    title: string;
-    component: () => React.JSX.Element;
-    type: 'example' | 'playground';
-  }
-> = {
-  SimpleNativeStack: {
-    title: 'Simple Native Stack',
-    component: SimpleNativeStack,
-    type: 'example',
-  },
-  SwipeBackAnimation: {
-    title: 'Swipe Back Animation',
-    component: SwipeBackAnimation,
-    type: 'example',
-  },
-  StackPresentation: {
-    title: 'Stack Presentation',
-    component: StackPresentation,
-    type: 'example',
-  },
-  BottomTabsAndStack: {
-    title: 'Bottom tabs and native stack',
-    component: BottomTabsAndStack,
-    type: 'example',
-  },
-  Modals: {
-    title: 'Modals',
-    component: Modals,
-    type: 'example',
-  },
-  HeaderOptions: {
-    title: 'Header Options',
-    component: HeaderOptions,
-    type: 'playground',
-  },
-  StatusBar: {
-    title: 'Status bar',
-    component: StatusBarExample,
-    type: 'playground',
-  },
-  Animations: {
-    title: 'Animations',
-    component: Animations,
-    type: 'playground',
-  },
-  Orientation: {
-    title: 'Orientation',
-    component: Orientation,
-    type: 'playground',
-  },
-  SearchBar: {
-    title: 'Search bar',
-    component: SearchBar,
-    type: 'playground',
-  },
-  Events: {
-    title: 'Events',
-    component: Events,
-    type: 'playground',
-  },
-  Gestures: {
-    title: 'Gestures',
-    component: Gestures,
-    type: 'playground',
-  },
-};
-
-type RootStackParamList = {
-  Main: undefined;
-} & {
-  [P in keyof typeof SCREENS]: undefined;
-};
-
-const Stack = createNativeStackNavigator<RootStackParamList>();
-
-interface MainScreenProps {
-  navigation: StackNavigationProp<RootStackParamList, 'Main'>;
-}
-
-const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => (
-  <ScrollView testID="root-screen-examples-scrollview">
-    <SettingsSwitch
-      style={styles.switch}
-      label="Right to left"
-      value={I18nManager.isRTL}
-      onValueChange={() => {
-        I18nManager.forceRTL(!I18nManager.isRTL);
-        RNRestart.Restart();
-      }}
-    />
-    <Text style={styles.label} testID="root-screen-examples-header">
-      Examples
-    </Text>
-    {Object.keys(SCREENS)
-      .filter(name => SCREENS[name].type === 'example')
-      .map(name => (
-        <ListItem
-          key={name}
-          testID={`root-screen-example-${name}`}
-          title={SCREENS[name].title}
-          onPress={() => navigation.navigate(name)}
-        />
-      ))}
-    <Text style={styles.label}>Playgrounds</Text>
-    {Object.keys(SCREENS)
-      .filter(name => SCREENS[name].type === 'playground')
-      .map(name => (
-        <ListItem
-          key={name}
-          testID={`root-screen-playground-${name}`}
-          title={SCREENS[name].title}
-          onPress={() => navigation.navigate(name)}
-        />
-      ))}
-  </ScrollView>
-);
-
-const ExampleApp = (): React.JSX.Element => (
-  <GestureHandlerRootView style={{ flex: 1 }}>
-    <GestureDetectorProvider>
-      <NavigationContainer>
-        <Stack.Navigator>
-          <Stack.Screen
-            name="Main"
-            options={{ title: '📱 React Native Screens Examples' }}
-            component={MainScreen}
-          />
-          {Object.keys(SCREENS).map(name => (
-            <Stack.Screen
-              key={name}
-              name={name}
-              getComponent={() => SCREENS[name].component}
-              options={{ headerShown: false }}
-            />
-          ))}
-        </Stack.Navigator>
-      </NavigationContainer>
-    </GestureDetectorProvider>
-  </GestureHandlerRootView>
-);
-
-const styles = StyleSheet.create({
-  label: {
-    fontSize: 15,
-    color: 'black',
-    margin: 10,
-    marginTop: 15,
-  },
-  switch: {
-    marginTop: 15,
-  },
-});
-
-export default ExampleApp;
+export default App;

Example/ios/Podfile.lock

@@ -1489,7 +1489,7 @@ SPEC CHECKSUMS:
   RNScreens: b32a9ff15bea7fcdbe5dff6477bc503f792b1208
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 348f8b538c3ed4423eb58a8e5730feec50bce372
+  Yoga: b9a182ab00cf25926e7f79657d08c5d23c2d03b0
 
 PODFILE CHECKSUM: 7bffbf744a07be2a9e6cfb9359c3debcc9873875
 

FabricExample/App.tsx

@@ -0,0 +1,3 @@
+import App from '../apps/examples';
+
+export default App;

FabricExample/ios/Podfile.lock

@@ -935,6 +935,8 @@ PODS:
   - React-Mapbuffer (0.74.1):
     - glog
     - React-debug
+  - react-native-restart (0.0.27):
+    - React-Core
   - react-native-safe-area-context (4.10.1):
     - DoubleConversion
     - glog
@@ -1251,6 +1253,27 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNReanimated (3.11.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNScreens (3.31.1):
     - DoubleConversion
     - glog
@@ -1296,6 +1319,8 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNVectorIcons (8.1.0):
+    - React-Core
   - SocketRocket (0.7.0)
   - Yoga (0.0.0)
 
@@ -1332,6 +1357,7 @@ DEPENDENCIES:
   - React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
+  - react-native-restart (from `../node_modules/react-native-restart`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1357,7 +1383,9 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1426,6 +1454,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   React-Mapbuffer:
     :path: "../node_modules/react-native/ReactCommon"
+  react-native-restart:
+    :path: "../node_modules/react-native-restart"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-nativeconfig:
@@ -1476,8 +1506,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNVectorIcons:
+    :path: "../node_modules/react-native-vector-icons"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1488,7 +1522,7 @@ SPEC CHECKSUMS:
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
   glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
   hermes-engine: 16b8530de1b383cdada1476cf52d1b52f0692cbc
-  RCT-Folly: 045d6ecaa59d826c5736dfba0b2f4083ff8d79df
+  RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
   RCTDeprecation: efb313d8126259e9294dc4ee0002f44a6f676aba
   RCTRequired: f49ea29cece52aee20db633ae7edc4b271435562
   RCTTypeSafety: a11979ff0570d230d74de9f604f7d19692157bc4
@@ -1512,6 +1546,7 @@ SPEC CHECKSUMS:
   React-jsitracing: 233d1a798fe0ff33b8e630b8f00f62c4a8115fbc
   React-logger: 7e7403a2b14c97f847d90763af76b84b152b6fce
   React-Mapbuffer: 11029dcd47c5c9e057a4092ab9c2a8d10a496a33
+  react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162
   react-native-safe-area-context: 7f54ad0a774de306ab790c70d9d950321e5c5449
   React-nativeconfig: b0073a590774e8b35192fead188a36d1dca23dec
   React-NativeModulesApple: df46ff3e3de5b842b30b4ca8a6caae6d7c8ab09f
@@ -1537,9 +1572,11 @@ SPEC CHECKSUMS:
   React-utils: 3285151c9d1e3a28a9586571fc81d521678c196d
   ReactCommon: f42444e384d82ab89184aed5d6f3142748b54768
   RNGestureHandler: 156548e18203327173a764c6932a3f52e90cb9cd
+  RNReanimated: 2f33b2f8c79c456ce3858a7cd2e07460eb5f61e0
   RNScreens: 63fe8222c172a79f5c30dd1aefaeb369c6eb57b6
+  RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 348f8b538c3ed4423eb58a8e5730feec50bce372
+  Yoga: b9a182ab00cf25926e7f79657d08c5d23c2d03b0
 
 PODFILE CHECKSUM: c270e520a11547ef636f117b51709c3ed2b291f7