[WIP] chore: Add Fabric support in the macos-example

.github/workflows/example-android-build-check.yml

@@ -28,12 +28,10 @@ jobs:
   build:
     if: github.repository == 'software-mansion/react-native-reanimated'
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        working-directory: [apps/fabric-example]
-      fail-fast: false
+    env:
+      WORKING_DIRECTORY: apps/fabric-example
     concurrency:
-      group: android-${{ matrix.working-directory }}-${{ github.ref }}
+      group: android-${{ github.ref }}
       cancel-in-progress: true
     steps:
       - name: Check out Git repository
@@ -50,5 +48,5 @@ jobs:
         run: yarn install --immutable
 
       - name: Build app
-        working-directory: ${{ matrix.working-directory }}/android
+        working-directory: ${{ env.WORKING_DIRECTORY }}/android
         run: ./gradlew assembleDebug --build-cache -PreactNativeArchitectures=arm64-v8a

.github/workflows/example-ios-build-check.yml

@@ -32,12 +32,10 @@ jobs:
   build:
     if: github.repository == 'software-mansion/react-native-reanimated'
     runs-on: macos-14
-    strategy:
-      matrix:
-        working-directory: [apps/fabric-example]
-      fail-fast: false
+    env:
+      WORKING_DIRECTORY: apps/fabric-example
     concurrency:
-      group: ios-${{ matrix.working-directory }}-${{ github.ref }}
+      group: ios-${{ github.ref }}
       cancel-in-progress: true
     steps:
       - name: Check out Git repository
@@ -47,11 +45,11 @@ jobs:
         run: yarn install --immutable
       # TODO: Add caching for node_modules and artifacts that will work with monorepo setup.
       - name: Install Pods
-        working-directory: ${{ matrix.working-directory }}/ios
+        working-directory: ${{ env.WORKING_DIRECTORY }}/ios
         run: |
           bundle install
           bundle exec pod install
 
       - name: Build app
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: ${{ env.WORKING_DIRECTORY }}
         run: yarn react-native run-ios --no-packager

.github/workflows/example-macos-build-check.yml

@@ -48,7 +48,9 @@ jobs:
 
       - name: Install Pods
         working-directory: ${{ env.WORKING_DIRECTORY }}/macos
-        run: bundle install && bundle exec pod update # There's some bug on the macOS runners for pod installation and this is the workaround.
+        run: |
+          bundle install
+          bundle exec pod install
 
       - name: Build app
         working-directory: ${{ env.WORKING_DIRECTORY }}

.github/workflows/example-typescript-check-and-lint.yml

@@ -1,6 +1,9 @@
 name: Example Typescript check and lint
 env:
   YARN_ENABLE_HARDENED_MODE: 0
+  TYPE_CHECK_DIRECTORIES: >-
+    apps/common-app
+    apps/tvos-example
 on:
   pull_request:
   merge_group:
@@ -47,14 +50,11 @@ jobs:
 
       - name: Check types
         working-directory: ${{ matrix.working-directory }}
-        if: ${{ matrix.working-directory != 'apps/web-example' }}
+        if: ${{ contains(env.TYPE_CHECK_DIRECTORIES, matrix.working-directory) }}
         run: yarn tsc --noEmit
-      - name: Check types
-        working-directory: ${{ matrix.working-directory }}
-        if: ${{ matrix.working-directory == 'apps/web-example' }}
-        run: yarn tsc --noEmit --baseUrl ../..
       - name: Lint
         working-directory: ${{ matrix.working-directory }}
+        if: ${{ contains(env.TYPE_CHECK_DIRECTORIES, matrix.working-directory) }}
         run: yarn lint
       - name: Build WebExample
         working-directory: ${{ matrix.working-directory }}

.gitignore

@@ -52,6 +52,7 @@ apple/Pods/
 
 # generated by bob
 lib/
+!apps/**/lib/
 react-native-reanimated-tests.js
 
 # Eclipse

apps/common-app/.eslintignore

@@ -0,0 +1 @@
+scripts

apps/common-app/package.json

@@ -10,41 +10,50 @@
     "type:check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@react-native-async-storage/async-storage": "*",
-    "@react-native-clipboard/clipboard": "*",
-    "@react-native-community/slider": "*",
-    "@react-native-masked-view/masked-view": "*",
-    "@react-navigation/bottom-tabs": "*",
-    "@react-navigation/native": "*",
-    "@react-navigation/native-stack": "*",
-    "@react-navigation/stack": "*",
-    "@shopify/flash-list": "*",
-    "d3-shape": "*",
-    "react": "*",
-    "react-dom": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": "*",
-    "react-native-pager-view": "*",
-    "react-native-reanimated": "*",
-    "react-native-safe-area-context": "*",
-    "react-native-screens": "*",
-    "react-native-svg": "*",
-    "react-native-web": "*",
-    "react-strict-dom": "*"
+    "react-native": "*"
   },
-  "devDependencies": {
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-native-fontawesome": "^0.3.2",
+    "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "2.1.0",
     "@react-native-clipboard/clipboard": "^1.15.0",
     "@react-native-community/slider": "4.5.5",
     "@react-native-masked-view/masked-view": "0.3.2",
     "@react-navigation/bottom-tabs": "^7.0.0",
+    "@react-navigation/drawer": "^7.1.1",
     "@react-navigation/native": "^7.0.14",
     "@react-navigation/native-stack": "^7.0.0",
     "@react-navigation/stack": "^7.1.1",
     "@shopify/flash-list": "patch:@shopify/flash-list@npm%3A1.7.2#~/.yarn/patches/@shopify-flash-list-npm-1.7.2-2a363895ca.patch",
+    "d3-shape": "^3.2.0",
+    "eslint-plugin-reanimated": "workspace:*",
+    "react": "18.3.1",
+    "react-native-gesture-handler": "2.22.0",
+    "react-native-pager-view": "6.6.1",
+    "react-native-reanimated": "workspace:*",
+    "react-native-safe-area-context": "5.1.0",
+    "react-native-screens": "4.5.0",
+    "react-native-svg": "15.11.1",
+    "react-strict-dom": "0.0.27"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
+    "@react-native/babel-preset": "0.77.0-rc.6",
+    "@react-native/eslint-config": "0.77.0-rc.6",
+    "@react-native/metro-config": "0.77.0-rc.6",
+    "@react-native/typescript-config": "0.77.0-rc.6",
     "@tsconfig/react-native": "^3.0.0",
     "@types/d3-shape": "^3.1.1",
-    "d3-shape": "^3.2.0",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
@@ -53,19 +62,15 @@
     "eslint-plugin-perfectionist": "^2.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-reanimated": "workspace:*",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "jest": "^29.6.3",
     "madge": "^5.0.1",
     "patch-package": "^8.0.0",
     "prettier": "^3.3.3",
-    "react": "18.3.1",
     "react-native": "0.77.0-rc.6",
-    "react-native-gesture-handler": "2.22.0",
-    "react-native-pager-view": "6.6.1",
-    "react-native-reanimated": "workspace:*",
-    "react-native-safe-area-context": "5.1.0",
-    "react-native-screens": "4.5.0",
-    "react-native-svg": "15.11.1",
-    "react-strict-dom": "0.0.27",
+    "react-native-monorepo-tools": "^1.2.1",
+    "react-test-renderer": "18.3.1",
     "typescript": "~5.3.0",
     "typescript-eslint": "^8.12.2"
   }

apps/common-app/scripts/dependencies.js

@@ -0,0 +1,47 @@
+const path = require('path');
+
+/**
+ * @param {Object<string, string>} dependencies
+ * @param {Set<string>} exclude
+ */
+function resolveDependencies(dependencies = {}, exclude) {
+  return Object.fromEntries(
+    Object.keys(dependencies)
+      .filter((name) => !exclude.has(name))
+      .map((name) => [
+        name,
+        { root: path.resolve(__dirname, `../../../node_modules/${name}`) },
+      ])
+  );
+}
+
+/**
+ * This function will return the dependencies from the common-app package that
+ * aren't listed in the current app's package.json
+ *
+ * @param {string} currentAppDir - The current app directory (e.g. __dirname)
+ * @param {string[]} exclude - The dependencies to exclude from the common-app
+ *   package
+ */
+function getDependencies(currentAppDir = '.', exclude = []) {
+  const commonAppDir = path.resolve(__dirname, '..');
+  const commonAppPkg = require(path.resolve(commonAppDir, 'package.json'));
+
+  const currentAppPkg = require(path.resolve(currentAppDir, 'package.json'));
+
+  const excludedDependencies = new Set([
+    ...Object.keys(currentAppPkg.devDependencies),
+    ...Object.keys(currentAppPkg.dependencies),
+    ...exclude,
+  ]);
+
+  return {
+    // Get all common-app dependencies that aren't already in the current app
+    ...resolveDependencies(commonAppPkg.devDependencies, excludedDependencies),
+    ...resolveDependencies(commonAppPkg.dependencies, excludedDependencies),
+  };
+}
+
+module.exports = {
+  getDependencies,
+};

apps/common-app/src/App.tsx

@@ -12,7 +12,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { colors, flex, radius, text } from '@/theme';
-import { IS_MACOS, IS_WEB, isFabric, noop } from '@/utils';
+import { IS_WEB, isFabric, noop } from '@/utils';
 
 import { CSSApp, ReanimatedApp } from './apps';
 
@@ -75,10 +75,6 @@ const SCREENS = [
 ];
 
 function Navigator() {
-  if (IS_MACOS) {
-    return <ReanimatedApp />;
-  }
-
   const Drawer = createDrawerNavigator();
   const screens = isFabric() || IS_WEB ? SCREENS : SCREENS.reverse();
 

apps/common-app/src/apps/reanimated/examples/WithoutBabelPluginExample.tsx

@@ -4,16 +4,10 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
-import {
-  Gesture,
-  GestureDetector,
-  enableExperimentalWebImplementation,
-} from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-enableExperimentalWebImplementation(true);
-
 function isBabelPluginEnabled() {
   function worklet() {
     'worklet';

apps/fabric-example/metro.config.js

@@ -2,7 +2,9 @@ const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const {
   wrapWithReanimatedMetroConfig,
 } = require('react-native-reanimated/metro-config');
-const { getMetroAndroidAssetsResolutionFix } = require('react-native-monorepo-tools');
+const {
+  getMetroAndroidAssetsResolutionFix,
+} = require('react-native-monorepo-tools');
 const androidAssetsResolutionFix = getMetroAndroidAssetsResolutionFix();
 
 const path = require('path');

apps/fabric-example/package.json

@@ -6,66 +6,15 @@
     "build": "cd ios && bundle install && bundle exec pod update",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "lint": "eslint --max-warnings=0 --ignore-pattern 'common-app/' .",
-    "format": "prettier --write --list-different .",
     "start": "react-native start",
-    "test": "jest"
+    "format": "prettier --write --list-different ."
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@gorhom/portal": "^1.0.14",
-    "@react-native-async-storage/async-storage": "2.1.0",
-    "@react-native-clipboard/clipboard": "^1.15.0",
-    "@react-native-community/slider": "4.5.5",
-    "@react-native-masked-view/masked-view": "0.3.2",
-    "@react-navigation/drawer": "^7.1.1",
-    "@react-navigation/native": "^7.0.14",
-    "@react-navigation/native-stack": "^7.0.0",
-    "@shopify/flash-list": "patch:@shopify/flash-list@npm%3A1.7.2#~/.yarn/patches/@shopify-flash-list-npm-1.7.2-2a363895ca.patch",
     "common-app": "workspace:*",
-    "react": "18.3.1",
-    "react-native": "0.77.0-rc.6",
-    "react-native-gesture-handler": "2.22.0",
-    "react-native-pager-view": "6.6.1",
-    "react-native-reanimated": "workspace:*",
-    "react-native-safe-area-context": "5.1.0",
-    "react-native-screens": "4.5.0",
-    "react-native-svg": "15.11.1"
+    "react-native": "0.77.0-rc.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
-    "@babel/runtime": "^7.25.0",
-    "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-android": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
-    "@react-native/babel-preset": "0.77.0-rc.6",
-    "@react-native/eslint-config": "0.77.0-rc.6",
-    "@react-native/metro-config": "0.77.0-rc.6",
-    "@react-native/typescript-config": "0.77.0-rc.6",
-    "@types/jest": "^29.5.13",
-    "@types/react": "^18.2.6",
-    "@types/react-test-renderer": "^18.0.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-no-relative-import-paths": "patch:eslint-plugin-no-relative-import-paths@npm%3A1.5.5#~/.yarn/patches/eslint-plugin-no-relative-import-paths-npm-1.5.5-8fb4e4bf7a.patch",
-    "eslint-plugin-perfectionist": "^2.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "jest": "^29.6.3",
-    "madge": "^5.0.1",
-    "patch-package": "^8.0.0",
-    "prettier": "^3.3.3",
-    "react-native-monorepo-tools": "^1.2.1",
-    "react-test-renderer": "18.3.1",
-    "typescript": "~5.3.0",
-    "typescript-eslint": "^8.12.2"
+    "prettier": "^3.3.3"
   },
   "engines": {
     "node": ">=18"

apps/fabric-example/react-native.config.js

@@ -1,8 +1,9 @@
-/** @type {import('@react-native-community/cli-types').Config} */
+/** This file is required to properly resolve native dependencies */
+const { getDependencies } = require('../common-app/scripts/dependencies');
+
+const dependencies = getDependencies(__dirname);
+
 module.exports = {
-  project: {
-    ios: {},
-    android: {},
-  },
+  dependencies,
   assets: ['./assets/fonts/'],
 };