Prevent pressing dot key in React Native numeric type keyboard

user_16355034 0
Viewed 280

I developed an application where user can enter their mobile numbers and I want to prevent users from pressing the dot and dash key, How can I achieve it?

react-native reactjs node.js javascript
2 Answers

you can use react-phone-number-input

import React, { useState } from 'react'
import PhoneInput from 'react-phone-number-input/react-native-input'

function Example() {
  const [value, setValue] = useState()
  return (
    <PhoneInput
      style={...}
      defaultCountry="US"
      value={value}
      onChange={setValue} />
  )
}

see here demo

To display number phone you can use formater


import { formatPhoneNumber } from 'react-phone-number-input'
formatPhoneNumber('+12133734253') === '(213) 373-4253'

then put in text

<Text>
  {formatPhoneNumber('+12133734253')}
</Text>
user_91614780

For the sake of not integrating a third party package just to check the phone number, you can simply create a regex that matches dot and dash keys and show a message "Please don't use "-" and "." while users are entering their phone number. This solution will provide more space for you to tweak things later if the needs from this component changes.

user_175139330
Related