Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RTL Support #36

Open
xahmedtaha opened this issue Jan 13, 2021 · 5 comments
Open

RTL Support #36

xahmedtaha opened this issue Jan 13, 2021 · 5 comments
Labels
bug Something isn't working enhancement New feature or request help wanted Extra attention is needed

Comments

@xahmedtaha
Copy link

Hello! Thanks for the awesome package.
do you plan on adding proper rtl support soon?
the selection indicator is flipped and and selection using mouse is reversed (if I click on 45 it chooses 15 and vice versa)
Screenshot from 2021-01-13 13-22-47

@RichardLindhout
Copy link
Member

Ah we should fix this. Could you maybe do a PR for this?

@RichardLindhout RichardLindhout added bug Something isn't working enhancement New feature or request help wanted Extra attention is needed labels Jan 18, 2021
@chakrihacker
Copy link
Contributor

Is there a spec on how it should look on RTL?

@asherguedalia
Copy link

Hi is there a suggestion yet how to fix this? I also ran into the same issue

@0had0
Copy link

0had0 commented Jun 10, 2022

inputContainer: {
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     alignItems: 'center',
   },

inside /node_modules/react-native-paper-dates/src/Time/TimePicker.tsx

#######################################

getMinuteNumbers(size: number, count: number) {
   return Array(12)
     .fill(true)
     .map(() => {
-      let x = Math.round(size / 2 + radius * Math.cos(angle))
+      let x = Math.round(I18nManager.isRTL ? size / 2 - radius * Math.cos(angle) :  size / 2 + radius * Math.cos(angle))

inside /node_modules/react-native-paper-dates/src/Time/DisplayModeContext.tsx

#######################################

getHourNumbers(
   return Array(arrayLength)
     .fill(true)
     .map(() => {
-      let x = Math.round(size / 2 + radius * Math.cos(angle))
+      let x = Math.round(I18nManager.isRTL ?  size / 2 - radius * Math.cos(angle) :  size / 2 + radius * Math.cos(angle))

inside /node_modules/react-native-paper-dates/src/Time/AnalogClockMinutes.tsx

@0had0
Copy link

0had0 commented Jun 10, 2022

don't forget to import I18nManager from react-native in each file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

5 participants