Unify example apps (software-mansion#4288)

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

Note: This is a huge PR, please review the commits one-by-one.

### Changes

- Create app package that holds the common code for all example apps +
add CI checks
- Move all examples from Example, FabricExample and WebExample to app
directory
- Use `App.tsx` from app directory in Example, FabricExample and
WebExample apps
- Use `export default function` wherever possible
- Use `NativeStackNavigationProp` type instead of `StackNavigationProp`
in SET examples and remove dependency
- Remove test, test-suite and e2e directories and Detox configuration
- Regenerate Example app using `npx react-native@next ReanimatedExample
--version 0.71.3 --skip-install`
- Use autolinking instead of manual linking in Example app (Android &
iOS) like in FabricExample
- Use original TypeScript and ESLint configuration in Example and
FabricExample apps
- Move `react-native-reanimated-tests.tsx` from FabricExample to
`__typetests__` (as in react-native repo)

### TODO

- [ ] Check apps in release mode

### Next steps

- [ ] Make example list hierarchical
- [ ] WebExample takes too long to bundle
- [ ] Don't return to home screen after fast refresh on web

## Test plan

Check if Example, FabricExample and WebExample work properly.

.github/workflows/static-example-apps-checks.yml

@@ -39,4 +39,4 @@ jobs:
         run: yarn tsc --noEmit
       - name: Lint
         working-directory: ${{ matrix.working-directory }}
-        run: yarn lint:js
+        run: yarn lint

.github/workflows/validate-app.yml

@@ -0,0 +1,37 @@
+name: Validate app
+on:
+  pull_request:
+    paths:
+      - '.github/workflows/validate-app.yml'
+      - 'app/**'
+  push:
+    branches:
+      - main
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    concurrency:
+      group: app-${{ github.ref }}
+      cancel-in-progress: true
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'yarn'
+      - name: Install node dependencies
+        run: yarn
+      - name: Install app dependencies
+        working-directory: app
+        run: yarn
+      - name: Check types
+        working-directory: app
+        run: yarn type:check
+      - name: Lint with ESLint
+        working-directory: app
+        run: yarn lint:eslint
+      - name: Lint with Prettier
+        working-directory: app
+        run: yarn lint:prettier

Example/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: '@react-native',
+  extends: '@react-native-community',
 };

Example/.gitignore

@@ -61,7 +61,3 @@ yarn-error.log
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
-
-# Expo
-/.expo
-/web-build

Example/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

Example/App.tsx

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

Example/android/app/build.gradle

@@ -102,9 +102,6 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
-
-        testBuildType System.getProperty('testBuildType', 'debug')
-        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
     }
 
     splits {
@@ -154,13 +151,6 @@ android {
 }
 
 dependencies {
-    implementation(project(':react-native-reanimated')) {
-        exclude group:'com.facebook.fbjni' // resolves "Duplicate class com.facebook.jni.CppException"
-        // TODO: use `implementation "com.facebook.fbjni:fbjni-java-only:" + FBJNI_VERSION` in build.gradle
-    }
-
-    androidTestImplementation('com.wix:detox:+')
-
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
 

Example/android/app/src/main/java/com/swmansion/reanimated/example/MainApplication.java

@@ -8,7 +8,6 @@
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactNativeHost;
 import com.facebook.soloader.SoLoader;
-import com.swmansion.reanimated.ReanimatedPackage;
 import java.util.List;
 
 public class MainApplication extends Application implements ReactApplication {
@@ -26,7 +25,6 @@ protected List<ReactPackage> getPackages() {
           List<ReactPackage> packages = new PackageList(this).getPackages();
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // packages.add(new MyReactNativePackage());
-          packages.add(new ReanimatedPackage());
           return packages;
         }
 

Example/android/gradle.properties

@@ -42,3 +42,5 @@ newArchEnabled=false
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
+
+disableMultipleInstancesCheck=true

Example/android/settings.gradle

@@ -1,8 +1,4 @@
 rootProject.name = 'ReanimatedExample'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
-
-include ':react-native-reanimated'
-project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../../android')
-
 include ':app'
 includeBuild('../node_modules/react-native-gradle-plugin')

Example/app.json

@@ -1,11 +1,4 @@
 {
   "name": "ReanimatedExample",
-  "displayName": "ReanimatedExample",
-  "expo": {
-    "name": "ReanimatedExample",
-    "privacy": "unlisted",
-    "sdkVersion": "34.0.0",
-    "version": "1.0.0",
-    "platforms": ["ios", "android", "web"]
-  }
-}
+  "displayName": "ReanimatedExample"
+}

Example/babel.config.js

@@ -1,44 +1,4 @@
-module.exports = (api) => {
-  const isWeb = api.caller(isTargetWeb);
-
-  return {
-    presets: [
-      '@babel/preset-typescript',
-      'module:metro-react-native-babel-preset',
-    ],
-    plugins: [
-      '@babel/plugin-proposal-export-namespace-from',
-      '@babel/plugin-proposal-optional-chaining',
-      '@babel/plugin-transform-modules-commonjs',
-      '../plugin',
-      isWeb
-        ? [
-            'module-resolver',
-            {
-              alias: {
-                'react-native-reanimated': './Animated/',
-              },
-            },
-          ]
-        : [
-            'module-resolver',
-            {
-              alias: {
-                'react-native-reanimated': '../src/index',
-                react: './node_modules/react',
-                'react-native': './node_modules/react-native',
-                '@babel': './node_modules/@babel',
-                'hoist-non-react-statics':
-                  './node_modules/hoist-non-react-statics',
-                invariant: './node_modules/invariant',
-                'prop-types': './node_modules/prop-types',
-              },
-            },
-          ],
-    ].filter(Boolean),
-  };
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['../plugin'],
 };
-
-function isTargetWeb(caller) {
-  return caller && caller.name === 'babel-loader';
-}

Example/index.js

@@ -1,11 +1,9 @@
-import { AppRegistry, Platform } from 'react-native';
-import { name as appName } from './app.json';
-import App from './src/App';
+/**
+ * @format
+ */
 
-AppRegistry.registerComponent(appName, () => App);
+import {AppRegistry} from 'react-native';
+import App from './App';
+import {name as appName} from './app.json';
 
-// TODO(Bacon): When `expo` has removed Updates, replace this with using the `expo` entry for better error handling
-if (Platform.OS === 'web') {
-  const rootTag = document.getElementById('root');
-  AppRegistry.runApplication(appName, { rootTag });
-}
+AppRegistry.registerComponent(appName, () => App);

Example/ios/Podfile

@@ -45,8 +45,6 @@ target 'ReanimatedExample' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
-  pod 'RNReanimated', :path => '../../'
-
   target 'ReanimatedExampleTests' do
     inherit! :complete
     # Pods for testing