RTL swipe direction not working on Android

alwathan commented 1 year ago

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 commented 12 months ago

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

alwathan commented 12 months ago

@sepperousseau I am using expo

omarZaoujal99 commented 7 months ago

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 commented 6 months ago

no solution yet? the swipe direction is inverted on Android

github-id01 commented 4 months ago

any solution for this ? Am using expo.

blazk0 commented 2 months ago

swipe direction is inverted on android

Selvster commented 1 month ago

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 }] }}>

`

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

callstack / react-native-pager-view