feat(iOS): Add a useLegacy flag to switch between the old/new iOS implementation (#783)

* wip: unsuspicious changes

* wip: unsuspicious changes v2

* FABRIC NEW IMPL -> OLD IMPL

* wip: bring back useLegacy on the RN side

* wip: bring back duplicate types to fix codegen issues

* wip: remove #705 related code for now

* wip: old/new impl division first draft

* wip: old/new impl division continued

* wip: old/new impl v3

* wip: add a `LEGACY_` prefix to all legacy implementation-related symbols

* wip: fix styles for new implementation on Fabric

* wip: move old/new impl into separate folders

* wip: fix old impl fabric symbol names

* wip: xcode changes

* wip: clean up & unify the naming convention

* wip: fix linter issues

* wip: fix styles for new implementation on Paper

* wip: make Fabric example run on another port by default to make it possible to run both examples in parallel

* wip: implement an abstraction over native commands invocations to reduce branching

* refactor: remove the unnecessary value for boolean props

* fix: bump react-native-safe-area-context to a Fabric-enabled version

* feat: bring back & adjust the `bootstrap-fabric` script

* feat: adjust the home screen title depending on the used architecture

* chore: update example/Podfile.lock

* chore: update an Xcode project file after building

* ci: make next branch events trigger ios/android build workflows

* chore: remove commented-out code related to #705 for now

* chore: add legacy implementation explanation comment

* wip: Android fixes

* fix: unnecessary comma in MainActivity.java

* feat: readme makeover

* chore: bump react-native-screens & react-native-gesture-handler in example

* refactor(android): extract module name to shared variable, add comment for context

* chore: remove unnecessary yarn.lock deps

* chore(ios): bring back removed build flags

* chore(ios): remove unnecessary concurrentRootEnabled method

According to React Native Upgrade Helper, this method is to be removed when updating to RN 0.72:
https://react-native-community.github.io/upgrade-helper/?from=0.71.14&to=0.72.0#RnDiffApp-ios-RnDiffApp-AppDelegate.mm

* fix(android): adjust incorrect param type on Fabric

* chore: remove unnecessary tsconfig.json comment

* chore(ios): bring back (currently unused) code related to #712 and #705

Author: igorbej

.github/workflows/android.yml

@@ -4,13 +4,15 @@ on:
   pull_request:
     branches:
       - master
+      - next
     paths:
       - '.github/workflows/android.yml'
       - 'android/**'
       - 'example/android/**'
   push:
     branches:
       - master
+      - next
 
 concurrency:
   group: ${{ github.ref }}-android

.github/workflows/ios.yml

@@ -4,13 +4,15 @@ on:
   pull_request:
     branches:
       - master
+      - next
     paths:
       - '.github/workflows/ios.yml'
       - 'ios/**'
       - 'example/ios/**'
   push:
     branches:
       - master
+      - next
 
 concurrency:
   group: ${{ github.ref }}-ios

README.md

@@ -8,7 +8,10 @@
 [![iOS Build](https://github.com/callstack/react-native-pager-view/actions/workflows/ios.yml/badge.svg)](https://github.com/callstack/react-native-pager-view/actions/workflows/ios.yml)
 [![Android Build](https://github.com/callstack/react-native-pager-view/actions/workflows/android.yml/badge.svg)](https://github.com/callstack/react-native-pager-view/actions/workflows/android.yml)
 
-This component allows the user to swipe left and right through pages of data. Under the hood it is using the native [Android ViewPager](https://developer.android.com/reference/android/support/v4/view/ViewPager) and the [iOS UIPageViewController](https://developer.apple.com/documentation/uikit/uipageviewcontroller) implementations. [See it in action!](https://github.com/callstack/react-native-pager-view#preview)
+PagerView allows the user to swipe left and right through pages of data.
+It leverages the native [Android ViewPager2](https://developer.android.com/jetpack/androidx/releases/viewpager2)
+and [iOS UIScrollView](https://developer.apple.com/documentation/uikit/uiscrollview) under the hood.
+[See it in action!](https://github.com/callstack/react-native-pager-view#preview)
 
 <br/>
 <p align="center">
@@ -17,22 +20,80 @@ This component allows the user to swipe left and right through pages of data. Un
 
 <br/>
 
-## Versions
+## Getting started
 
-| 4.x        | 5.x         |
-| ---------- | ----------- |
-| iOS        | iOS support |
-| ViewPager1 | ViewPager2  |
+Install the library with:
 
-## Migration
+```sh
+yarn add react-native-pager-view
+```
 
-In version **6.x** support for `transitionStyle` property has been dropped. More information [here](https://github.com/callstack/react-native-pager-view/blob/master/MIGRATION.md).
+or:
 
-`"@react-native-community/viewpager"` library has been changed to `react-native-pager-view`. Here you can find more information, how to migrate pager view to the latest [version](https://github.com/callstack/react-native-pager-view/blob/master/MIGRATION.md)
+```sh
+npm install react-native-pager-view
+```
 
-## Getting started
+## Migration from `@react-native-community/viewpager`
+
+The `@react-native-community/viewpager` library has been moved and now lives here, in the `react-native-pager-view` repo.
+[Here](https://github.com/callstack/react-native-pager-view/blob/master/MIGRATION.md) you can find
+more information on how to migrate PagerView to the latest version.
+
+## Versions & compatibility
+
+The underlying iOS/Android native implementations of PagerView have changed over the years.
+Here's an overview of the implementation details throughout the library's lifespan:
+
+|         | `1.x.x`     | `2.x.x`                | `5.0.8`                | `7.x.x`        |
+| ------- | ----------- | ---------------------- | ---------------------- | -------------- |
+| iOS     | ❌          | `UIPageViewController` | `UIPageViewController` | `UIScrollView` |
+| Android | `ViewPager` | `ViewPager`            | `ViewPager2`           | `ViewPager2`   |
+
+### Legacy iOS implementation support (`UIPageViewController`)
+
+As per the table above, the iOS implementation of this library has been rewritten to use
+[`UIScrollView`](https://developer.apple.com/documentation/uikit/uiscrollview) over
+[`UIPageViewController`](https://developer.apple.com/documentation/uikit/uipageviewcontroller).
+
+For backwards-compatibility purposes, the old iOS implementation is still supported, however — simply pass `true` to
+the `useLegacy` boolean prop to switch the used implementation back to `UIPageViewController`.
+
+### Other notes
+
+In version **6.x.x** the support for the iOS `transitionStyle` property has been dropped.
+More information [here](https://github.com/callstack/react-native-pager-view/blob/master/MIGRATION.md).
+
+## New architecture support (Fabric)
+
+This library supports both architectures — Paper and Fabric!
 
-`yarn add react-native-pager-view`
+To properly migrate to the new architecture and enable it in your app consult the newest
+[docs](https://reactnative.dev/docs/new-architecture-app-intro).
+
+From the perspective of PagerView, the steps required to make the library work with Fabric are as follows:
+
+### iOS
+
+Install pods the usual way, with the `RCT_NEW_ARCH_ENABLED` flag set, e.g.:
+
+```sh
+cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
+```
+
+### Android
+
+In the `android/gradle.properties` file, set `newArchEnabled` to `true` and build the app, e.g.:
+
+```sh
+yarn android
+```
+
+If you have issues running the Android build, you can try generating the Codegen files before the build using:
+
+```sh
+cd android && ./gradlew generateCodegenArtifactsFromSchema
+```
 
 ## Linking
 
@@ -133,7 +194,7 @@ const styles = StyleSheet.create({
 
 ## Advanced usage
 
-For advanced usage please take a look into our [example project](https://github.com/callstack/react-native-pager-view/blob/master/example/src/BasicPagerViewExample.tsx)
+For advanced usage please take a look into our [example project](https://github.com/callstack/react-native-pager-view/blob/master/example/src/BasicPagerViewExample.tsx).
 
 ## API
 
@@ -188,7 +249,7 @@ requestAnimationFrame(() => refPagerView.current?.setPage(index));
 
 ## Reanimated onPageScroll handler
 
-An example can be found [here](https://github.com/callstack/react-native-pager-view/blob/master/example/src/ReanimatedOnPageScrollExample.tsx)
+An example can be found [here](https://github.com/callstack/react-native-pager-view/blob/master/example/src/ReanimatedOnPageScrollExample.tsx).
 
 #### Instructions
 

android/src/fabric/java/com/reactnativepagerview/LEGACY_PagerViewViewManager.kt

@@ -0,0 +1,17 @@
+package com.reactnativepagerview
+
+import com.facebook.react.uimanager.ViewGroupManager
+import android.widget.FrameLayout
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+
+// Note: The LEGACY_ variant is an iOS-only feature and the related Android files
+// are only included because of and relevant to auxiliary processes, like Codegen.
+@ReactModule(name = LEGACY_PagerViewViewManagerImpl.NAME)
+class LEGACY_PagerViewViewManager : ViewGroupManager<FrameLayout>() {
+    override fun getName() = LEGACY_PagerViewViewManagerImpl.NAME
+
+    override fun createViewInstance(context: ThemedReactContext): FrameLayout {
+        throw Error("LEGACY_RNCViewPager is an iOS-only feature")
+    }
+}

android/src/fabric/java/com/reactnativepagerview/PagerViewViewManager.kt

@@ -164,6 +164,11 @@ class PagerViewViewManager : ViewGroupManager<NestedScrollableHost>(), RNCViewPa
         return
     }
 
+    @ReactProp(name = "useLegacy")
+    override fun setUseLegacy(view: NestedScrollableHost?, value: Boolean) {
+        return
+    }
+
     fun goTo(root: NestedScrollableHost?, selectedPage: Int, scrollWithAnimation: Boolean) {
         if (root == null) {
             return

android/src/main/java/com/reactnativepagerview/LEGACY_PagerViewViewManagerImpl.kt

@@ -0,0 +1,7 @@
+package com.reactnativepagerview
+
+// Note: The LEGACY_ variant is an iOS-only feature and the related Android files
+// are only included because of and relevant to auxiliary processes, like Codegen.
+object LEGACY_PagerViewViewManagerImpl {
+    const val NAME = "LEGACY_RNCViewPager"
+}

android/src/main/java/com/reactnativepagerview/PagerViewViewPackage.kt

@@ -12,6 +12,6 @@ class PagerViewPackage : ReactPackage {
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return listOf(PagerViewViewManager())
+        return listOf(PagerViewViewManager(), LEGACY_PagerViewViewManager())
     }
 }

android/src/paper/java/com/reactnativepagerview/LEGACY_PagerViewViewManager.kt

@@ -0,0 +1,17 @@
+package com.reactnativepagerview
+
+import com.facebook.react.uimanager.ViewGroupManager
+import android.widget.FrameLayout
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+
+// Note: The LEGACY_ variant is an iOS-only feature and the related Android files
+// are only included because of and relevant to auxiliary processes, like Codegen.
+@ReactModule(name = LEGACY_PagerViewViewManagerImpl.NAME)
+class LEGACY_PagerViewViewManager : ViewGroupManager<FrameLayout>() {
+    override fun getName() = LEGACY_PagerViewViewManagerImpl.NAME
+
+    override fun createViewInstance(context: ThemedReactContext): FrameLayout {
+        throw Error("LEGACY_RNCViewPager is an iOS-only feature")
+    }
+}

example/android/app/src/main/java/com/pagerviewexample/MainActivity.java

@@ -32,6 +32,9 @@ protected ReactActivityDelegate createReactActivityDelegate() {
         this,
         getMainComponentName(),
         // If you opted-in for the New Architecture, we enable the Fabric Renderer.
-        DefaultNewArchitectureEntryPoint.getFabricEnabled());
+        DefaultNewArchitectureEntryPoint.getFabricEnabled() // fabricEnabled
+        // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18).
+        // DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled // TODO: why has this been deleted?
+        );
   }
 }

example/ios/PagerViewExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>