RTL swipe direction not working on Android

[alwathan]

Environment

"react-native-pager-view": "^6.2.1", "react-native": "0.72.4", "expo": "~49.0.8",

Description

RTL swipe direction not working on Android.

This is my script

import React from "react";
import {I18nManager, StyleSheet, View, Text } from "react-native";
import PagerView from "react-native-pager-view";

I18nManager.allowRTL(true);
I18nManager.forceRTL(true);
I18nManager.swapLeftAndRightInRTL(true);

const Pager = () => {
  return (
    <PagerView style={styles.pagerView} initialPage={0} layoutDirection={"rtl"}>
      <View key="1">
        <Text>First page</Text>
      </View>
      <View key="2">
        <Text>Second page</Text>
      </View>
    </PagerView>
  );
};

const styles = StyleSheet.create({
  pagerView: {
    flex: 1,
  },
});

export default Pager;

Demo

[sepperousseau]

@alwathan Did you add android:supportsRtl="true" to your AndroidManifest? For me this fixed the issue.

[alwathan]

@sepperousseau I am using expo

[omarZaoujal99]

same here, layoutDirection="rtl" not working in android, even if android:supportsRtl="true"

"expo": "~49.0.13", "react-native": "0.72.5", "react-native-pager-view": "6.2.0",

[hasan642]

no solution yet? the swipe direction is inverted on Android

[github-id01]

any solution for this ? Am using expo.

[blazk0]

swipe direction is inverted on android

[Selvster]

I added transform: [{ scaleX: -1 }], to my PagerView & inner views and it worked well <PagerView style={[styles.pageViewer, {transform: [{ scaleX: -1 }] }]} <View key={1} style={{ justifyContent: 'center', transform: [{ scaleX: -1 }] }}> <TransferRequestCertifying /> </View>

Demo https://snack.expo.dev/QIVnXCr40GA7iVdfYT2kt

[MrRefactor]

Hey, are you still able to reproduce that issue? I cannot reproduce it in example repository, checked using layoutDirection={"rtl"} property.

https://github.com/user-attachments/assets/4e3b927f-c2b5-4937-8c37-9481299103e9

https://github.com/user-attachments/assets/33a035c0-e85c-4297-ae27-8cabdb82dfbc