TextInput type numeric with thousand seperator

[darabiv]

hi necolas, Thanks in advance for your efforts. In pure react-native, we are able to set state of a TextInput value of type 'numeric', separating 3-digits with comma(,). I store the pure number value in a separate state value and show comma-separated value in TextInput value, with no error or warning. but as react-native-web converts it to HTML input, I face errors. Firstly, it does not render the value (comma separated) in the input (as it is of type='number') and as a result the input is always empty, although the number value is stored in state by onChangeText. Secondly, it warns me that the value in input must be of type number and no comma are allowed. Could you please let me know how to make it?

[0xpatrickdev]

Hey @darabiv, are you sure the behavior you're describing is in line with the RN TextInput API?

It is my understanding that it only works with strings, and a keyboardType="numeric" prop will only render a numeric keyboard, and not a numeric value.

The input type="numeric" you describe seems to be part of the Web/HTML API, and type not listed as a property for TextInput in the React Native docs.

Here is a simple snack that shows the default behavior of TextInput in react-native (note, typeof is always 'string'): https://snack.expo.io/@pcooney10/disrespectful-bubblegum

To achieve the desired effect you're looking for - numbers delineated by commas - you'd probably want to build some sort of input mask, or use a library like this: https://www.npmjs.com/package/react-native-masked-text.

[RichardLindhout]

@darabiv this is probably because of your browser locale as in some countries amounts are types by . notation and others with ,. That being said it'll now be a text-input with a number keyboard on mobile web like with React Native.