Fix: Proper RTL support

[iyadthayyil]

TODO

• BottomNavigation
• Button
• Caption
• Card
• CardActions
• CardContent
• CardCover
• Checkbox
• Chip
• Dialog
• DialogActions
• DialogContent
• DialogScrollArea
• DialogTitle
• Divider
• DrawerItem
• DrawerSection
• FAB
• FABGroup
• Headline
• HelperText
• ListAccordion
• ListItem
• ListSection
• Modal
• Paper
• Paragraph
• ProgressBar
• RadioButton
• RadioButtonGroup
• Searchbar
• Snackbar
• Subheading
• Switch
• Text
• TextInput
• Title
• Appbar
• AppbarAction
• AppbarBackAction
• AppbarContent
• TouchableRipple
• Icons

fixes #375

[callstack-bot]

Hey @iyadthayyil, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[satya164]

Hey @iyadthayyil! Thanks so much for the pull request. This is really awesome!

Regarding the approach, I think rtl support should be automatic without having to provide an iconRtl prop. The Icon component should flip itself if we detect RTL.

Is there any case where this behavior is not desirable?

If it's really a necessity, I think a better approach will be to add rtl: boolean to the theme.

Please join our discord if you wanna chat: https://discord.gg/zwR2Cdh

[ferrannp]

@iyadthayyil are you still working on this? This is quite important for v2.

[iyadthayyil]

@ferrannp Most components are already RTL supported, except few like texts, icons, textInput and searchBar.
Me and @waquidvp fixed some of them, we are waiting for new textInput pull request to be merged to work on it, also I have some questions about searchBar styling for RTL

[iyadthayyil]

@satya164 I have fixed RTL support of icons as you requested, but some tests are failing can you take a look on it please.

[satya164]

@iyadthayyil awesome. to update the snapshot tests you can run yarn test -u and to fix the eslint errors, you can run yarn lint --fix

[ferrannp]

It looks like we still have some Flow errors.

[defint]

Hello!
First of all we are very happy to use your library, it's cool, well documented and really reduces amount of our headache. We are currently in the process of development one production application and recently we ran into one problem with arabic language support for input fields.

We know that you are in the process of fixing it, but due to our time constraints it's really important for us to know at least approximate schedule for fixing this problem. So we can make a decision whether it would be better just to wait for your fixes, or to fork and try to support it on our own. So, could you please give us approximate amount of time you are planning to spend on fixes, if it wouldn't bother you much?

Looking forward for your answers and thank you for your work.

Regards,
Avalanche Laboratory developers

[satya164]

@defint Hey, we can't provide a timeline yet. I'd suggest forking it for now and maybe send a pull request :D

Also, it'll better if you wait till #429 is merged before you fork :)

[ferrannp]

@iyadthayyil do you need any help to land this?

[iyadthayyil]

I have no idea about the errors, @satya164 @ferrannp your help is highly appreciated.

[satya164]

I'll check it soon when I get some time.

[samhoseinkhani]

after all these changes how we can make lists RTL ?

[masoud-msk]

Does TextInput support RTL?

[Trancever]

@masoud-msk Yes, it does

[mtn1988]

@Trancever
After updating React Native from 0.58.6 to 0.59.4, TextInput doesn't support RTL anymore!!
My react-native-paper version is 2.15.2

[meliodev]

RTL is not working for TextInput. I tested on Android.