react-native-phone-input-component

the phone input with flag button

Installation

npm install react-native-phone-input-component

Usage

import { PhoneInput } from "react-native-phone-input-component";

Examples

| | | | | | -- | -- | -- | -- |

Documentation

The props are the following:

containerStyle

• Description: this is the styles for the container of the input and button

• Type: StyleProp<ViewStyle>

• Default

    { 
      flexDirection: 'row',
      alignItems: 'center',
      height: 50,
    } 

inputStyle

• Description: this is the style for the input, you can change the style up to you.
• Type: StyleProp<ViewStyle>

placeholder

• Type: String

returnKeyType

• Description: When the keyboard pop up, there is button to hide it.
• type: String

onBlur

• Type: (e: NativeSyntheticEvent) => void

onFocus

• Type: (e: NativeSyntheticEvent) => void

onChangeText

• Type: (text: string) => void

placeholderTextColor

• Type: String

textAlign

• Description: this is the text align for the input
• Type: 'left' | 'center' | 'right'

flagSelectorStyle

• Description: the styles for the button, to show the modal to select the country

• Type: StyleProp

• Default:

    {
      height: '100%',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#efecec',
      width: 50,
    }

defaultCountry

• Description: this is the default country that will be displayed, it must be on the two-letters format of the country
• Type: String
• Default: "us"

errorStyle

• Description: the style for the text that will be displayed when the user input an error
• Type: StyleProp

modalStyle

• Description: the style for the modal to choose the country
• Type: ViewStyle

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Thanks

Made with create-react-native-library

Flags provider