chore: remove fabric example and migrate to 72 (#730)

* chore: remove fabric example and add old arch support for the example

* Apply fixes

* use JS stack instead of the native one

* change to false

* migrate to 72

* fix lint

* change maestro version

* change android workflow

* Revert "change android workflow"

This reverts commit d42ccec.

* upload artifacts

* record a video

* just a basic example

* turn off new architecture

* update podflie.lock

---------

Co-authored-by: Piotr Trocki <[email protected]>

Author: troZee

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: '@react-native',
   globals: {
     expect: true,
     element: true,

.github/workflows/android.yml

@@ -55,21 +55,62 @@ jobs:
             ~/.gradle/wrapper
           key: gradle-${{ runner.os }}-${{ hashFiles('**/*.gradle*') }}-${{ hashFiles('**/gradle/wrapper/gradle-wrapper.properties') }}-${{ hashFiles('**/buildSrc/**/*.kt') }}
 
+      - name: AVD cache
+        uses: actions/cache@v3
+        id: avd-cache
+        with:
+          path: |
+            ~/.android/avd/*
+            ~/.android/adb*
+          key: avd-cache
+
       - name: Install Maestro CLI
-        run: export MAESTRO_VERSION=1.21.3; curl -Ls "https://get.maestro.mobile.dev" | bash
+        run: export MAESTRO_VERSION=1.31.0; curl -Ls "https://get.maestro.mobile.dev" | bash
 
       - name: Add Maestro to path
         run: echo "${HOME}/.maestro/bin" >> $GITHUB_PATH
 
+      - name: create AVD and generate snapshot for caching
+        if: steps.avd-cache.outputs.cache-hit != 'true'
+        uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: 29
+          force-avd-creation: false
+          emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none
+          disable-animations: false
+          cores: 2
+          ram-size: 4096M
+          profile: Nexus 6
+          script: echo "Generated AVD snapshot for caching."
+
       - name: Run Android Emulator and app
         uses: reactivecircus/android-emulator-runner@v2
         with:
           api-level: 29
-          arch: x86_64
-          target: google_apis
           force-avd-creation: false
           emulator-options: -no-snapshot-save -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none
-          disable-animations: true
+          disable-animations: false
+          cores: 2
+          ram-size: 4096M
+          profile: Nexus 6
           script: |
             yarn run-example-android
             yarn test:e2e:android
+
+      - name: Upload report
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: E2E Report
+          path: |
+            ${{ github.workspace }}/*.mp4
+            ${{ github.workspace }}/*.png
+            ${{ github.workspace }}/report*.xml
+            ~/.maestro/tests/**/*
+
+      - name: Store tests result
+        uses: actions/upload-artifact@v3
+        with:
+          name: e2e_android_report
+          path: |
+            report.xml

.gitignore

@@ -64,13 +64,15 @@ test-butler-app.apk
 example/vendor
 
 #Example
-fabricexample/ios/Pods
-fabricexample/vendor
-fabricexample/android/app/.cxx
+example/ios/Pods
+example/vendor
 .lefthookrc
 lefthook.yml
 
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
+
+# testing
+/coverage
 .cxx

README.md

@@ -20,7 +20,7 @@ This component allows the user to swipe left and right through pages of data. Un
 ## Versions
 
 | 4.x        | 5.x and above |
-| ---------- | -----------   |
+| ---------- | ------------- |
 | iOS        | iOS support   |
 | ViewPager1 | ViewPager2    |
 
@@ -34,29 +34,6 @@ In version **6.x** support for `transitionStyle` property has been dropped. More
 
 `yarn add react-native-pager-view`
 
-## New architecture setup (Fabric)
-
-This library supports new architecture! We have two example folders one for each architecture. If you are using this library in your own project there some extra steps needed. 
-### iOS
-Install pods with this flag inside `ios` folder: 
-```sh
-RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
-``` 
-(Inside of `fabricexample` the `RCT_NEW_ARCH_ENABLED` is already set to true by default inside `Podfile`)
-
-### Android
-Set `newArchEnabled` to `true` inside `android/gradle.properties` (this flag is already set to true in `fabricexample`) and then run: 
-```sh
-yarn android
-```
-
-If you have issues with running android build you can try to generate codegen before the build using this command: 
-
-```sh
-cd android && ./gradlew generateCodegenArtifactsFromSchema
-```
-
-
 ## Linking
 
 ### >= 0.60
@@ -172,8 +149,8 @@ For advanced usage please take a look into our [example project](https://github.
 | `orientation: Orientation`                                           |                                                                                       Set `horizontal` or `vertical` scrolling orientation (it does **not** work dynamically)                                                                                       |   both   |
 | `overScrollMode: OverScollMode`                                      |                                                                              Used to override default value of overScroll mode. Can be `auto`, `always` or `never`. Defaults to `auto`                                                                              | Android  |
 | `offscreenPageLimit: number`                                         | Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0. | Android  |
-| `overdrag: boolean`                                                  |                                                                                       Allows for overscrolling after reaching the end or very beginning or pages. Defaults to `false`                                                                               |   iOS    |
-| `layoutDirection: ('ltr' / 'rtl' / 'locale')`                        |                                                                                       Specifies layout direction. Use `ltr` or `rtl` to set explicitly or `locale` to deduce from the default language script of a locale. Defaults to `locale`                     |   both    |
+| `overdrag: boolean`                                                  |                                                                                   Allows for overscrolling after reaching the end or very beginning or pages. Defaults to `false`                                                                                   |   iOS    |
+| `layoutDirection: ('ltr' / 'rtl' / 'locale')`                        |                                                      Specifies layout direction. Use `ltr` or `rtl` to set explicitly or `locale` to deduce from the default language script of a locale. Defaults to `locale`                                                      |   both   |
 
 | Method                                     |                                                                                                         Description                                                                                                          | Platform |
 | ------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------: |
@@ -205,7 +182,7 @@ requestAnimationFrame(() => refPagerView.current?.setPage(index));
 
 ### iOS
 
-|                            horizontal                                |                              vertical                                  |
+|                              horizontal                              |                                vertical                                |
 | :------------------------------------------------------------------: | :--------------------------------------------------------------------: |
 | <img src="img/ios-viewpager-scroll.gif" alt="ViewPager" width="325"> | <img src="img/ios-viewpager-vertical.gif" alt="ViewPager" width="325"> |
 
@@ -220,37 +197,38 @@ To attach reanimated handler with `onPageScroll` follow the below steps.
 ```jsx
 // 1. Define the handler
 function usePageScrollHandler(handlers, dependencies) {
-  const {context, doDependenciesDiffer} = useHandler(handlers, dependencies);
+  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
   const subscribeForEvents = ['onPageScroll'];
 
   return useEvent(
-    event => {
+    (event) => {
       'worklet';
-      const {onPageScroll} = handlers;
+      const { onPageScroll } = handlers;
       if (onPageScroll && event.eventName.endsWith('onPageScroll')) {
         onPageScroll(event, context);
       }
     },
     subscribeForEvents,
-    doDependenciesDiffer,
+    doDependenciesDiffer
   );
 }
-  
+
 // 2. Attach the event handler
-import PagerView from "react-native-pager-view";
-import Animated from "react-native-reanimated";
+import PagerView from 'react-native-pager-view';
+import Animated from 'react-native-reanimated';
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
 const pageScrollHandler = usePageScrollHandler({
-    onPageScroll: e => {
-      'worklet';
-      offset.value = e.offset;
-      console.log(e.offset, e.position);
-    },
+  onPageScroll: (e) => {
+    'worklet';
+    offset.value = e.offset;
+    console.log(e.offset, e.position);
+  },
 });
 
-<AnimatedPagerView onPageScroll={pageScrollHandler}/>
+<AnimatedPagerView onPageScroll={pageScrollHandler} />;
 ```
+
 ## License
 
 MIT

example/.node-version

@@ -1,5 +1,5 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '>= 2.6.10'
-gem 'cocoapods', '>= 1.11.3'
+ruby ">= 2.6.10"
+gem 'cocoapods', '~> 1.12'

example/Gemfile

@@ -1,41 +1,40 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    CFPropertyList (3.0.5)
+    CFPropertyList (3.0.6)
       rexml
-    activesupport (6.1.7.6)
+    activesupport (7.0.7.2)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-      zeitwerk (~> 2.3)
-    addressable (2.8.1)
+    addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
     atomos (0.1.3)
     claide (1.1.0)
-    cocoapods (1.11.3)
+    cocoapods (1.12.1)
       addressable (~> 2.8)
       claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.11.3)
+      cocoapods-core (= 1.12.1)
       cocoapods-deintegrate (>= 1.0.3, < 2.0)
-      cocoapods-downloader (>= 1.4.0, < 2.0)
+      cocoapods-downloader (>= 1.6.0, < 2.0)
       cocoapods-plugins (>= 1.0.0, < 2.0)
       cocoapods-search (>= 1.0.0, < 2.0)
-      cocoapods-trunk (>= 1.4.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
       cocoapods-try (>= 1.1.0, < 2.0)
       colored2 (~> 3.1)
       escape (~> 0.0.4)
       fourflusher (>= 2.3.0, < 3.0)
       gh_inspector (~> 1.0)
       molinillo (~> 0.8.0)
       nap (~> 1.0)
-      ruby-macho (>= 1.0, < 3.0)
+      ruby-macho (>= 2.3.0, < 3.0)
       xcodeproj (>= 1.21.0, < 2.0)
-    cocoapods-core (1.11.3)
-      activesupport (>= 5.0, < 7)
+    cocoapods-core (1.12.1)
+      activesupport (>= 5.0, < 8)
       addressable (~> 2.8)
       algoliasearch (~> 1.0)
       concurrent-ruby (~> 1.1)
@@ -56,7 +55,7 @@ GEM
     colored2 (3.1.2)
     concurrent-ruby (1.2.2)
     escape (0.0.4)
-    ethon (0.15.0)
+    ethon (0.16.0)
       ffi (>= 1.15.0)
     ffi (1.15.5)
     fourflusher (2.3.1)
@@ -65,14 +64,14 @@ GEM
     httpclient (2.8.3)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
-    json (2.6.2)
+    json (2.6.3)
     minitest (5.19.0)
     molinillo (0.8.0)
     nanaimo (0.3.0)
     nap (1.1.0)
     netrc (0.11.0)
     public_suffix (4.0.7)
-    rexml (3.2.5)
+    rexml (3.2.6)
     ruby-macho (2.5.1)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
@@ -85,13 +84,12 @@ GEM
       colored2 (~> 3.1)
       nanaimo (~> 0.3.0)
       rexml (~> 3.2.4)
-    zeitwerk (2.6.11)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  cocoapods (>= 1.11.3)
+  cocoapods (~> 1.12)
 
 RUBY VERSION
    ruby 2.7.5p203

example/Gemfile.lock

@@ -153,6 +153,9 @@ dependencies {
     implementation("com.facebook.react:react-android")
 
     implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
+    implementation 'androidx.appcompat:appcompat:1.6.1'
+    implementation 'com.google.android.material:material:1.4.+'
+    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
 
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {

example/android/app/build.gradle

@@ -1,25 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
 
     <application
-      android:name=".MainApplication"
-      android:label="@string/app_name"
-      android:icon="@mipmap/ic_launcher"
-      android:roundIcon="@mipmap/ic_launcher_round"
-      android:allowBackup="false"
-      android:theme="@style/AppTheme">
-      <activity
-        android:name=".MainActivity"
+        android:name=".MainApplication"
+        android:allowBackup="false"
+        android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
-        android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize"
-        android:exported="true">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:theme="@style/AppTheme">
+        <activity
+            android:name=".MainActivity"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+            android:exported="true"
+            android:label="@string/app_name"
+            android:launchMode="singleTask"
+            android:windowSoftInputMode="adjustResize">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
     </application>
-</manifest>
+
+</manifest>

example/android/app/src/main/AndroidManifest.xml

@@ -1,10 +1,5 @@
 package com.pagerviewexample;
 
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.ReactRootView;
-
-
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
@@ -32,9 +27,6 @@ protected ReactActivityDelegate createReactActivityDelegate() {
         this,
         getMainComponentName(),
         // If you opted-in for the New Architecture, we enable the Fabric Renderer.
-        DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled
-        // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18).
-        DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled
-        );
+        DefaultNewArchitectureEntryPoint.getFabricEnabled());
   }
 }