React Native Phone Country-Code Input

React Native Component with combined phone number and country code picker functionality. country picker created using react native "Modal" component. country codes flags and dial codes data present locally.

Screenshots

Installation

Install using npm

  npm i react-native-phone-countrycode-input --save

Install using yarn

  yarn add react-native-phone-countrycode-input

Usage

import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import PhoneNumberCountryCodeInput from "react-native-phone-countrycode-input";

export default function Signup() {
  const [mobile, setMobile] = useState("");
  const [countryCode, setCountryCode] = useState("+91");

  return (
    <View style={styles.container}>
      <PhoneNumberCountryCodeInput
        value={mobile}
        countryCode={countryCode}
        setSelCountry={setCountryCode}
        placeHolder={"Enter Phone Number"}
        updatePhoneVal={(val: any) => setMobile(val)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    paddingHorizontal: 20,
    justifyContent: "center",
    backgroundColor: "#ffffff",
  },
});

Props

Parameter	Type	Description
value	string	Value for text input component (phone number value)
placeHolder	string	Placeholder for text input
countryCode	string	Country code value / dial code like +91
inputStyle	TextStyle	Style for text input
searchStyle	TextStyle	Style for search bar component
listItemStyle	ViewStyle	Style for modal list item container
flagImgStyle	ImageStyle	Style for flag image component
containerStyle	ViewStyle	Item container style
downArrowStyle	ImageStyle	Style for down arrow (after flag image)
listDialCodeStyle	TextStyle	Text style for dial code in modal list
listContainerStyle	TextStyle	Style for list container
countryNameTextStyle	TextStyle	Text style for country name in list
setSelCountry	Function	Function to update state when country code selected by user (val:any) => {console.log("country code", val)}
updatePhoneVal	Function	Function to update state of phone when user types phone number (val:any) => {console.log("phone number", val)}
listItemSeparatorStyle	ViewStyle	Separator style for list items
modalInnerContainerStyle	ViewStyle	Modal inner container style

Authors

• @CodingWorkX