Package Exports

react-native-phone-countrycode-input
react-native-phone-countrycode-input/index.tsx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-phone-countrycode-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

App Screenshot

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