Add fabric support to the example app (#3204)

## Description

<!--
Description and motivation for this PR.

Include 'Fixes #<number>' if this is fixing some issue.
-->

Adds `fabric` support to the example app. 
To use `fabric`, set the optional `FABRIC_ENABLED` environment variable
to `1` during `yarn` installation.

## Test plan

- test `fabric`
  - `cd example`
  - `FABRIC_ENABLED=1 yarn`
  - `yarn start`
  - run `Android` via `Android Studio`
  - `cd ios`
  - bundle exec pod install`
  - run `iOS` via `XCode`
- see how when apps load, the metro displays `bridgeless mode enabled`
message
- test `paper`
  - `cd example`
  - `yarn`
  - `yarn start`
  - run `Android` via `Android Studio`
  - `cd ios`
  - `bundle exec pod install`
  - run `iOS` via `XCode`

Author: latekvo

example/app.config.js

@@ -0,0 +1,59 @@
+export default ({ config }) => ({
+  ...config,
+  name: 'example',
+  slug: 'example',
+  version: '0.0.1',
+  orientation: 'portrait',
+  icon: './assets/icon.png',
+  sdkVersion: '51.0.0',
+  splash: {
+    image: './assets/splash.png',
+    resizeMode: 'cover',
+    backgroundColor: '#F8F9FF',
+  },
+  ios: {
+    bundleIdentifier: 'com.example',
+    buildNumber: '1',
+    supportsTablet: true,
+  },
+  android: {
+    versionCode: 1,
+    package: 'com.example',
+    adaptiveIcon: {
+      foregroundImage: './assets/adaptive-icon.png',
+      backgroundColor: '#F8F9FF',
+    },
+  },
+  web: {
+    favicon: './assets/favicon.png',
+  },
+  plugins: [
+    [
+      'expo-camera',
+      {
+        cameraPermission: 'Allow RNGH example to access your camera',
+      },
+    ],
+    [
+      'expo-font',
+      {
+        fonts: [
+          './node_modules/@swmansion/icons/fonts/broken/swm-icons-broken.ttf',
+          './node_modules/@swmansion/icons/fonts/outline/swm-icons-outline.ttf',
+          './node_modules/@swmansion/icons/fonts/curved/swm-icons-curved.ttf',
+        ],
+      },
+    ],
+    [
+      'expo-build-properties',
+      {
+        ios: {
+          newArchEnabled: Boolean(Number(process.env.FABRIC_ENABLED)),
+        },
+        android: {
+          newArchEnabled: Boolean(Number(process.env.FABRIC_ENABLED)),
+        },
+      },
+    ],
+  ],
+});

example/app.json

@@ -14,31 +14,32 @@
     "postinstall": "patch-package && expo prebuild"
   },
   "dependencies": {
-    "@expo/metro-config": "~0.18.1",
-    "@expo/metro-runtime": "^3.2.1",
+    "@expo/metro-config": "~0.18.11",
+    "@expo/metro-runtime": "~3.2.3",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-community/slider": "^4.5.2",
     "@react-native-community/viewpager": "^5.0.11",
-    "@react-native-masked-view/masked-view": "^0.2.8",
+    "@react-native-masked-view/masked-view": "0.3.1",
     "@react-navigation/elements": "^1.3.7",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.3.29",
     "@swmansion/icons": "^0.0.1",
-    "expo": "^51.0.0",
-    "expo-camera": "~15.0.9",
+    "expo": "~51.0.38",
+    "expo-build-properties": "^0.12.5",
+    "expo-camera": "~15.0.16",
     "expo-font": "~12.0.10",
     "hoist-non-react-statics": "^3.3.2",
     "invariant": "^2.2.4",
     "patch-package": "^6.5.1",
     "postinstall-postinstall": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.1",
+    "react-native": "0.75.4",
     "react-native-gesture-handler": "link:..",
     "react-native-reanimated": "3.15.5",
-    "react-native-safe-area-context": "4.10.1",
-    "react-native-screens": "3.31.1",
-    "react-native-svg": "^15.8.0",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.35.0",
+    "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.10"
   },
   "devDependencies": {
@@ -48,7 +49,7 @@
     "@tsconfig/react-native": "^3.0.5",
     "@types/jest": "^29.5.12",
     "@types/metro-config": "^0.76.3",
-    "@types/react": "^18.3.1",
+    "@types/react": "~18.2.79",
     "@types/react-native": "^0.73.0",
     "@types/react-test-renderer": "^18.3.0",
     "@typescript-eslint/parser": "^7.8.0",
@@ -59,7 +60,7 @@
     "jest": "^29.7.0",
     "prettier": "3.3.3",
     "react-test-renderer": "18.3.1",
-    "typescript": "^5.1.3"
+    "typescript": "~5.3.3"
   },
   "resolutions": {
     "@typescript-eslint/eslint-plugin": "^5.17.0",

example/package.json

@@ -1,17 +1,9 @@
 import React from 'react';
-import {
-  PressableStateCallbackType,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { PressableStateCallbackType, StyleSheet, View } from 'react-native';
 import TestingBase from './testingBase';
 
 export function FunctionalStyleExample() {
-  const functionalStyle = (
-    state: PressableStateCallbackType
-  ): StyleProp<ViewStyle> => {
+  const functionalStyle = (state: PressableStateCallbackType) => {
     if (state.pressed) {
       return {
         width: 100,

example/src/release_tests/gesturizedPressable/functionalStylesExample.tsx

@@ -2,11 +2,9 @@ import React from 'react';
 import {
   Pressable as LegacyPressable,
   PressableStateCallbackType,
-  StyleProp,
   StyleSheet,
   Text,
   View,
-  ViewStyle,
 } from 'react-native';
 import {
   ScrollView,
@@ -28,29 +26,23 @@ export default function Example() {
 
 const BOX_SIZE_COEFFICIENT = 100;
 
-const getBoxStyle = (size: number): StyleProp<ViewStyle> => ({
+const getBoxStyle = (size: number) => ({
   width: size,
   height: size,
   borderWidth: 1,
 });
 
-const innerStyle = ({
-  pressed,
-}: PressableStateCallbackType): StyleProp<ViewStyle> => [
+const innerStyle = ({ pressed }: PressableStateCallbackType) => [
   getBoxStyle(BOX_SIZE_COEFFICIENT),
   pressed ? { backgroundColor: '#c00' } : { backgroundColor: '#c77' },
   styles.centering,
 ];
-const middleStyle = ({
-  pressed,
-}: PressableStateCallbackType): StyleProp<ViewStyle> => [
+const middleStyle = ({ pressed }: PressableStateCallbackType) => [
   getBoxStyle(BOX_SIZE_COEFFICIENT * 2),
   pressed ? { backgroundColor: '#0c0' } : { backgroundColor: '#7a7' },
   styles.centering,
 ];
-const outerStyle = ({
-  pressed,
-}: PressableStateCallbackType): StyleProp<ViewStyle> => [
+const outerStyle = ({ pressed }: PressableStateCallbackType) => [
   getBoxStyle(BOX_SIZE_COEFFICIENT * 3),
   pressed ? { backgroundColor: '#00c' } : { backgroundColor: '#88a' },
   styles.centering,

example/src/release_tests/nestedPressables/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { RectButton } from 'react-native-gesture-handler';
 
 export default function RectButtonBorders() {
@@ -62,10 +62,14 @@ export default function RectButtonBorders() {
   );
 }
 
-type ButtonProps = { style: StyleProp<ViewStyle>; text: string };
+type ButtonProps = {
+  // RN cross-version conflicts prevent us from using `ViewStyle` with RNGH <= 2.21.0 and RN >= 0.75.0
+  style: Record<string, string | number>;
+  text: string;
+};
 
 function Button({ style, text }: ButtonProps) {
-  const rectButtonStyles: StyleProp<ViewStyle> = [styles.button, style];
+  const rectButtonStyles = [styles.button, style];
 
   const onPress = () => alert(`Pressed ${text}!`);
 

example/src/release_tests/rectButton/index.tsx

@@ -33,7 +33,9 @@ const renderSampleBox = (color?: string) => (
   />
 );
 
-const toReactNativeTouchable = (touchable: React.ComponentType<unknown>) => {
+const toReactNativeTouchable = (
+  touchable: React.ComponentType<unknown>
+): React.ElementType => {
   if (touchable === TouchableOpacity) {
     return RNTouchableOpacity;
   }
@@ -53,9 +55,11 @@ type Touchables = {
   type: React.ComponentType<any>;
   props?: Record<string, unknown>;
   color?: string;
-  renderChild: (() => null) | ((color?: string) => React.ReactNode);
+  renderChild: (color?: string) => React.ReactNode;
   text: string;
-  background?: (A: typeof TouchableNativeFeedback) => BackgroundPropType;
+  background?: (
+    A: typeof TouchableNativeFeedback | typeof RNTouchableNativeFeedback
+  ) => BackgroundPropType;
 };
 
 const TOUCHABLES: Touchables[] = [
@@ -297,7 +301,10 @@ const TOUCHABLES: Touchables[] = [
 ];
 
 const screens: Record<string, Touchables> = TOUCHABLES.reduce(
-  (map: Record<string, Touchables>, obj) => ((map[obj.text] = obj), map),
+  (map: Record<string, Touchables>, obj: Touchables) => {
+    map[obj.text] = obj;
+    return map;
+  },
   {}
 );
 
@@ -353,12 +360,10 @@ export class TouchableExample extends Component<
       color,
     } = screens[this.props.route.params.item];
     const RNTouchable = toReactNativeTouchable(GHTouchable);
-    const Component: React.ComponentType<any> = this.state.useScrollView
-      ? ScrollView
-      : View;
+    const Wrapper = this.state.useScrollView ? ScrollView : View;
 
     return (
-      <Component style={{ width: '100%', height: '100%', padding: 10 }}>
+      <Wrapper style={{ width: '100%', height: '100%', padding: 10 }}>
         <TouchableOpacity onPress={this.toggleScrollView}>
           <Text>
             Use {this.state.useScrollView ? 'View' : 'ScrollView'} as a wrapper
@@ -382,7 +387,7 @@ export class TouchableExample extends Component<
             {renderChild(color)}
           </GHTouchable>
         </View>
-      </Component>
+      </Wrapper>
     );
   }
 }