Update: Yes, "without country select" component.

First, create PhoneTextInput.js file:

import React, { useCallback } from 'react'
import PropTypes from 'prop-types'
import { TextInput } from 'react-native'

function PhoneTextInput({ 
  placeholder, 
  autoComplete, 
  autoFocus, 
  value, 
  onChange 
}, ref) {
  // Instead of `onChangeText` it could use `onChange` and get `value` from `nativeEvent.text`.
  const onChangeText = useCallback((value) => {
    onChange({
      preventDefault() { this.defaultPrevented = true },
      target: { value }
    })
  }, [onChange])
  return (
    <TextInput
      ref={ref}
      placeholder={placeholder}
      autoFocus={autoFocus}
      autoCompleteType={autoComplete}
      keyboardType="phone-pad"
      onChangeText={onChangeText}
      value={value}/>
  )
}

PhoneTextInput = React.forwardRef(PhoneTextInput)

PhoneTextInput.propTypes = {
  placeholder: PropTypes.string,
  autoComplete: PropTypes.string,
  autoFocus: PropTypes.bool,
  value: PropTypes.string,
  onChange: PropTypes.func.isRequired
}

export default PhoneTextInput

Then, in a React Native application:

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

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

Report in this issue if it works.

(React Native) Can this package be used in the React Native? #296

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions