rn-phone-number-picker/index.js

rn-phone-number-picker A customizable PhoneNumberInput screen component for React Native projects. Use this open source library in your fresh React Native project for instant startup.

import React, { useEffect, useState } from "react";
import {
  TextInput,
  View,
  StyleSheet,
  Modal,
  TouchableOpacity,
  Text,
  FlatList,
} from "react-native";
import { countries } from "../components/Country";

const PhoneNumberInput = ({
  inputStyle,
  placeholderText,
  keyboardType,
  placeholderTextColor,
  initialCode,
  containerStyle,
  modalContainerStyle,
  initialValue,
}) => {
  const [phoneNumber, setPhoneNumber] = useState("");
  const [selectedCountry, setSelectedCountry] = useState(null);
  const [selectedFlag, setSelectedFlag] = useState(null);
  const [selectedCountryCode, setSelectedCountryCode] = useState(null);

  const [isModalVisible, setIsModalVisible] = useState(false);

  console.log(initialCode, "ss");

  const aboutContries = countries;

  useEffect(() => {
    aboutContries.map((val) => {
      if (val.code == initialCode) {
        console.log(val);

        setSelectedFlag(val.flag);
        setSelectedCountry(val.code);
        setSelectedCountryCode(val.countryCode);
      }
    });
  }, []);

  const handlePhoneNumberChange = (text) => {
    const cleanedText = text.replace(/\D/g, "");
    setPhoneNumber(cleanedText);
  };

  const handleCountrySelect = ({ name, flag, code, countryCode }) => {
    setSelectedCountry(code);
    setSelectedFlag(flag);
    setSelectedCountryCode(countryCode);
    setIsModalVisible(false);
  };

  const handleButtonClick = () => {
    console.log("Button clicked");
  };

  return (
    <View style={[styles.container, containerStyle]}>
      <Modal visible={isModalVisible}>
        <View style={[styles.modalContainer, modalContainerStyle]}>
          <FlatList
            showsVerticalScrollIndicator={false}
            data={countries}
            // data={data}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => (
              <TouchableOpacity
                style={styles.countryItem}
                onPress={() => handleCountrySelect(item)}
              >
                <View style={{ flexDirection: "row" }}>
                  <Text style={styles.flag}>
                    {item.flag} {"   "}
                  </Text>
                  <Text style={styles.text}>{item.name}</Text>
                </View>
              </TouchableOpacity>
            )}
          />
        </View>
      </Modal>

      <View style={{ flexDirection: "row" }}>
        <TouchableOpacity
          style={styles.selectedCountry}
          onPress={() => setIsModalVisible(true)}
        >
          <View style={{ flexDirection: "row" }}>
            <Text style={styles.text}>
              {selectedFlag} {selectedCountry || "Select Country"}
            </Text>
            <Text style={styles.text1}>
              {selectedCountry ? `${selectedCountryCode}` : ""}
            </Text>
          </View>
        </TouchableOpacity>

        <TextInput
          style={[styles.input, inputStyle]}
          placeholder={placeholderText ? placeholderText : "Enter Phone Number"}
          keyboardType={keyboardType}
          value={initialValue}
          onChangeText={handlePhoneNumberChange}
          placeholderTextColor={placeholderTextColor}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    padding: 10,
  },
  selectedCountry: {
    height: 50,
    borderWidth: 0.5,
    borderColor: "black",
    paddingHorizontal: 10,
    marginBottom: 10,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "grey",
  },
  input: {
    height: 50,
    borderWidth: 0.5,

    borderColor: "black",
    paddingHorizontal: 10,
    flex: 1,
    backgroundColor: "grey",
    color: "black",
    fontSize: 16,
  },
  modalContainer: {
    flex: 1,

    backgroundColor: "white",
  },
  countryItem: {
    paddingVertical: 10,

    color: "black",
  },
  text: {
    color: "black",
    fontSize: 17,
  },
  flag: {
    fontSize: 17,
    paddingLeft: 13,
  },
  buttonText: {
    fontSize: 17,
    fontWeight: "500",
    color: "white",
  },
  button: {
    width: 150,
    height: 40,
    backgroundColor: "#163663",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 7,
  },
  text1: {
    color: "black",
    fontSize: 17,
    paddingLeft: 4,
  },
});

export default PhoneNumberInput;