feat: added RTL support (#32) by @aleppos

src/PaperOnboarding.tsx

@@ -1,5 +1,10 @@
 import React, { useMemo, useRef, useCallback, memo, useState } from 'react';
-import { Dimensions, Insets, LayoutChangeEvent } from 'react-native';
+import {
+  Dimensions,
+  Insets,
+  LayoutChangeEvent,
+  I18nManager,
+} from 'react-native';
 import { usePanGestureHandler, useValue } from 'react-native-redash';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 import Animated, {
@@ -87,10 +92,12 @@ const PaperOnboardingComponent = ({
   const { gestureHandler, state, translation, velocity } =
     usePanGestureHandler();
 
-  const indicatorsContainerLeftPadding = useMemo(
-    () => dimensions.width / 2 - indicatorSize / 2,
-    [dimensions.width, indicatorSize]
-  );
+  const indicatorsContainerLeftPadding = useMemo(() => {
+    const containerLeftPadding = dimensions.width / 2 - indicatorSize / 2;
+    return I18nManager.isRTL
+      ? -containerLeftPadding + indicatorSize * (data.length - 1)
+      : containerLeftPadding;
+  }, [dimensions.width, indicatorSize, data.length]);
 
   // animations
   const animatedStaticIndex = useValue(0);
@@ -103,10 +110,15 @@ const PaperOnboardingComponent = ({
     screenWidth: dimensions.width,
   });
 
+  const indicatorsContainerPosition = data.map(
+    (_, index) => index * indicatorSize * -1
+  );
   const animatedIndicatorsContainerPosition = add(
     interpolate(animatedIndex, {
       inputRange: data.map((_, index) => index),
-      outputRange: data.map((_, index) => index * indicatorSize * -1),
+      outputRange: I18nManager.isRTL
+        ? indicatorsContainerPosition.reverse()
+        : indicatorsContainerPosition,
       extrapolate: Animated.Extrapolate.CLAMP,
     }),
     indicatorsContainerLeftPadding

src/components/background/Background.tsx

@@ -41,6 +41,7 @@ const BackgroundComponent = ({
             color={item.backgroundColor}
             extendedSize={extendedSize}
             bottomPosition={bottomPosition}
+            screenDimensions={screenDimensions}
             indicatorSize={indicatorSize}
             animatedIndicatorsContainerPosition={
               animatedIndicatorsContainerPosition

src/components/backgroundCircle/BackgroundCircle.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, I18nManager } from 'react-native';
 import { Circle, CircleProps } from 'react-native-svg';
 import Animated, { add, Extrapolate } from 'react-native-reanimated';
 import type { BackgroundCircleProps } from '../../types';
@@ -21,6 +21,7 @@ const BackgroundCircleComponent = ({
   color,
   extendedSize,
   bottomPosition,
+  screenDimensions,
   indicatorSize,
   animatedIndicatorsContainerPosition,
 }: BackgroundCircleProps) => {
@@ -41,7 +42,8 @@ const BackgroundCircleComponent = ({
   const animatedLeftPosition = add(
     animatedIndicatorsContainerPosition,
     indicatorSize / 2,
-    index * indicatorSize
+    I18nManager.isRTL ? -((index + 1) * indicatorSize) : index * indicatorSize,
+    I18nManager.isRTL ? screenDimensions.width : 0
   );
   //#endregion
 

src/types.d.ts

@@ -204,4 +204,5 @@ export interface BackgroundCircleProps
   color: string;
   extendedSize: number;
   bottomPosition: number;
+  screenDimensions: PaperOnboardingScreenDimensions;
 }

src/useTiming.ts

@@ -16,6 +16,7 @@ import Animated, {
   abs,
   timing,
 } from 'react-native-reanimated';
+import { I18nManager } from 'react-native';
 import { State } from 'react-native-gesture-handler';
 import { useClock, useValue } from 'react-native-redash';
 
@@ -67,13 +68,13 @@ export const useTiming = ({
 
   const valueClamp = interpolate(value, {
     inputRange: [screenWidth * -1, 0, screenWidth],
-    outputRange: [1, 0, -1],
+    outputRange: I18nManager.isRTL ? [-1, 0, 1] : [1, 0, -1],
     extrapolate: Animated.Extrapolate.CLAMP,
   });
 
   const velocityClamp = interpolate(velocity, {
     inputRange: [screenWidth * -2, 0, screenWidth * 2],
-    outputRange: [0.5, 0, -0.5],
+    outputRange: I18nManager.isRTL ? [-0.5, 0, 0.5] : [0.5, 0, -0.5],
     extrapolate: Animated.Extrapolate.CLAMP,
   });