WIP feat(ios): add useLegacy flag

.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

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

@@ -0,0 +1,15 @@
+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
+
+@ReactModule(name = "RNCScrollViewPager")
+class EmptyPagerViewViewManager : ViewGroupManager<FrameLayout>() {
+    override fun getName() = "RNCScrollViewPager"
+
+    override fun createViewInstance(context: ThemedReactContext): FrameLayout {
+        throw Error("RNCScrollViewPager is only supported for iOS")
+    }
+}

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

@@ -201,4 +201,8 @@ class PagerViewViewManager : ViewGroupManager<NestedScrollableHost>(), RNCViewPa
                 PageScrollStateChangedEvent.EVENT_NAME, MapBuilder.of("registrationName", "onPageScrollStateChanged"),
                 PageSelectedEvent.EVENT_NAME, MapBuilder.of("registrationName", "onPageSelected"))
     }
+
+    override fun setUseLegacy(view: NestedScrollableHost?, value: Boolean) {
+
+    }
 }

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(), EmptyPagerViewViewManager())
     }
 }

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

@@ -0,0 +1,16 @@
+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
+
+
+@ReactModule(name = "RNCScrollViewPager")
+class EmptyPagerViewViewManager : ViewGroupManager<FrameLayout>() {
+    override fun getName() = "RNCScrollViewPager"
+
+    override fun createViewInstance(context: ThemedReactContext): FrameLayout {
+        throw Error("RNCScrollViewPager is only supported for iOS")
+    }
+}

example/src/App.tsx

@@ -12,6 +12,7 @@ import {
   Alert,
   I18nManager,
   DevSettings,
+  Platform,
 } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
@@ -33,6 +34,7 @@ import CoverflowExample from './tabView/CoverflowExample';
 import ReanimatedOnPageScrollExample from './ReanimatedOnPageScrollExample';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { LegacyBasicPagerViewExample } from './LegacyBasicPagerViewExample';
 
 const examples = [
   { component: BasicPagerViewExample, name: 'Basic Example' },
@@ -65,6 +67,13 @@ const examples = [
   { component: CoverflowExample, name: 'CoverflowExample' },
 ];
 
+if (Platform.OS === 'ios') {
+  examples.unshift({
+    component: LegacyBasicPagerViewExample,
+    name: '❌ Legacy Basic Example',
+  });
+}
+
 function App() {
   const navigation = useNavigation();
   return (

example/src/LegacyBasicPagerViewExample.tsx

@@ -0,0 +1,70 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View, SafeAreaView, Animated, Text } from 'react-native';
+
+import PagerView from 'react-native-pager-view';
+
+import { LikeCount } from './component/LikeCount';
+import { NavigationPanel } from './component/NavigationPanel';
+import { useNavigationPanel } from './hook/useNavigationPanel';
+
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
+
+export function LegacyBasicPagerViewExample() {
+  const { ref, ...navigationPanel } = useNavigationPanel();
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <AnimatedPagerView
+        // @ts-ignore
+        testID="pager-view"
+        ref={ref}
+        style={styles.PagerView}
+        initialPage={0}
+        layoutDirection="ltr"
+        overdrag={navigationPanel.overdragEnabled}
+        scrollEnabled={navigationPanel.scrollEnabled}
+        onPageScroll={navigationPanel.onPageScroll}
+        onPageSelected={navigationPanel.onPageSelected}
+        onPageScrollStateChanged={navigationPanel.onPageScrollStateChanged}
+        pageMargin={10}
+        // Lib does not support dynamically orientation change
+        orientation="horizontal"
+        useLegacy
+      >
+        {useMemo(
+          () =>
+            navigationPanel.pages.map((page, index) => (
+              <View
+                testID="pager-view-content"
+                key={page.key}
+                style={page.style}
+                collapsable={false}
+              >
+                <LikeCount />
+                <Text
+                  testID={`pageNumber${index}`}
+                >{`page number ${index}`}</Text>
+              </View>
+            )),
+          [navigationPanel.pages]
+        )}
+      </AnimatedPagerView>
+      <NavigationPanel {...navigationPanel} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  image: {
+    width: 300,
+    height: 200,
+    padding: 20,
+  },
+  PagerView: {
+    flex: 1,
+  },
+});

ios/RNCPagerViewManager.m

@@ -5,7 +5,7 @@ @implementation RNCPagerViewManager
 
 #pragma mark - RTC
 
-RCT_EXPORT_MODULE(RNCViewPager)
+RCT_EXPORT_MODULE(RNCScrollViewPager)
 
 RCT_EXPORT_VIEW_PROPERTY(initialPage, NSInteger)
 RCT_EXPORT_VIEW_PROPERTY(orientation, NSString)

ios/legacy/Fabric/LegacyRNCPagerViewComponentView.h

@@ -0,0 +1,27 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <UIKit/UIKit.h>
+#import <Foundation/Foundation.h>
+#import <React/RCTViewComponentView.h>
+#import "UIViewController+CreateExtension.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNCPagerViewComponentView : RCTViewComponentView <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
+
+@property(strong, nonatomic, readonly) UIPageViewController *nativePageViewController;
+@property(nonatomic, strong) NSMutableArray<UIViewController *> *nativeChildrenViewControllers;
+@property(nonatomic) NSInteger initialPage;
+@property(nonatomic) NSInteger currentIndex;
+@property(nonatomic) NSInteger destinationIndex;
+@property(nonatomic) NSString* layoutDirection;
+@property(nonatomic) BOOL overdrag;
+
+- (void)setPage:(NSInteger)number;
+- (void)setPageWithoutAnimation:(NSInteger)number;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif