diff --git a/.github/workflows/android.yml b/.github/workflows/android.yml
index d442f104..5ba7197b 100644
--- a/.github/workflows/android.yml
+++ b/.github/workflows/android.yml
@@ -4,6 +4,7 @@ on:
pull_request:
branches:
- master
+ - next
paths:
- '.github/workflows/android.yml'
- 'android/**'
@@ -11,6 +12,7 @@ on:
push:
branches:
- master
+ - next
concurrency:
group: ${{ github.ref }}-android
diff --git a/.github/workflows/ios.yml b/.github/workflows/ios.yml
index e5e7030f..f9085a40 100644
--- a/.github/workflows/ios.yml
+++ b/.github/workflows/ios.yml
@@ -4,6 +4,7 @@ on:
pull_request:
branches:
- master
+ - next
paths:
- '.github/workflows/ios.yml'
- 'ios/**'
@@ -11,6 +12,7 @@ on:
push:
branches:
- master
+ - next
concurrency:
group: ${{ github.ref }}-ios
diff --git a/README.md b/README.md
index 3e98f989..b680efa7 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,10 @@
[](https://github.com/callstack/react-native-pager-view/actions/workflows/ios.yml)
[](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)
@@ -17,22 +20,80 @@ This component allows the user to swipe left and right through pages of data. Un
() {
+ override fun getName() = LEGACY_PagerViewViewManagerImpl.NAME
+
+ override fun createViewInstance(context: ThemedReactContext): FrameLayout {
+ throw Error("LEGACY_RNCViewPager is an iOS-only feature")
+ }
+}
diff --git a/android/src/fabric/java/com/reactnativepagerview/PagerViewViewManager.kt b/android/src/fabric/java/com/reactnativepagerview/PagerViewViewManager.kt
index e1c5ca44..72a6b4ea 100644
--- a/android/src/fabric/java/com/reactnativepagerview/PagerViewViewManager.kt
+++ b/android/src/fabric/java/com/reactnativepagerview/PagerViewViewManager.kt
@@ -164,6 +164,11 @@ class PagerViewViewManager : ViewGroupManager(), 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
diff --git a/android/src/main/java/com/reactnativepagerview/LEGACY_PagerViewViewManagerImpl.kt b/android/src/main/java/com/reactnativepagerview/LEGACY_PagerViewViewManagerImpl.kt
new file mode 100644
index 00000000..7cecdc82
--- /dev/null
+++ b/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"
+}
diff --git a/android/src/main/java/com/reactnativepagerview/PagerViewViewPackage.kt b/android/src/main/java/com/reactnativepagerview/PagerViewViewPackage.kt
index 194bf0aa..b09b6e1c 100644
--- a/android/src/main/java/com/reactnativepagerview/PagerViewViewPackage.kt
+++ b/android/src/main/java/com/reactnativepagerview/PagerViewViewPackage.kt
@@ -12,6 +12,6 @@ class PagerViewPackage : ReactPackage {
}
override fun createViewManagers(reactContext: ReactApplicationContext): List> {
- return listOf(PagerViewViewManager())
+ return listOf(PagerViewViewManager(), LEGACY_PagerViewViewManager())
}
}
diff --git a/android/src/paper/java/com/reactnativepagerview/LEGACY_PagerViewViewManager.kt b/android/src/paper/java/com/reactnativepagerview/LEGACY_PagerViewViewManager.kt
new file mode 100644
index 00000000..b202b4c1
--- /dev/null
+++ b/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() {
+ override fun getName() = LEGACY_PagerViewViewManagerImpl.NAME
+
+ override fun createViewInstance(context: ThemedReactContext): FrameLayout {
+ throw Error("LEGACY_RNCViewPager is an iOS-only feature")
+ }
+}
diff --git a/example/android/app/src/main/java/com/pagerviewexample/MainActivity.java b/example/android/app/src/main/java/com/pagerviewexample/MainActivity.java
index a9fb4371..454c5320 100644
--- a/example/android/app/src/main/java/com/pagerviewexample/MainActivity.java
+++ b/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?
+ );
}
}
diff --git a/example/ios/PagerViewExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/example/ios/PagerViewExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
new file mode 100644
index 00000000..18d98100
--- /dev/null
+++ b/example/ios/PagerViewExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+
+
+
+
+ IDEDidComputeMac32BitWarning
+
+
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index a7ea1235..05bdad37 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -377,7 +377,7 @@ PODS:
- glog
- react-native-pager-view (7.0.0-rc.0):
- React-Core
- - react-native-safe-area-context (3.4.1):
+ - react-native-safe-area-context (4.7.4):
- React-Core
- React-NativeModulesApple (0.72.5):
- hermes-engine
@@ -491,7 +491,8 @@ PODS:
- React-perflogger (= 0.72.5)
- RNCMaskedView (0.1.11):
- React
- - RNGestureHandler (1.10.3):
+ - RNGestureHandler (2.13.4):
+ - RCT-Folly (= 2021.07.22.00)
- React-Core
- RNReanimated (3.5.4):
- DoubleConversion
@@ -522,9 +523,9 @@ PODS:
- React-RCTText
- ReactCommon/turbomodule/core
- Yoga
- - RNScreens (3.20.0):
+ - RNScreens (3.27.0):
+ - RCT-Folly (= 2021.07.22.00)
- React-Core
- - React-RCTImage
- RNSVG (12.4.4):
- React-Core
- SocketRocket (0.6.1)
@@ -751,7 +752,7 @@ SPEC CHECKSUMS:
React-jsinspector: aef73cbd43b70675f572214d10fa438c89bf11ba
React-logger: 2e4aee3e11b3ec4fa6cfd8004610bbb3b8d6cca4
react-native-pager-view: 563a43b511eea680f803ab4fb20bd7525fbde2cc
- react-native-safe-area-context: 9e40fb181dac02619414ba1294d6c2a807056ab9
+ react-native-safe-area-context: 2cd91d532de12acdb0a9cbc8d43ac72a8e4c897c
React-NativeModulesApple: 797bc6078d566eef3fb3f74127e6e1d2e945a15f
React-perflogger: cd8886513f68e1c135a1e79d20575c6489641597
React-RCTActionSheet: 726d2615ca62a77ce3e2c13d87f65379cdc73498
@@ -770,9 +771,9 @@ SPEC CHECKSUMS:
React-utils: 7a9918a1ffdd39aba67835d42386f592ea3f8e76
ReactCommon: 91ece8350ebb3dd2be9cef662abd78b6948233c0
RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
- RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+ RNGestureHandler: 6e46dde1f87e5f018a54fe5d40cd0e0b942b49ee
RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87
- RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
+ RNScreens: 3c2d122f5e08c192e254c510b212306da97d2581
RNSVG: ecd661f380a07ba690c9c5929c475a44f432d674
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
Yoga: 86fed2e4d425ee4c6eab3813ba1791101ee153c6
@@ -780,4 +781,4 @@ SPEC CHECKSUMS:
PODFILE CHECKSUM: 3875acd7cb7e8f7782e244f1db71aa5f14571810
-COCOAPODS: 1.13.0
+COCOAPODS: 1.12.1
diff --git a/example/package.json b/example/package.json
index cc026083..e851e822 100644
--- a/example/package.json
+++ b/example/package.json
@@ -16,10 +16,10 @@
"react": "18.2.0",
"react-native": "0.72.5",
"react-native-animated-pagination-dots": "^0.1.73",
- "react-native-gesture-handler": "^1.9.0",
+ "react-native-gesture-handler": "2.13.4",
"react-native-reanimated": "3.5.4",
- "react-native-safe-area-context": "^3.1.9",
- "react-native-screens": "~3.20.0",
+ "react-native-safe-area-context": "^4.4.1",
+ "react-native-screens": "3.27.0",
"react-native-svg": "12.4.4",
"react-native-tab-view": "^3.1.1"
},
@@ -30,6 +30,7 @@
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
+ "@types/jest": "^29.2.1",
"@react-native/metro-config": "^0.72.11",
"@tsconfig/react-native": "^3.0.0",
"@types/react": "^18.0.24",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 16c0af4f..b54d8425 100644
--- a/example/src/App.tsx
+++ b/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 (
@@ -101,6 +110,9 @@ export function Navigation() {
name="PagerView Example"
component={App}
options={{
+ title: global?.nativeFabricUIManager
+ ? 'PagerView Example (Fabric)'
+ : 'PagerView Example',
headerRight: () => (
diff --git a/example/src/LegacyBasicPagerViewExample.tsx b/example/src/LegacyBasicPagerViewExample.tsx
new file mode 100644
index 00000000..eeb3c91e
--- /dev/null
+++ b/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 (
+
+
+ {useMemo(
+ () =>
+ navigationPanel.pages.map((page, index) => (
+
+ {`page number ${index}`}
+
+ )),
+ [navigationPanel.pages]
+ )}
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: 'white',
+ },
+ image: {
+ width: 300,
+ height: 200,
+ padding: 20,
+ },
+ PagerView: {
+ flex: 1,
+ },
+});
diff --git a/example/src/NestPagerView.tsx b/example/src/NestPagerView.tsx
index 6aefd7ba..5968129e 100644
--- a/example/src/NestPagerView.tsx
+++ b/example/src/NestPagerView.tsx
@@ -22,7 +22,7 @@ export function NestPagerView() {
#import "RNCPagerViewComponentView.h"
-#import "RNCPagerScrollView.h"
#import
#import
#import
@@ -21,9 +20,9 @@ @interface RNCPagerViewComponentView ()
+#import
+#import
+#import "UIViewController+CreateExtension.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface LEGACY_RNCPagerViewComponentView : RCTViewComponentView
+
+@property(strong, nonatomic, readonly) UIPageViewController *nativePageViewController;
+@property(nonatomic, strong) NSMutableArray *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
diff --git a/ios/LEGACY/Fabric/LEGACY_RNCPagerViewComponentView.mm b/ios/LEGACY/Fabric/LEGACY_RNCPagerViewComponentView.mm
new file mode 100644
index 00000000..677c55e0
--- /dev/null
+++ b/ios/LEGACY/Fabric/LEGACY_RNCPagerViewComponentView.mm
@@ -0,0 +1,403 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import
+#import "LEGACY_RNCPagerViewComponentView.h"
+#import
+#import
+#import
+#import
+
+#import "RCTFabricComponentsPlugins.h"
+#import "React/RCTConversions.h"
+
+#import
+#import "RCTOnPageScrollEvent.h"
+
+using namespace facebook::react;
+
+@interface LEGACY_RNCPagerViewComponentView ()
+@end
+
+@implementation LEGACY_RNCPagerViewComponentView {
+ LayoutMetrics _layoutMetrics;
+ UIScrollView *scrollView;
+}
+
+- (void)initializeNativePageViewController {
+ const auto &viewProps = *std::static_pointer_cast(_props);
+ NSDictionary *options = @{ UIPageViewControllerOptionInterPageSpacingKey: @(viewProps.pageMargin) };
+ UIPageViewControllerNavigationOrientation orientation = UIPageViewControllerNavigationOrientationHorizontal;
+ switch (viewProps.orientation) {
+ case LEGACY_RNCViewPagerOrientation::Horizontal:
+ orientation = UIPageViewControllerNavigationOrientationHorizontal;
+ break;
+ case LEGACY_RNCViewPagerOrientation::Vertical:
+ orientation = UIPageViewControllerNavigationOrientationVertical;
+ break;
+ }
+ _nativePageViewController = [[UIPageViewController alloc]
+ initWithTransitionStyle: UIPageViewControllerTransitionStyleScroll
+ navigationOrientation:orientation
+ options:options];
+ _nativePageViewController.dataSource = self;
+ _nativePageViewController.delegate = self;
+ _nativePageViewController.view.frame = self.frame;
+ self.contentView = _nativePageViewController.view;
+
+ for (UIView *subview in _nativePageViewController.view.subviews) {
+ if([subview isKindOfClass:UIScrollView.class]){
+ ((UIScrollView *)subview).delegate = self;
+ ((UIScrollView *)subview).delaysContentTouches = NO;
+ scrollView = (UIScrollView *)subview;
+ }
+ }
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+ if (self = [super initWithFrame:frame]) {
+ static const auto defaultProps = std::make_shared();
+ _props = defaultProps;
+ _nativeChildrenViewControllers = [[NSMutableArray alloc] init];
+ _currentIndex = -1;
+ _destinationIndex = -1;
+ _layoutDirection = @"ltr";
+ _overdrag = NO;
+ }
+
+ return self;
+}
+
+- (void)willMoveToSuperview:(UIView *)newSuperview {
+ if (newSuperview != nil) {
+ [self initializeNativePageViewController];
+ [self goTo:_currentIndex animated:NO];
+ }
+}
+
+#pragma mark - React API
+
+- (void)mountChildComponentView:(UIView *)childComponentView index:(NSInteger)index {
+ UIViewController *wrapper = [[UIViewController alloc] initWithView:childComponentView];
+ [_nativeChildrenViewControllers insertObject:wrapper atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView *)childComponentView index:(NSInteger)index {
+ [[_nativeChildrenViewControllers objectAtIndex:index].view removeFromSuperview];
+ [_nativeChildrenViewControllers objectAtIndex:index].view = nil;
+ [_nativeChildrenViewControllers removeObjectAtIndex:index];
+
+ NSInteger maxPage = _nativeChildrenViewControllers.count - 1;
+
+ if (self.currentIndex >= maxPage) {
+ [self goTo:maxPage animated:NO];
+ }
+}
+
+
+-(void)updateLayoutMetrics:(const facebook::react::LayoutMetrics &)layoutMetrics oldLayoutMetrics:(const facebook::react::LayoutMetrics &)oldLayoutMetrics {
+ [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:_layoutMetrics];
+ self.contentView.frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
+ _layoutMetrics = layoutMetrics;
+}
+
+
+-(void)prepareForRecycle {
+ [super prepareForRecycle];
+
+ _nativeChildrenViewControllers = [[NSMutableArray alloc] init];
+ [_nativePageViewController.view removeFromSuperview];
+ _nativePageViewController = nil;
+
+ _currentIndex = -1;
+}
+
+- (void)shouldDismissKeyboard:(LEGACY_RNCViewPagerKeyboardDismissMode)dismissKeyboard {
+ UIScrollViewKeyboardDismissMode dismissKeyboardMode = UIScrollViewKeyboardDismissModeNone;
+ switch (dismissKeyboard) {
+ case LEGACY_RNCViewPagerKeyboardDismissMode::None:
+ dismissKeyboardMode = UIScrollViewKeyboardDismissModeNone;
+ break;
+ case LEGACY_RNCViewPagerKeyboardDismissMode::OnDrag:
+ dismissKeyboardMode = UIScrollViewKeyboardDismissModeOnDrag;
+ break;
+ }
+ scrollView.keyboardDismissMode = dismissKeyboardMode;
+}
+
+
+- (void)updateProps:(const facebook::react::Props::Shared &)props oldProps:(const facebook::react::Props::Shared &)oldProps{
+ const auto &oldScreenProps = *std::static_pointer_cast(_props);
+ const auto &newScreenProps = *std::static_pointer_cast(props);
+
+ // change index only once
+ if (_currentIndex == -1) {
+ _currentIndex = newScreenProps.initialPage;
+ [self shouldDismissKeyboard: newScreenProps.keyboardDismissMode];
+ }
+
+ const auto newLayoutDirectionStr = RCTNSStringFromString(toString(newScreenProps.layoutDirection));
+
+
+ if (self.layoutDirection != newLayoutDirectionStr) {
+ self.layoutDirection = newLayoutDirectionStr;
+ }
+
+ if (oldScreenProps.keyboardDismissMode != newScreenProps.keyboardDismissMode) {
+ [self shouldDismissKeyboard: newScreenProps.keyboardDismissMode];
+ }
+
+ if (newScreenProps.scrollEnabled != scrollView.scrollEnabled) {
+ scrollView.scrollEnabled = newScreenProps.scrollEnabled;
+ }
+
+ if (newScreenProps.overdrag != _overdrag) {
+ _overdrag = newScreenProps.overdrag;
+ }
+
+ [super updateProps:props oldProps:oldProps];
+}
+
+- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args {
+ RCTLEGACY_RNCViewPagerHandleCommand(self, commandName, args);
+}
+
+#pragma mark - Internal methods
+
+- (void)setPage:(NSInteger)index {
+ [self goTo:index animated:YES];
+}
+
+- (void)setPageWithoutAnimation:(NSInteger)index {
+ [self goTo:index animated:NO];
+}
+
+- (void)disableSwipe {
+ self.nativePageViewController.view.userInteractionEnabled = NO;
+}
+
+- (void)enableSwipe {
+ self.nativePageViewController.view.userInteractionEnabled = YES;
+}
+
+- (void)goTo:(NSInteger)index animated:(BOOL)animated {
+ NSInteger numberOfPages = _nativeChildrenViewControllers.count;
+
+ [self disableSwipe];
+
+ _destinationIndex = index;
+
+
+ if (numberOfPages == 0 || index < 0 || index > numberOfPages - 1) {
+ return;
+ }
+
+ BOOL isForward = (index > self.currentIndex && [self isLtrLayout]) || (index < self.currentIndex && ![self isLtrLayout]);
+ UIPageViewControllerNavigationDirection direction = isForward ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
+
+ long diff = labs(index - _currentIndex);
+
+ [self setPagerViewControllers:index
+ direction:direction
+ animated:diff == 0 ? NO : animated];
+
+}
+
+- (void)setPagerViewControllers:(NSInteger)index
+ direction:(UIPageViewControllerNavigationDirection)direction
+ animated:(BOOL)animated{
+ if (_nativePageViewController == nil) {
+ [self enableSwipe];
+ return;
+ }
+
+ __weak LEGACY_RNCPagerViewComponentView *weakSelf = self;
+ [_nativePageViewController setViewControllers:@[[_nativeChildrenViewControllers objectAtIndex:index]]
+ direction:direction
+ animated:animated
+ completion:^(BOOL finished) {
+ __strong LEGACY_RNCPagerViewComponentView *strongSelf = weakSelf;
+ [strongSelf enableSwipe];
+ if (strongSelf->_eventEmitter != nullptr ) {
+ const auto strongEventEmitter = *std::dynamic_pointer_cast(strongSelf->_eventEmitter);
+ int position = (int) index;
+ strongEventEmitter.onPageSelected(LEGACY_RNCViewPagerEventEmitter::OnPageSelected{.position = static_cast(position)});
+ strongSelf->_currentIndex = index;
+ }
+ }];
+}
+
+
+- (UIViewController *)nextControllerForController:(UIViewController *)controller
+ inDirection:(UIPageViewControllerNavigationDirection)direction {
+ NSUInteger numberOfPages = _nativeChildrenViewControllers.count;
+ NSInteger index = [_nativeChildrenViewControllers indexOfObject:controller];
+
+ if (index == NSNotFound) {
+ return nil;
+ }
+
+ direction == UIPageViewControllerNavigationDirectionForward ? index++ : index--;
+
+ if (index < 0 || (index > (numberOfPages - 1))) {
+ return nil;
+ }
+
+ return [_nativeChildrenViewControllers objectAtIndex:index];
+}
+
+- (UIViewController *)currentlyDisplayed {
+ return _nativePageViewController.viewControllers.firstObject;
+}
+
+#pragma mark - UIScrollViewDelegate
+
+- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
+ const auto strongEventEmitter = *std::dynamic_pointer_cast(_eventEmitter);
+ strongEventEmitter.onPageScrollStateChanged(LEGACY_RNCViewPagerEventEmitter::OnPageScrollStateChanged{.pageScrollState = LEGACY_RNCViewPagerEventEmitter::OnPageScrollStateChangedPageScrollState::Dragging });
+}
+
+- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
+
+ if (!_overdrag) {
+ NSInteger maxIndex = _nativeChildrenViewControllers.count - 1;
+ BOOL isFirstPage = [self isLtrLayout] ? _currentIndex == 0 : _currentIndex == maxIndex;
+ BOOL isLastPage = [self isLtrLayout] ? _currentIndex == maxIndex : _currentIndex == 0;
+ CGFloat contentOffset = [self isHorizontal] ? scrollView.contentOffset.x : scrollView.contentOffset.y;
+ CGFloat topBound = [self isHorizontal] ? scrollView.bounds.size.width : scrollView.bounds.size.height;
+
+ if ((isFirstPage && contentOffset <= topBound) || (isLastPage && contentOffset >= topBound)) {
+ CGPoint croppedOffset = [self isHorizontal] ? CGPointMake(topBound, 0) : CGPointMake(0, topBound);
+ *targetContentOffset = croppedOffset;
+ }
+ }
+
+ const auto strongEventEmitter = *std::dynamic_pointer_cast(_eventEmitter);
+ strongEventEmitter.onPageScrollStateChanged(LEGACY_RNCViewPagerEventEmitter::OnPageScrollStateChanged{.pageScrollState = LEGACY_RNCViewPagerEventEmitter::OnPageScrollStateChangedPageScrollState::Settling });
+}
+
+- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
+ const auto strongEventEmitter = *std::dynamic_pointer_cast(_eventEmitter);
+ strongEventEmitter.onPageScrollStateChanged(LEGACY_RNCViewPagerEventEmitter::OnPageScrollStateChanged{.pageScrollState = LEGACY_RNCViewPagerEventEmitter::OnPageScrollStateChangedPageScrollState::Idle });
+}
+
+- (BOOL)isHorizontal {
+ return _nativePageViewController.navigationOrientation == UIPageViewControllerNavigationOrientationHorizontal;
+}
+
+- (BOOL)isLtrLayout {
+ return [_layoutDirection isEqualToString: @"ltr"];
+}
+
+- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
+ CGPoint point = scrollView.contentOffset;
+
+ float offset = 0;
+
+ if (self.isHorizontal) {
+ if (scrollView.frame.size.width != 0) {
+ offset = (point.x - scrollView.frame.size.width)/scrollView.frame.size.width;
+ }
+ } else {
+ if (scrollView.frame.size.height != 0) {
+ offset = (point.y - scrollView.frame.size.height)/scrollView.frame.size.height;
+ }
+ }
+
+ float absoluteOffset = fabs(offset);
+
+ NSInteger position = self.currentIndex;
+
+ BOOL isAnimatingBackwards = offset<0;
+
+ if (scrollView.isDragging) {
+ _destinationIndex = isAnimatingBackwards ? _currentIndex - 1 : _currentIndex + 1;
+ }
+
+ if (isAnimatingBackwards) {
+ position = _destinationIndex;
+ absoluteOffset = fmax(0, 1 - absoluteOffset);
+ }
+
+ if (!_overdrag) {
+ NSInteger maxIndex = _nativeChildrenViewControllers.count - 1;
+ NSInteger firstPageIndex = [self isLtrLayout] ? 0 : maxIndex;
+ NSInteger lastPageIndex = [self isLtrLayout] ? maxIndex : 0;
+ BOOL isFirstPage = _currentIndex == firstPageIndex;
+ BOOL isLastPage = _currentIndex == lastPageIndex;
+ CGFloat contentOffset =[self isHorizontal] ? scrollView.contentOffset.x : scrollView.contentOffset.y;
+ CGFloat topBound = [self isHorizontal] ? scrollView.bounds.size.width : scrollView.bounds.size.height;
+
+ if ((isFirstPage && contentOffset <= topBound) || (isLastPage && contentOffset >= topBound)) {
+ CGPoint croppedOffset = [self isHorizontal] ? CGPointMake(topBound, 0) : CGPointMake(0, topBound);
+ scrollView.contentOffset = croppedOffset;
+ absoluteOffset=0;
+ position = isLastPage ? lastPageIndex : firstPageIndex;
+ }
+ }
+
+ float interpolatedOffset = absoluteOffset * labs(_destinationIndex - _currentIndex);
+
+ const auto strongEventEmitter = *std::dynamic_pointer_cast(_eventEmitter);
+ int eventPosition = (int) position;
+ strongEventEmitter.onPageScroll(LEGACY_RNCViewPagerEventEmitter::OnPageScroll{.position = static_cast(eventPosition), .offset = interpolatedOffset});
+
+ //This is temporary workaround to allow animations based on onPageScroll event
+ //until Fabric implements proper NativeAnimationDriver
+ RCTBridge *bridge = [RCTBridge currentBridge];
+
+ if (bridge) {
+ [bridge.eventDispatcher sendEvent:[[RCTOnPageScrollEvent alloc] initWithReactTag:[NSNumber numberWithInt:self.tag] position:@(position) offset:@(interpolatedOffset)]];
+ }
+
+}
+
+
+#pragma mark - UIPageViewControllerDelegate
+
+- (void)pageViewController:(UIPageViewController *)pageViewController
+ didFinishAnimating:(BOOL)finished
+ previousViewControllers:(nonnull NSArray *)previousViewControllers
+ transitionCompleted:(BOOL)completed {
+ if (completed) {
+ UIViewController* currentVC = [self currentlyDisplayed];
+ NSUInteger currentIndex = [_nativeChildrenViewControllers indexOfObject:currentVC];
+ _currentIndex = currentIndex;
+ int position = (int) currentIndex;
+ const auto strongEventEmitter = *std::dynamic_pointer_cast(_eventEmitter);
+ strongEventEmitter.onPageSelected(LEGACY_RNCViewPagerEventEmitter::OnPageSelected{.position = static_cast(position)});
+ strongEventEmitter.onPageScroll(LEGACY_RNCViewPagerEventEmitter::OnPageScroll{.position = static_cast(position), .offset = 0.0});
+ }
+}
+
+#pragma mark - UIPageViewControllerDataSource
+
+- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
+ viewControllerAfterViewController:(UIViewController *)viewController {
+
+ UIPageViewControllerNavigationDirection direction = [self isLtrLayout] ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
+ return [self nextControllerForController:viewController inDirection:direction];
+}
+
+- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
+ viewControllerBeforeViewController:(UIViewController *)viewController {
+ UIPageViewControllerNavigationDirection direction = [self isLtrLayout] ? UIPageViewControllerNavigationDirectionReverse : UIPageViewControllerNavigationDirectionForward;
+ return [self nextControllerForController:viewController inDirection:direction];
+}
+
+#pragma mark - RCTComponentViewProtocol
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+ return concreteComponentDescriptorProvider();
+}
+
+
+@end
+
+Class LEGACY_RNCViewPagerCls(void)
+{
+ return LEGACY_RNCPagerViewComponentView.class;
+}
+
+#endif
diff --git a/ios/LEGACY/LEGACY_RNCPagerView.h b/ios/LEGACY/LEGACY_RNCPagerView.h
new file mode 100644
index 00000000..b8a7a86b
--- /dev/null
+++ b/ios/LEGACY/LEGACY_RNCPagerView.h
@@ -0,0 +1,33 @@
+#import
+#import
+#import
+#import
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface LEGACY_RNCPagerView: UIView
+
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher;
+
+@property(nonatomic) NSInteger initialPage;
+@property(nonatomic) NSInteger lastReportedIndex;
+@property(nonatomic) NSInteger destinationIndex;
+@property(nonatomic) NSInteger currentIndex;
+@property(nonatomic) NSInteger pageMargin;
+@property(nonatomic, readonly) BOOL scrollEnabled;
+@property(nonatomic, readonly) UIScrollViewKeyboardDismissMode dismissKeyboard;
+@property(nonatomic) UIPageViewControllerNavigationOrientation orientation;
+@property(nonatomic, copy) RCTDirectEventBlock onPageSelected;
+@property(nonatomic, copy) RCTDirectEventBlock onPageScroll;
+@property(nonatomic, copy) RCTDirectEventBlock onPageScrollStateChanged;
+@property(nonatomic) BOOL overdrag;
+@property(nonatomic) NSString* layoutDirection;
+@property(nonatomic, assign) BOOL animating;
+
+- (void)goTo:(NSInteger)index animated:(BOOL)animated;
+- (void)shouldScroll:(BOOL)scrollEnabled;
+- (void)shouldDismissKeyboard:(NSString *)dismissKeyboard;
+
+@end
+
+NS_ASSUME_NONNULL_END
diff --git a/ios/LEGACY/LEGACY_RNCPagerView.m b/ios/LEGACY/LEGACY_RNCPagerView.m
new file mode 100644
index 00000000..add548c8
--- /dev/null
+++ b/ios/LEGACY/LEGACY_RNCPagerView.m
@@ -0,0 +1,464 @@
+
+#import "LEGACY_RNCPagerView.h"
+#import "React/RCTLog.h"
+#import
+
+#import "UIViewController+CreateExtension.h"
+#import "RCTOnPageScrollEvent.h"
+#import "RCTOnPageScrollStateChanged.h"
+#import "RCTOnPageSelected.h"
+#import
+
+@interface LEGACY_RNCPagerView ()
+
+@property(nonatomic, strong) UIPageViewController *reactPageViewController;
+@property(nonatomic, strong) RCTEventDispatcher *eventDispatcher;
+
+@property(nonatomic, weak) UIScrollView *scrollView;
+@property(nonatomic, weak) UIView *currentView;
+
+@property(nonatomic, strong) NSHashTable *cachedControllers;
+@property(nonatomic, assign) CGPoint lastContentOffset;
+
+- (void)goTo:(NSInteger)index animated:(BOOL)animated;
+- (void)shouldScroll:(BOOL)scrollEnabled;
+- (void)shouldDismissKeyboard:(NSString *)dismissKeyboard;
+
+
+@end
+
+@implementation LEGACY_RNCPagerView {
+ uint16_t _coalescingKey;
+}
+
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher {
+ if (self = [super init]) {
+ _scrollEnabled = YES;
+ _pageMargin = 0;
+ _lastReportedIndex = -1;
+ _destinationIndex = -1;
+ _orientation = UIPageViewControllerNavigationOrientationHorizontal;
+ _currentIndex = 0;
+ _dismissKeyboard = UIScrollViewKeyboardDismissModeNone;
+ _coalescingKey = 0;
+ _eventDispatcher = eventDispatcher;
+ _cachedControllers = [NSHashTable hashTableWithOptions:NSHashTableStrongMemory];
+ _overdrag = NO;
+ _layoutDirection = @"ltr";
+ }
+ return self;
+}
+
+- (void)layoutSubviews {
+ [super layoutSubviews];
+ if (self.reactPageViewController) {
+ [self shouldScroll:self.scrollEnabled];
+ }
+}
+
+- (void)didUpdateReactSubviews {
+ if (!self.reactPageViewController && self.reactViewController != nil) {
+ [self embed];
+ [self setupInitialController];
+ } else {
+ [self updateDataSource];
+ }
+}
+
+- (void)didMoveToSuperview {
+ [super didMoveToSuperview];
+ if (!self.reactPageViewController && self.reactViewController != nil) {
+ [self embed];
+ [self setupInitialController];
+ }
+}
+
+- (void)didMoveToWindow {
+ [super didMoveToWindow];
+ if (!self.reactPageViewController && self.reactViewController != nil) {
+ [self embed];
+ [self setupInitialController];
+ }
+
+ if (self.reactViewController.navigationController != nil && self.reactViewController.navigationController.interactivePopGestureRecognizer != nil) {
+ [self.scrollView.panGestureRecognizer requireGestureRecognizerToFail:self.reactViewController.navigationController.interactivePopGestureRecognizer];
+ }
+}
+
+- (void)embed {
+ NSDictionary *options = @{ UIPageViewControllerOptionInterPageSpacingKey: @(self.pageMargin) };
+ UIPageViewController *pageViewController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll
+ navigationOrientation:self.orientation
+ options:options];
+ pageViewController.delegate = self;
+ pageViewController.dataSource = self;
+
+ for (UIView *subview in pageViewController.view.subviews) {
+ if([subview isKindOfClass:UIScrollView.class]){
+ ((UIScrollView *)subview).delegate = self;
+ ((UIScrollView *)subview).keyboardDismissMode = _dismissKeyboard;
+ ((UIScrollView *)subview).delaysContentTouches = YES;
+ self.scrollView = (UIScrollView *)subview;
+ }
+ }
+
+ self.reactPageViewController = pageViewController;
+
+ [self reactAddControllerToClosestParent:pageViewController];
+ [self addSubview:pageViewController.view];
+
+ pageViewController.view.frame = self.bounds;
+
+ [self shouldScroll:self.scrollEnabled];
+
+ [pageViewController.view layoutIfNeeded];
+}
+
+- (void)shouldScroll:(BOOL)scrollEnabled {
+ _scrollEnabled = scrollEnabled;
+ if (self.reactPageViewController.view) {
+ self.scrollView.scrollEnabled = scrollEnabled;
+ }
+}
+
+- (void)shouldDismissKeyboard:(NSString *)dismissKeyboard {
+ _dismissKeyboard = [dismissKeyboard isEqual: @"on-drag"] ?
+ UIScrollViewKeyboardDismissModeOnDrag : UIScrollViewKeyboardDismissModeNone;
+ self.scrollView.keyboardDismissMode = _dismissKeyboard;
+}
+
+- (void)setupInitialController {
+ UIView *initialView = self.reactSubviews[self.initialPage];
+ if (initialView) {
+ UIViewController *initialController = nil;
+ if (initialView.reactViewController) {
+ initialController = initialView.reactViewController;
+ } else {
+ initialController = [[UIViewController alloc] initWithView:initialView];
+ }
+
+ [self.cachedControllers addObject:initialController];
+
+ [self setReactViewControllers:self.initialPage
+ with:initialController
+ direction:UIPageViewControllerNavigationDirectionForward
+ animated:YES
+ shouldCallOnPageSelected:YES];
+ }
+}
+
+- (void)setReactViewControllers:(NSInteger)index
+ with:(UIViewController *)controller
+ direction:(UIPageViewControllerNavigationDirection)direction
+ animated:(BOOL)animated
+ shouldCallOnPageSelected:(BOOL)shouldCallOnPageSelected {
+ if (self.reactPageViewController == nil) {
+ [self enableSwipe];
+ return;
+ }
+
+ NSArray *currentVCs = self.reactPageViewController.viewControllers;
+ if (currentVCs.count == 1 && [currentVCs.firstObject isEqual:controller]) {
+ [self enableSwipe];
+ return;
+ }
+
+ __weak LEGACY_RNCPagerView *weakSelf = self;
+ uint16_t coalescingKey = _coalescingKey++;
+
+ if (animated == YES) {
+ self.animating = YES;
+ }
+
+ [self.reactPageViewController setViewControllers:@[controller]
+ direction:direction
+ animated:animated
+ completion:^(BOOL finished) {
+ __strong typeof(self) strongSelf = weakSelf;
+ strongSelf.currentIndex = index;
+ strongSelf.currentView = controller.view;
+
+ [strongSelf enableSwipe];
+
+ if (finished) {
+ strongSelf.animating = NO;
+ }
+
+ if (strongSelf.eventDispatcher) {
+ if (strongSelf.lastReportedIndex != strongSelf.currentIndex) {
+ if (shouldCallOnPageSelected) {
+ [strongSelf.eventDispatcher sendEvent:[[RCTOnPageSelected alloc] initWithReactTag:strongSelf.reactTag position:@(index) coalescingKey:coalescingKey]];
+ }
+ strongSelf.lastReportedIndex = strongSelf.currentIndex;
+ }
+ }
+ }];
+}
+
+- (UIViewController *)currentlyDisplayed {
+ return self.reactPageViewController.viewControllers.firstObject;
+}
+
+- (UIViewController *)findCachedControllerForView:(UIView *)view {
+ for (UIViewController *controller in self.cachedControllers) {
+ if (controller.view.reactTag == view.reactTag) {
+ return controller;
+ }
+ }
+ return nil;
+}
+
+- (void)updateDataSource {
+ if (!self.currentView && self.reactSubviews.count == 0) {
+ return;
+ }
+
+ NSInteger newIndex = self.currentView ? [self.reactSubviews indexOfObject:self.currentView] : 0;
+
+ if (newIndex == NSNotFound) {
+ //Current view was removed
+ NSInteger maxPage = self.reactSubviews.count - 1;
+ NSInteger fallbackIndex = self.currentIndex >= maxPage ? maxPage : self.currentIndex;
+
+ [self goTo:fallbackIndex animated:NO];
+ } else {
+ [self goTo:newIndex animated:NO];
+ }
+}
+
+- (void)disableSwipe {
+ self.reactPageViewController.view.userInteractionEnabled = NO;
+}
+
+- (void)enableSwipe {
+ self.reactPageViewController.view.userInteractionEnabled = YES;
+}
+
+- (void)goTo:(NSInteger)index animated:(BOOL)animated {
+ NSInteger numberOfPages = self.reactSubviews.count;
+
+ [self disableSwipe];
+
+ _destinationIndex = index;
+
+ if (numberOfPages == 0 || index < 0 || index > numberOfPages - 1) {
+ return;
+ }
+
+ BOOL isRTL = ![self isLtrLayout];
+
+ BOOL isForward = (index > self.currentIndex && !isRTL) || (index < self.currentIndex && isRTL);
+
+
+ UIPageViewControllerNavigationDirection direction = isForward ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
+
+ long diff = labs(index - _currentIndex);
+
+ [self goToViewController:index direction:direction animated:(!self.animating && animated) shouldCallOnPageSelected: YES];
+
+ if (diff == 0) {
+ [self goToViewController:index direction:direction animated:NO shouldCallOnPageSelected:YES];
+ }
+}
+
+- (void)goToViewController:(NSInteger)index
+ direction:(UIPageViewControllerNavigationDirection)direction
+ animated:(BOOL)animated
+ shouldCallOnPageSelected:(BOOL)shouldCallOnPageSelected {
+ UIView *viewToDisplay = self.reactSubviews[index];
+ UIViewController *controllerToDisplay = [self findAndCacheControllerForView:viewToDisplay];
+ [self setReactViewControllers:index
+ with:controllerToDisplay
+ direction:direction
+ animated:animated
+ shouldCallOnPageSelected:shouldCallOnPageSelected];
+}
+
+- (UIViewController *)findAndCacheControllerForView:(UIView *)viewToDisplay {
+ if (!viewToDisplay) { return nil; }
+
+ UIViewController *controllerToDisplay = [self findCachedControllerForView:viewToDisplay];
+ UIViewController *current = [self currentlyDisplayed];
+
+ if (!controllerToDisplay && current.view.reactTag == viewToDisplay.reactTag) {
+ controllerToDisplay = current;
+ }
+ if (!controllerToDisplay) {
+ if (viewToDisplay.reactViewController) {
+ controllerToDisplay = viewToDisplay.reactViewController;
+ } else {
+ controllerToDisplay = [[UIViewController alloc] initWithView:viewToDisplay];
+ }
+ }
+ [self.cachedControllers addObject:controllerToDisplay];
+
+ return controllerToDisplay;
+}
+
+- (UIViewController *)nextControllerForController:(UIViewController *)controller
+ inDirection:(UIPageViewControllerNavigationDirection)direction {
+ NSUInteger numberOfPages = self.reactSubviews.count;
+ NSInteger index = [self.reactSubviews indexOfObject:controller.view];
+
+ if (index == NSNotFound) {
+ return nil;
+ }
+
+ direction == UIPageViewControllerNavigationDirectionForward ? index++ : index--;
+
+ if (index < 0 || (index > (numberOfPages - 1))) {
+ return nil;
+ }
+
+ UIView *viewToDisplay = self.reactSubviews[index];
+
+ return [self findAndCacheControllerForView:viewToDisplay];
+}
+
+#pragma mark - UIPageViewControllerDelegate
+
+- (void)pageViewController:(UIPageViewController *)pageViewController
+ didFinishAnimating:(BOOL)finished
+ previousViewControllers:(nonnull NSArray *)previousViewControllers
+ transitionCompleted:(BOOL)completed {
+
+ if (completed) {
+ UIViewController* currentVC = [self currentlyDisplayed];
+ NSUInteger currentIndex = [self.reactSubviews indexOfObject:currentVC.view];
+
+ self.currentIndex = currentIndex;
+ self.currentView = currentVC.view;
+ [self.eventDispatcher sendEvent:[[RCTOnPageSelected alloc] initWithReactTag:self.reactTag position:@(currentIndex) coalescingKey:_coalescingKey++]];
+ [self.eventDispatcher sendEvent:[[RCTOnPageScrollEvent alloc] initWithReactTag:self.reactTag position:@(currentIndex) offset:@(0.0)]];
+ self.lastReportedIndex = currentIndex;
+ }
+}
+
+#pragma mark - UIPageViewControllerDataSource
+
+- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
+ viewControllerAfterViewController:(UIViewController *)viewController {
+ UIPageViewControllerNavigationDirection direction = [self isLtrLayout] ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
+ return [self nextControllerForController:viewController inDirection:direction];
+}
+
+- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
+ viewControllerBeforeViewController:(UIViewController *)viewController {
+ UIPageViewControllerNavigationDirection direction = [self isLtrLayout] ? UIPageViewControllerNavigationDirectionReverse : UIPageViewControllerNavigationDirectionForward;
+ return [self nextControllerForController:viewController inDirection:direction];
+}
+
+#pragma mark - UIPageControlDelegate
+
+- (void)pageControlValueChanged:(UIPageControl *)sender {
+ if (sender.currentPage != self.currentIndex) {
+ [self goTo:sender.currentPage animated:YES];
+ }
+}
+
+#pragma mark - UIScrollViewDelegate
+
+- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
+ [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"dragging" coalescingKey:_coalescingKey++]];
+}
+
+- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
+ [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"settling" coalescingKey:_coalescingKey++]];
+
+ if (!_overdrag) {
+ NSInteger maxIndex = self.reactSubviews.count - 1;
+ BOOL isFirstPage = [self isLtrLayout] ? _currentIndex == 0 : _currentIndex == maxIndex;
+ BOOL isLastPage = [self isLtrLayout] ? _currentIndex == maxIndex : _currentIndex == 0;
+ CGFloat contentOffset =[self isHorizontal] ? scrollView.contentOffset.x : scrollView.contentOffset.y;
+ CGFloat topBound = [self isHorizontal] ? scrollView.bounds.size.width : scrollView.bounds.size.height;
+
+ if ((isFirstPage && contentOffset <= topBound) || (isLastPage && contentOffset >= topBound)) {
+ CGPoint croppedOffset = [self isHorizontal] ? CGPointMake(topBound, 0) : CGPointMake(0, topBound);
+ *targetContentOffset = croppedOffset;
+ }
+ }
+}
+
+- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
+ [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"idle" coalescingKey:_coalescingKey++]];
+}
+
+- (BOOL)isHorizontal {
+ return self.orientation == UIPageViewControllerNavigationOrientationHorizontal;
+}
+
+- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
+ CGPoint point = scrollView.contentOffset;
+
+ float offset = 0;
+
+ if (self.isHorizontal) {
+ if (scrollView.frame.size.width != 0) {
+ offset = (point.x - scrollView.frame.size.width)/scrollView.frame.size.width;
+ }
+ } else {
+ if (scrollView.frame.size.height != 0) {
+ offset = (point.y - scrollView.frame.size.height)/scrollView.frame.size.height;
+ }
+ }
+
+ float absoluteOffset = fabs(offset);
+
+ NSInteger position = self.currentIndex;
+
+ BOOL isAnimatingBackwards = ([self isLtrLayout] && offset<0) || (![self isLtrLayout] && offset > 0.05f);
+
+ if (scrollView.isDragging) {
+ _destinationIndex = isAnimatingBackwards ? _currentIndex - 1 : _currentIndex + 1;
+ }
+
+ if(isAnimatingBackwards){
+ position = _destinationIndex;
+ absoluteOffset = fmax(0, 1 - absoluteOffset);
+ }
+
+ if (!_overdrag) {
+ NSInteger maxIndex = self.reactSubviews.count - 1;
+ NSInteger firstPageIndex = [self isLtrLayout] ? 0 : maxIndex;
+ NSInteger lastPageIndex = [self isLtrLayout] ? maxIndex : 0;
+ BOOL isFirstPage = _currentIndex == firstPageIndex;
+ BOOL isLastPage = _currentIndex == lastPageIndex;
+ CGFloat contentOffset =[self isHorizontal] ? scrollView.contentOffset.x : scrollView.contentOffset.y;
+ CGFloat topBound = [self isHorizontal] ? scrollView.bounds.size.width : scrollView.bounds.size.height;
+
+ if ((isFirstPage && contentOffset <= topBound) || (isLastPage && contentOffset >= topBound)) {
+ CGPoint croppedOffset = [self isHorizontal] ? CGPointMake(topBound, 0) : CGPointMake(0, topBound);
+ scrollView.contentOffset = croppedOffset;
+ absoluteOffset=0;
+ position = isLastPage ? lastPageIndex : firstPageIndex;
+ }
+ }
+
+ float interpolatedOffset = absoluteOffset * labs(_destinationIndex - _currentIndex);
+
+ self.lastContentOffset = scrollView.contentOffset;
+ [self.eventDispatcher sendEvent:[[RCTOnPageScrollEvent alloc] initWithReactTag:self.reactTag position:@(position) offset:@(interpolatedOffset)]];
+}
+
+- (NSString *)determineScrollDirection:(UIScrollView *)scrollView {
+ NSString *scrollDirection;
+ if (self.isHorizontal) {
+ if (self.lastContentOffset.x > scrollView.contentOffset.x) {
+ scrollDirection = @"left";
+ } else if (self.lastContentOffset.x < scrollView.contentOffset.x) {
+ scrollDirection = @"right";
+ }
+ } else {
+ if (self.lastContentOffset.y > scrollView.contentOffset.y) {
+ scrollDirection = @"up";
+ } else if (self.lastContentOffset.y < scrollView.contentOffset.y) {
+ scrollDirection = @"down";
+ }
+ }
+ return scrollDirection;
+}
+
+- (BOOL)isLtrLayout {
+ return [_layoutDirection isEqualToString:@"ltr"];
+}
+@end
diff --git a/ios/LEGACY/LEGACY_RNCPagerViewManager.h b/ios/LEGACY/LEGACY_RNCPagerViewManager.h
new file mode 100644
index 00000000..7225f921
--- /dev/null
+++ b/ios/LEGACY/LEGACY_RNCPagerViewManager.h
@@ -0,0 +1,13 @@
+
+#import
+#import
+#import
+#import
+#import "LEGACY_RNCPagerView.h"
+NS_ASSUME_NONNULL_BEGIN
+
+@interface LEGACY_RNCPagerViewManager : RCTViewManager
+
+@end
+
+NS_ASSUME_NONNULL_END
diff --git a/ios/LEGACY/LEGACY_RNCPagerViewManager.m b/ios/LEGACY/LEGACY_RNCPagerViewManager.m
new file mode 100644
index 00000000..c1776ae0
--- /dev/null
+++ b/ios/LEGACY/LEGACY_RNCPagerViewManager.m
@@ -0,0 +1,86 @@
+
+#import "LEGACY_RNCPagerViewManager.h"
+
+@implementation LEGACY_RNCPagerViewManager
+
+#pragma mark - RTC
+
+RCT_EXPORT_MODULE(LEGACY_RNCViewPager)
+
+RCT_EXPORT_VIEW_PROPERTY(initialPage, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(pageMargin, NSInteger)
+
+RCT_EXPORT_VIEW_PROPERTY(orientation, UIPageViewControllerNavigationOrientation)
+RCT_EXPORT_VIEW_PROPERTY(onPageSelected, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPageScroll, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPageScrollStateChanged, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(overdrag, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(layoutDirection, NSString)
+
+
+- (void) goToPage
+ : (nonnull NSNumber *)reactTag index
+ : (nonnull NSNumber *)index animated
+ : (BOOL)animated {
+ [self.bridge.uiManager addUIBlock:^(
+ RCTUIManager *uiManager,
+ NSDictionary *viewRegistry) {
+ LEGACY_RNCPagerView *view = (LEGACY_RNCPagerView *)viewRegistry[reactTag];
+ if (!view || ![view isKindOfClass:[LEGACY_RNCPagerView class]]) {
+ RCTLogError(@"Cannot find LEGACY_RNCPagerView with tag #%@", reactTag);
+ return;
+ }
+ if (!animated || !view.animating) {
+ [view goTo:index.integerValue animated:animated];
+ }
+ }];
+}
+
+- (void) changeScrollEnabled
+: (nonnull NSNumber *)reactTag enabled
+: (BOOL)enabled {
+ [self.bridge.uiManager addUIBlock:^(
+ RCTUIManager *uiManager,
+ NSDictionary *viewRegistry) {
+ LEGACY_RNCPagerView *view = (LEGACY_RNCPagerView *)viewRegistry[reactTag];
+ if (!view || ![view isKindOfClass:[LEGACY_RNCPagerView class]]) {
+ RCTLogError(@"Cannot find LEGACY_RNCPagerView with tag #%@", reactTag);
+ return;
+ }
+ [view shouldScroll:enabled];
+ }];
+}
+
+RCT_EXPORT_METHOD(setPage
+ : (nonnull NSNumber *)reactTag index
+ : (nonnull NSNumber *)index) {
+ [self goToPage:reactTag index:index animated:true];
+}
+
+RCT_EXPORT_METHOD(setPageWithoutAnimation
+ : (nonnull NSNumber *)reactTag index
+ : (nonnull NSNumber *)index) {
+ [self goToPage:reactTag index:index animated:false];
+}
+
+RCT_EXPORT_METHOD(setScrollEnabled
+ : (nonnull NSNumber *)reactTag enabled
+ : (nonnull NSNumber *)enabled) {
+ BOOL isEnabled = [enabled boolValue];
+ [self changeScrollEnabled:reactTag enabled:isEnabled];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(scrollEnabled, BOOL, LEGACY_RNCPagerView) {
+ [view shouldScroll:[RCTConvert BOOL:json]];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(keyboardDismissMode, NSString, LEGACY_RNCPagerView) {
+ [view shouldDismissKeyboard:[RCTConvert NSString:json]];
+}
+
+
+- (UIView *)view {
+ return [[LEGACY_RNCPagerView alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
+}
+
+@end
diff --git a/ios/RNCPagerScrollView.h b/ios/RNCPagerScrollView.h
index d060b6d3..d61de90b 100644
--- a/ios/RNCPagerScrollView.h
+++ b/ios/RNCPagerScrollView.h
@@ -1,2 +1,8 @@
+/*
+NOTE: This file is *not* currently used, for context see:
+- https://github.com/callstack/react-native-pager-view/pull/783#discussion_r1410295171
+- https://github.com/callstack/react-native-pager-view/pull/783#discussion_r1410316201
+*/
+
@interface RNCPagerScrollView : UIScrollView
@end
diff --git a/ios/RNCPagerScrollView.m b/ios/RNCPagerScrollView.m
index ffbffbfb..321befde 100644
--- a/ios/RNCPagerScrollView.m
+++ b/ios/RNCPagerScrollView.m
@@ -1,3 +1,8 @@
+/*
+NOTE: This file is *not* currently used, for context see:
+- https://github.com/callstack/react-native-pager-view/pull/783#discussion_r1410295171
+- https://github.com/callstack/react-native-pager-view/pull/783#discussion_r1410316201
+*/
#import "RNCPagerScrollView.h"
diff --git a/ios/RNCPagerView.m b/ios/RNCPagerView.m
index 69325a59..d0bb5c1d 100644
--- a/ios/RNCPagerView.m
+++ b/ios/RNCPagerView.m
@@ -5,7 +5,6 @@
#import "UIViewController+CreateExtension.h"
#import "RCTOnPageScrollEvent.h"
-#import "RNCPagerScrollView.h"
#import "RCTOnPageScrollStateChanged.h"
#import "React/RCTUIManagerObserverCoordinator.h"
#import "RCTOnPageSelected.h"
@@ -15,7 +14,7 @@ @interface RNCPagerView ()
@property(nonatomic, strong) id eventDispatcher;
-@property(nonatomic, strong) RNCPagerScrollView *scrollView;
+@property(nonatomic, strong) UIScrollView *scrollView;
@property(nonatomic, strong) UIView *containerView;
- (void)goTo:(NSInteger)index animated:(BOOL)animated;
@@ -40,13 +39,6 @@ - (instancetype)initWithEventDispatcher:(id)eventDis
return self;
}
-- (void)didMoveToWindow {
- // Disable scroll view pan gesture for navigation controller screen edge go back gesture
- if (self.reactViewController.navigationController != nil && self.reactViewController.navigationController.interactivePopGestureRecognizer != nil) {
- [self.scrollView.panGestureRecognizer requireGestureRecognizerToFail:self.reactViewController.navigationController.interactivePopGestureRecognizer];
- }
-}
-
- (void)didUpdateReactSubviews {
[self updateContentSizeIfNeeded];
}
@@ -71,7 +63,7 @@ - (void)removeReactSubview:(UIView *)subview {
}
- (void)embed {
- _scrollView = [[RNCPagerScrollView alloc] initWithFrame:self.bounds];
+ _scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
_scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
_scrollView.delaysContentTouches = NO;
_scrollView.delegate = self;
diff --git a/package.json b/package.json
index 05044f1f..4f13ee76 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"releaseNext": "release-it --npm.tag=next --preRelease=rc",
"example": "yarn --cwd example",
"bootstrap": "yarn example && yarn && yarn example pods",
+ "bootstrap-fabric": "yarn example && yarn && RCT_NEW_ARCH_ENABLED=1 yarn example pods",
"bootstrap-no-pods": "yarn example && yarn",
"test:e2e:android": "bash ./scripts/run-maestro-tests.sh android",
"run-example-android": "cd example;react-native run-android --variant=release",
@@ -118,9 +119,18 @@
"useTabs": false
},
"codegenConfig": {
- "name": "RNCViewPager",
- "type": "components",
- "jsSrcsDir": "src"
+ "libraries": [
+ {
+ "name": "RNCViewPager",
+ "type": "components",
+ "jsSrcsDir": "src/PagerViewNativeComponent"
+ },
+ {
+ "name": "LEGACY_RNCViewPager",
+ "type": "components",
+ "jsSrcsDir": "src/LEGACY_PagerViewNativeComponent"
+ }
+ ]
},
"react-native-builder-bob": {
"source": "src",
diff --git a/src/LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent.ts b/src/LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent.ts
new file mode 100644
index 00000000..4770da9f
--- /dev/null
+++ b/src/LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent.ts
@@ -0,0 +1,81 @@
+/*
+ Note: The types below are duplicated between this file and `src/PagerViewNativeComponent/PagerViewNativeComponent.ts`.
+
+ This is on purpose. Firstly, we're declaring two native modules with two different iOS implementation flavors, but the same API.
+ Secondly, as these files serve as a reference point for React Native's new architecture Codegen process (which takes care of the
+ automatic generation of the native modules) we cannot extract the types into a separate file, or declare both native modules
+ in one file, as Codegen supports neither of these workarounds at the time of writing.
+
+ In order to make things as intuitive as possible, the duplicated types in this file are *not* exported, as they are meant for use
+ in this file only, by Codegen-related functions.
+*/
+import type * as React from 'react';
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+import type {
+ DirectEventHandler,
+ Double,
+ Int32,
+ WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+type OnPageScrollEventData = Readonly<{
+ position: Double;
+ offset: Double;
+}>;
+
+type OnPageSelectedEventData = Readonly<{
+ position: Double;
+}>;
+
+type OnPageScrollStateChangedEventData = Readonly<{
+ pageScrollState: 'idle' | 'dragging' | 'settling';
+}>;
+
+interface NativeProps extends ViewProps {
+ scrollEnabled?: WithDefault;
+ layoutDirection?: WithDefault<'ltr' | 'rtl', 'ltr'>;
+ initialPage?: Int32;
+ orientation?: WithDefault<'horizontal' | 'vertical', 'horizontal'>;
+ offscreenPageLimit?: Int32;
+ pageMargin?: Int32;
+ overScrollMode?: WithDefault<'auto' | 'always' | 'never', 'auto'>;
+ overdrag?: WithDefault;
+ keyboardDismissMode?: WithDefault<'none' | 'on-drag', 'none'>;
+ onPageScroll?: DirectEventHandler;
+ onPageSelected?: DirectEventHandler;
+ onPageScrollStateChanged?: DirectEventHandler;
+ useLegacy?: WithDefault;
+}
+
+type PagerViewViewType = HostComponent;
+
+interface NativeCommands {
+ setPage: (
+ viewRef: React.ElementRef,
+ selectedPage: Int32
+ ) => void;
+ setPageWithoutAnimation: (
+ viewRef: React.ElementRef,
+ selectedPage: Int32
+ ) => void;
+ setScrollEnabledImperatively: (
+ viewRef: React.ElementRef,
+ scrollEnabled: boolean
+ ) => void;
+}
+
+export const LEGACY_PagerViewNativeCommands: NativeCommands =
+ codegenNativeCommands({
+ supportedCommands: [
+ 'setPage',
+ 'setPageWithoutAnimation',
+ 'setScrollEnabledImperatively',
+ ],
+ });
+
+export default codegenNativeComponent(
+ 'LEGACY_RNCViewPager'
+) as HostComponent;
diff --git a/src/PagerView.tsx b/src/PagerView.tsx
index 785c9791..d2bfec53 100644
--- a/src/PagerView.tsx
+++ b/src/PagerView.tsx
@@ -1,18 +1,24 @@
import React from 'react';
-import { Platform, Keyboard } from 'react-native';
+import { Platform, Keyboard, StyleProp, ViewStyle } from 'react-native';
import { I18nManager } from 'react-native';
-import type {
+import type * as ReactNative from 'react-native';
+
+import {
+ LEGACY_childrenWithOverriddenStyle,
+ childrenWithOverriddenStyle,
+} from './utils';
+
+import PagerViewNativeComponent, {
+ PagerViewNativeCommands,
OnPageScrollEventData,
OnPageScrollStateChangedEventData,
OnPageSelectedEventData,
-} from './PagerViewNativeComponent';
-import type * as ReactNative from 'react-native';
+ NativeProps as PagerViewProps,
+} from './PagerViewNativeComponent/PagerViewNativeComponent';
-import type { NativeProps as PagerViewProps } from './PagerViewNativeComponent';
-import { childrenWithOverriddenStyle } from './utils';
-import PagerViewView, {
- Commands as PagerViewCommands,
-} from './PagerViewNativeComponent';
+import LEGACY_PagerViewNativeComponent, {
+ LEGACY_PagerViewNativeCommands,
+} from './LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent';
/**
* Container that allows to flip left and right between child views. Each
@@ -55,10 +61,27 @@ import PagerViewView, {
* }
* ```
*/
-
export class PagerView extends React.Component {
private isScrolling = false;
- pagerView: React.ElementRef | null = null;
+ pagerView: React.ElementRef | null = null;
+
+ private get nativeCommandsWrapper() {
+ return this.props.useLegacy
+ ? LEGACY_PagerViewNativeCommands
+ : PagerViewNativeCommands;
+ }
+
+ private get deducedLayoutDirection() {
+ if (
+ !this.props.layoutDirection ||
+ //@ts-ignore fix it
+ this.props.layoutDirection === 'locale'
+ ) {
+ return I18nManager.isRTL ? 'rtl' : 'ltr';
+ } else {
+ return this.props.layoutDirection;
+ }
+ }
private _onPageScroll = (
e: ReactNative.NativeSyntheticEvent
@@ -92,13 +115,17 @@ export class PagerView extends React.Component {
}
};
+ private _onMoveShouldSetResponderCapture = () => {
+ return this.isScrolling;
+ };
+
/**
* A helper function to scroll to a specific page in the PagerView.
* The transition between pages will be animated.
*/
public setPage = (selectedPage: number) => {
if (this.pagerView) {
- PagerViewCommands.setPage(this.pagerView, selectedPage);
+ this.nativeCommandsWrapper.setPage(this.pagerView, selectedPage);
}
};
@@ -108,7 +135,10 @@ export class PagerView extends React.Component {
*/
public setPageWithoutAnimation = (selectedPage: number) => {
if (this.pagerView) {
- PagerViewCommands.setPageWithoutAnimation(this.pagerView, selectedPage);
+ this.nativeCommandsWrapper.setPageWithoutAnimation(
+ this.pagerView,
+ selectedPage
+ );
}
};
@@ -119,48 +149,55 @@ export class PagerView extends React.Component {
*/
public setScrollEnabled = (scrollEnabled: boolean) => {
if (this.pagerView) {
- PagerViewCommands.setScrollEnabledImperatively(
+ this.nativeCommandsWrapper.setScrollEnabledImperatively(
this.pagerView,
scrollEnabled
);
}
};
- private _onMoveShouldSetResponderCapture = () => {
- return this.isScrolling;
- };
-
- private get deducedLayoutDirection() {
- if (
- !this.props.layoutDirection ||
- //@ts-ignore fix it
- this.props.layoutDirection === 'locale'
- ) {
- return I18nManager.isRTL ? 'rtl' : 'ltr';
- } else {
- return this.props.layoutDirection;
+ render() {
+ // old iOS `UIPageViewController`-based implementation
+ if (Platform.OS === 'ios' && this.props.useLegacy) {
+ return (
+ {
+ this.pagerView = ref;
+ }}
+ style={this.props.style}
+ layoutDirection={this.deducedLayoutDirection}
+ onPageScroll={this._onPageScroll}
+ onPageScrollStateChanged={this._onPageScrollStateChanged}
+ onPageSelected={this._onPageSelected}
+ onMoveShouldSetResponderCapture={
+ this._onMoveShouldSetResponderCapture
+ }
+ children={LEGACY_childrenWithOverriddenStyle(this.props.children)}
+ />
+ );
}
- }
- render() {
+ const style: StyleProp = [
+ this.props.style,
+ this.props.pageMargin
+ ? {
+ marginHorizontal: -this.props.pageMargin / 2,
+ }
+ : null,
+ {
+ flexDirection: this.props.orientation === 'vertical' ? 'column' : 'row',
+ },
+ ];
+
+ // new iOS `UIScrollView`-based implementation, Android, and other platforms
return (
- {
this.pagerView = ref;
}}
- style={[
- this.props.style,
- this.props.pageMargin
- ? {
- marginHorizontal: -this.props.pageMargin / 2,
- }
- : null,
- {
- flexDirection:
- this.props.orientation === 'vertical' ? 'column' : 'row',
- },
- ]}
+ style={style}
layoutDirection={this.deducedLayoutDirection}
onPageScroll={this._onPageScroll}
onPageScrollStateChanged={this._onPageScrollStateChanged}
diff --git a/src/PagerViewNativeComponent.ts b/src/PagerViewNativeComponent/PagerViewNativeComponent.ts
similarity index 87%
rename from src/PagerViewNativeComponent.ts
rename to src/PagerViewNativeComponent/PagerViewNativeComponent.ts
index f102aa96..9017e535 100644
--- a/src/PagerViewNativeComponent.ts
+++ b/src/PagerViewNativeComponent/PagerViewNativeComponent.ts
@@ -1,7 +1,8 @@
import type * as React from 'react';
+import type { HostComponent, ViewProps } from 'react-native';
import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { HostComponent, ViewProps } from 'react-native';
+
import type {
DirectEventHandler,
Double,
@@ -35,6 +36,7 @@ export interface NativeProps extends ViewProps {
onPageScroll?: DirectEventHandler;
onPageSelected?: DirectEventHandler;
onPageScrollStateChanged?: DirectEventHandler;
+ useLegacy?: WithDefault;
}
type PagerViewViewType = HostComponent;
@@ -54,13 +56,14 @@ export interface NativeCommands {
) => void;
}
-export const Commands: NativeCommands = codegenNativeCommands({
- supportedCommands: [
- 'setPage',
- 'setPageWithoutAnimation',
- 'setScrollEnabledImperatively',
- ],
-});
+export const PagerViewNativeCommands: NativeCommands =
+ codegenNativeCommands({
+ supportedCommands: [
+ 'setPage',
+ 'setPageWithoutAnimation',
+ 'setScrollEnabledImperatively',
+ ],
+ });
export default codegenNativeComponent(
'RNCViewPager'
diff --git a/src/index.tsx b/src/index.tsx
index 1e7cbe3d..69abd0a7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,7 +7,7 @@ import type {
OnPageSelectedEventData as PagerViewOnPageSelectedEventData,
OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData,
NativeProps,
-} from './PagerViewNativeComponent';
+} from './PagerViewNativeComponent/PagerViewNativeComponent';
export type {
PagerViewOnPageScrollEventData,
diff --git a/src/utils.tsx b/src/utils.tsx
index 0167992a..0d7d265c 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -1,5 +1,22 @@
import React, { Children, ReactNode } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+export const LEGACY_childrenWithOverriddenStyle = (children?: ReactNode) => {
+ return Children.map(children, (child) => {
+ const element = child as React.ReactElement;
+ return (
+ // Add a wrapper to ensure layout is calculated correctly
+
+ {/* @ts-ignore */}
+ {React.cloneElement(element, {
+ ...element.props,
+ // Override styles so that each page will fill the parent.
+ style: [element.props.style, StyleSheet.absoluteFill],
+ })}
+
+ );
+ });
+};
export const childrenWithOverriddenStyle = (
children?: ReactNode,