A Friendly Way for React Native to Handle Number Input

React Native is a cross platform solution for app development. Web has type='number' to constrain the input characters and or Mobile device has keyboardType to control the input as, but there are still some corner cases that are not properly handled, and easily cause NaN error, because it would allowed invalidate number input, eg multiple dots.

https://snack.expo.dev/@dotku/textinput---number

Fist let’s see what are some “type” related control that React Native supports. They are:

• dataDetectorTypes
• keyboardType
• returnKeyType
• textContentType (iOS only)

dataDetectorTypes are used to determine if the types of data could be converted to clickable URLs in the text input, eg “phoneNumber”, “link” and etc.

keyboardType controls the soft keyboard layout, could display keyboard such as “number-pad”, “decimal-pad”, and etc.