fix: tab indicator did not work correctly in RTL mode (#193)

src/MaterialTabBar/Indicator.tsx

@@ -7,6 +7,8 @@ import Animated, {
   interpolate,
 } from 'react-native-reanimated'
 
+import { isRTL } from '../helpers'
+
 import { IndicatorProps } from './types'
 
 const Indicator: React.FC<IndicatorProps> = ({
@@ -25,7 +27,8 @@ const Indicator: React.FC<IndicatorProps> = ({
               translateX: interpolate(
                 indexDecimal.value,
                 itemsLayout.map((_, i) => i),
-                itemsLayout.map((v) => v.x)
+                // when in RTL mode, the X value should be inverted
+                itemsLayout.map((v) => isRTL ? -1 * v.x : v.x)
               ),
             },
           ]

src/helpers.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
-import { FlatList, Platform, SectionList } from 'react-native'
+import { FlatList, Platform, SectionList, I18nManager } from 'react-native'
 import Animated, { scrollTo } from 'react-native-reanimated'
 
 import { Ref, RefComponent } from './types'
 
 /** The time one frame takes at 60 fps (16 ms) */
 export const ONE_FRAME_MS = 16
 
+/** check if app is in RTL mode or not */
+export const { isRTL } = I18nManager
+
 export const IS_IOS = Platform.OS === 'ios'
 
 export const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)