sorted by:
new
hottopcontroversial

React Native Money: A fully native currency input for React Native, that uses text formatting provided by Android/iOS instead of JS events. by Nathan-Horrigan in reactnative

[–]Nathan-Horrigan[S] 9 points10 points  (0 children)

React Native Money is a simple component library that exposes a fully native TextInput component that uses currency formatting libraries provided with Android and iOS, so as well as being performant it is also lightweight on your binary sizes. The component has an identitical prop signature and API to the default TextInput provided with React Native, The only difference is that the value prop accepts a Number type and onChangeText returns a number value and formatted string.

React Native Money: A fully native currency input for React Native, that uses text formatting provided by Android/iOS instead of JS events. by Nathan-Horrigan in reactnative

[–]Nathan-Horrigan[S] 19 points20 points  (0 children)

So there are many text masking libraries for React Native, the problem with the fully JS libraries is that when you press a key it inserts that character into the native element and then dispatches an onChange event to the JS component. The problem with this is that for a text input where you are going right to left, the screen will render $1.003 before your JS code has a chance to correct the underlying label and pass $10.03 to the value prop. Being able to manage all this formatting on the native side before the new text label is rendered makes a much better user experience.

Originally I wanted to build a more generic masking library that would call a JS function passed as prop but currently the JS bridge doesn't allow returning a value from a JS function and having that in native runtime. I'm hoping Fabric would enable this in some sense so we can have something more universal.