tttstudios / react-native-otp-input

Tiny Javascript library which provides an elegant UI for user to input one time passcode.
MIT License
521 stars 238 forks source link

Suggestion to have an optional styling for the wrapper of text fields #195

Open jpangan opened 1 year ago

jpangan commented 1 year ago

Is your feature request related to a problem? Please describe. The wrapper of text fields seems to be closed for modification. I see that it handles the RTL direction with a ternary operator though this became an issue for me. In our current situation, RTL is well handled on the view level, and the direction of items are handled automatically.

Turning the direction to RTL + another RTL on the wrapper below will revert back to the position of the items.

Describe the solution you'd like Technically, removing the condition and simply passing row-reverse and just sticking with row will fix this BUT I'd recommend having a way for us to extend the style of the input wrapper.

Describe alternatives you've considered I can't think of any alternative because the issue lies within the wrapper of items.

Additional context

This code below causes some issues for us.

<View style={{ flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%', height: '100%' }}> 
  //content
<View>

This led to this :

image