feat: RTL support (#391)

* feat(android): rtl support

* feat(ios): rtl support

* docs: update readme with layoutDirection prop

* fix: emit correct rtl progress values

* refactor: rename variable

Co-authored-by: Piotr Trocki

Author: mikeqcp

README.md

@@ -153,6 +153,7 @@ For advanced usage please take a look into our [example project](https://github.
 | `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    |
 
 | Method                                     |                                                                                                         Description                                                                                                          | Platform |
 | ------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------: |

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

@@ -1,5 +1,6 @@
 package com.reactnativepagerview
 
+import android.util.LayoutDirection
 import android.view.View
 import androidx.fragment.app.FragmentActivity
 import androidx.viewpager2.widget.ViewPager2
@@ -163,6 +164,24 @@ class PagerViewViewManager : ViewGroupManager<ViewPager2>() {
         }
     }
   }
+  
+  @ReactProp(name = "layoutDirection")
+  fun setLayoutDirection(viewPager: ViewPager2, value: String) {
+    when (value) {
+      "rtl" -> {
+        viewPager.layoutDirection = View.LAYOUT_DIRECTION_RTL
+      }
+      "ltr" -> {
+        viewPager.layoutDirection = View.LAYOUT_DIRECTION_LTR
+      }
+      "locale" -> {
+        viewPager.layoutDirection = View.LAYOUT_DIRECTION_LOCALE
+      }
+      else -> {
+        viewPager.layoutDirection = View.LAYOUT_DIRECTION_INHERIT
+      }
+    }
+  }
 
   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Map<String, String>> {
     return MapBuilder.of(

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

@@ -7,6 +7,7 @@
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:usesCleartextTraffic="true"
+        android:supportsRtl="true"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:theme="@style/AppTheme">
         <activity

example/ios/Podfile.lock

@@ -185,7 +185,7 @@ PODS:
     - React-cxxreact (= 0.63.4)
     - React-jsi (= 0.63.4)
   - React-jsinspector (0.63.4)
-  - react-native-pager-view (5.2.0):
+  - react-native-pager-view (5.2.1):
     - React-Core
   - react-native-safe-area-context (3.2.0):
     - React-Core
@@ -382,7 +382,7 @@ SPEC CHECKSUMS:
   React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
   React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
   React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
-  react-native-pager-view: b72d689fb81435f2cab3d556136c83ed124426b0
+  react-native-pager-view: 2864530d861ab2970beb2cd0b4cf2292cd30cd84
   react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
   React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
   React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b

example/src/BasicPagerViewExample.tsx

@@ -20,6 +20,7 @@ export function BasicPagerViewExample() {
         ref={ref}
         style={styles.PagerView}
         initialPage={0}
+        layoutDirection="ltr"
         overdrag={navigationPanel.overdragEnabled}
         scrollEnabled={navigationPanel.scrollEnabled}
         onPageScroll={navigationPanel.onPageScroll}

ios/ReactNativePageView.h

@@ -22,6 +22,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property(nonatomic, copy) RCTDirectEventBlock onPageScroll;
 @property(nonatomic, copy) RCTDirectEventBlock onPageScrollStateChanged;
 @property(nonatomic) BOOL overdrag;
+@property(nonatomic) NSString* layoutDirection;
 
 
 - (void)goTo:(NSInteger)index animated:(BOOL)animated;

ios/ReactNativePageView.m

@@ -7,6 +7,7 @@
 #import "RCTOnPageScrollEvent.h"
 #import "RCTOnPageScrollStateChanged.h"
 #import "RCTOnPageSelected.h"
+#import <math.h>
 
 @interface ReactNativePageView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
 
@@ -45,6 +46,7 @@ - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher {
         _eventDispatcher = eventDispatcher;
         _cachedControllers = [NSHashTable weakObjectsHashTable];
         _overdrag = NO;
+        _layoutDirection = @"ltr";
     }
     return self;
 }
@@ -217,7 +219,8 @@ - (void)goTo:(NSInteger)index animated:(BOOL)animated {
         return;
     }
 
-    UIPageViewControllerNavigationDirection direction = (index > self.currentIndex) ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
+    BOOL isForward = (index > self.currentIndex && [self isLtrLayout]) || (index < self.currentIndex && ![self isLtrLayout]);
+    UIPageViewControllerNavigationDirection direction = isForward ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
 
     NSInteger indexToDisplay = index;
 
@@ -296,12 +299,14 @@ - (void)pageViewController:(UIPageViewController *)pageViewController
 
 - (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
        viewControllerAfterViewController:(UIViewController *)viewController {
-    return [self nextControllerForController:viewController inDirection:UIPageViewControllerNavigationDirectionForward];
+    UIPageViewControllerNavigationDirection direction = [self isLtrLayout] ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
+    return [self nextControllerForController:viewController inDirection:direction];
 }
 
 - (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
       viewControllerBeforeViewController:(UIViewController *)viewController {
-    return [self nextControllerForController:viewController inDirection:UIPageViewControllerNavigationDirectionReverse];
+    UIPageViewControllerNavigationDirection direction = [self isLtrLayout] ? UIPageViewControllerNavigationDirectionReverse : UIPageViewControllerNavigationDirectionForward;
+    return [self nextControllerForController:viewController inDirection:direction];
 }
 
 #pragma mark - UIPageControlDelegate
@@ -342,8 +347,9 @@ - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoi
     [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"settling" coalescingKey:_coalescingKey++]];
 
     if (!_overdrag) {
-        BOOL isFirstPage = _currentIndex == 0;
-        BOOL isLastPage = _currentIndex == _reactPageIndicatorView.numberOfPages - 1;
+        NSInteger maxIndex = _reactPageIndicatorView.numberOfPages - 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;
 
@@ -381,14 +387,17 @@ - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
 
     NSInteger position = self.currentIndex;
 
-    if(offset<0 && position>0){
+
+    BOOL isAnimatingBackwards = ([self isLtrLayout] && offset<0) || (![self isLtrLayout] && offset > 0.05f);
+    if(isAnimatingBackwards && position > 0){
         position =  self.currentIndex - 1;
-        absoluteOffset =  1 - absoluteOffset;
+        absoluteOffset =  fmax(0, 1 - absoluteOffset);
     }
 
     if (!_overdrag) {
-        BOOL isFirstPage = _currentIndex == 0;
-        BOOL isLastPage = _currentIndex == _reactPageIndicatorView.numberOfPages - 1;
+        NSInteger maxIndex = _reactPageIndicatorView.numberOfPages - 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;
 
@@ -420,4 +429,12 @@ - (NSString *)determineScrollDirection:(UIScrollView *)scrollView {
     }
     return scrollDirection;
 }
-@end
+
+- (BOOL)isLtrLayout {
+    if ([_layoutDirection isEqualToString:@"locale"]) {
+        return [UIApplication sharedApplication].userInterfaceLayoutDirection == UIUserInterfaceLayoutDirectionLeftToRight;
+    } else {
+        return [_layoutDirection isEqualToString:@"ltr"];
+    }
+}
+@end

ios/ReactViewPagerManager.m

@@ -16,6 +16,7 @@ @implementation ReactViewPagerManager
 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

src/types.ts

@@ -71,6 +71,15 @@ export interface PagerViewProps {
    */
   keyboardDismissMode?: 'none' | 'on-drag';
 
+  /**
+   * A class for defining layout directions. A layout direction can be left-to-right (LTR) or right-to-left (RTL).
+   * It can also be deduced from the default language script of a locale.
+   *   - 'rtl' right to left
+   *   - 'ltr', left to right
+   *   - 'locale', default language script of a locale
+   */
+  layoutDirection?: 'rtl' | 'ltr' | 'locale';
+
   /**
    * Blank space to show between pages. This is only visible while scrolling, pages are still
    * edge-to-edge.