fix: indicators in RTL

PedroBern · Oct 28, 2024 · 34b02a5 · 34b02a5
1 parent 88000cc
commit 34b02a5
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/src/MaterialTabBar/Indicator.tsx b/src/MaterialTabBar/Indicator.tsx
@@ -18,6 +18,8 @@ const Indicator: React.FC<IndicatorProps> = ({
 }) => {
   const opacity = useSharedValue(fadeIn ? 0 : 1)
 
+  const layoutForDirection = isRTL ? itemsLayout.slice().reverse() : itemsLayout
+
   const stylez = useAnimatedStyle(() => {
     const firstItemX = itemsLayout[0]?.x ?? 0
 
@@ -28,21 +30,18 @@ const Indicator: React.FC<IndicatorProps> = ({
             ? interpolate(
                 indexDecimal.value,
                 itemsLayout.map((_, i) => i),
-                // when in RTL mode, the X value should be inverted
-                itemsLayout.map((v) => (isRTL ? -1 * v.x : v.x))
+                layoutForDirection.map((v) => v.x)
               )
-            : isRTL
-              ? -1 * firstItemX
-              : firstItemX,
+            : firstItemX,
       },
     ]
 
     const width =
       itemsLayout.length > 1
         ? interpolate(
             indexDecimal.value,
-            itemsLayout.map((_, i) => i),
-            itemsLayout.map((v) => v.width)
+            layoutForDirection.map((_, i) => i),
+            layoutForDirection.map((v) => v.width)
           )
         : itemsLayout[0]?.width
 
@@ -69,6 +68,8 @@ const styles = StyleSheet.create({
     backgroundColor: '#2196f3',
     position: 'absolute',
     bottom: 0,
+    left: isRTL ? undefined : 0,
+    right: isRTL ? 0 : undefined,
   },
 })