react-native-pager-view icon indicating copy to clipboard operation
react-native-pager-view copied to clipboard

RTL is not working

Open trumdongnat opened this issue 4 years ago • 3 comments

Environment

Android 9, Samsung galaxy s8

Description

The RTL is working well on example project "BasicPagerViewExample.tsx" but it is not working when I install the package from npm.

Reproducible Demo

I created a sample project npx react-native init TestRTL --template react-native-template-typescript

And add the package yarn add react-native-pager-view

And the UI like that

<SafeAreaView style={backgroundStyle}>
  <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
  <PagerView
    style={{width: '100%', height: '100%'}}
    initialPage={0}
    layoutDirection="rtl">
    <View key="1">
      <Text>First page</Text>
    </View>
    <View key="2">
      <Text>Second page</Text>
    </View>
  </PagerView>
</SafeAreaView>

trumdongnat avatar Aug 02 '21 19:08 trumdongnat

I have the same issue. rtl doesn't work with next branch.

kaiyes avatar Aug 14 '21 10:08 kaiyes

As a work around from the latest version 5.4.11 I set layoutDirection to ltr It will work on RTL but animation is from the other side unfortunately

omar-bizreh avatar Feb 21 '22 11:02 omar-bizreh

I am facing same issue on layoutDirection any thoughts on this. ?

FadiAboMsalam avatar Apr 10 '22 11:04 FadiAboMsalam

@trumdongnat https://github.com/callstack/react-native-pager-view/pull/613 this pr fixes this issue, please help me get it merged

sebasg0 avatar Oct 03 '22 21:10 sebasg0

This has been fixed by @sebasg0 and released in https://github.com/callstack/react-native-pager-view/releases/tag/v6.0.1

okwasniewski avatar Oct 04 '22 08:10 okwasniewski

RTL still not working in android , in IOS its working. tested on Pixel 6 API 33.

ahmad6242 avatar Oct 16 '22 10:10 ahmad6242

What’s your issue @ahmad6242 as for me android always worked.

Can you try doing the following in android.

In manifest add this android:supportsRtl="true" . In MainApplication.java add I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance(); sharedI18nUtilInstance.allowRTL(this, true); This 2 lines of code but don’t forget to do this import at the top import com.facebook.react.modules.i18nmanager.I18nUtil; . Let me know if it works!

sebasg0 avatar Oct 16 '22 14:10 sebasg0

@sebasg0 Ok i will try that tonight. Will let you know. Thanks

ahmad6242 avatar Oct 18 '22 05:10 ahmad6242