Added RTL support

[alizahid]

Fixes #225

Flips the side from left to right (and in reverse) if I18nManager.isRTL is true

[ronzilca]

work perfect, thank you!

[rt2zz]

@alizahid thanks for pr. Question: why is this better than simply setting side=right to effectively achieve RTL?

[ahmedNY]

hi @rt2zz
I don't know how exactly react-native achieved RTL layout, because it's a bit confusing
for example

<Text style={{textAlign: 'right'}}> مرحبا </Text>

the expected output from the above example is مرحبا in right side of the screen, but.. actually ... no the output of the above example is the world being aligned to the left side of the screen!!!!!!
why is that ????
because the react native team assumed you are going to develop the app for LTR layout first then make it available for RTL layout languages, which is true, ;) and to make react components looks good out of the box, they made any left aligned element on LTR, right aligned on RTL and right aligned elements in LTR is left aligned on RTL and so on.

why is this better than simply setting side=right to effectively achieve RTL?

because the default side="left" drawer look good on RTL layout!!. and rendered on the right side of the screen as expected on RTL layout,
so setting side="right" will display the drawer on the left side of the screen!!!!!

the problem is tapToClose and panCloseMask not works as expected you need to tap the right side of the drawer to close it

[kabaros]

Thank you man. This should be merged otherwise the Drawer is not functional for RTL layouts.

[kkaczmarczyk]

Thanks! Are there any plans on merging this yet?

[alizahid]

@rt2zz What @ahmedNY said.

[efratyo]

Works great! Thank you.

[Den368]

Thank you, @rt2zz please merge it

[mostafaspace]

I had the same problem as @ahmedNY said with tapToClose and panCloseMask when I try to use forceRTL(true) .. it keeps the clickable overlay on the right over of the drawer, which keeps you from clicking the drawer items.

How I fixed it is by replacing those to lines in the index.js of the react-native-drawer folder :
let deltaOpen = this.props.side === 'left' ? this.state.viewport.width - x0 : x0
let deltaClose = this.props.side === 'left' ? x0 : this.state.viewport.width - x0

By:
import I18n from 'react-native-i18n' in the top

let deltaOpen = I18n.locale === 'ar' ? x0 : this.state.viewport.width - x0
let deltaClose = I18n.locale === 'ar' ? x0 : this.state.viewport.width - x0

Also I copied react-native-drawer folder in my project to avoid it being overwritten by an update and changed the import