diff --git a/src/MaterialTabBar/Indicator.tsx b/src/MaterialTabBar/Indicator.tsx index 360694ca..5fd40510 100644 --- a/src/MaterialTabBar/Indicator.tsx +++ b/src/MaterialTabBar/Indicator.tsx @@ -18,6 +18,8 @@ const Indicator: React.FC = ({ }) => { const opacity = useSharedValue(fadeIn ? 0 : 1) + const layoutForDirection = isRTL ? itemsLayout.slice().reverse() : itemsLayout + const stylez = useAnimatedStyle(() => { const firstItemX = itemsLayout[0]?.x ?? 0 @@ -28,12 +30,9 @@ const Indicator: React.FC = ({ ? 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, }, ] @@ -41,8 +40,8 @@ const Indicator: React.FC = ({ 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, }, })