react-native-country-info/src/CountryInfo.js

import React, { useEffect, useState } from 'react'
import { StyleSheet, Dimensions, Text, View, TouchableOpacity, Modal, Pressable, SafeAreaView, TextInput, FlatList } from 'react-native'

import cInfo from './info/countryinfo.json'

const height = Dimensions.get('screen').height;

const CountryInfo = ({
  name = "",
  code = "+91",
  showFlag,
  showIsdCode,
  style,
  selectedColor= 'transparent',
  styleSearch,
  searchInputView,
  flagStyle,
  rowStyle,
  coutryNameStyle,
  codeStyle,
  popupStyle,
  onPressItem = () => null,
}) => {

  console.log("code --- ", code);
  // const [selectedCode, setSelectedCode] = useState(code)
  // const [selectedName, setSelectedName] = useState(name)
  const [showPicker, setShowPicker] = useState(false)
  const [txtCountryName, setTxtCountryName] = useState(name)
  const [countries, setCountries] = useState(cInfo)


  useEffect(() => {
    const searchByName = async () => {
      if (txtCountryName.length > 0) {
        setCountries(cInfo.filter(item => item.name.match(new RegExp(txtCountryName, "i"))))
      }
      else {
        setCountries(cInfo)
      }
    };
    const timerId = setTimeout(() => {
      //filter here
      searchByName()
    }, 500);

    return () => {
      clearTimeout(timerId);
    };
  }, [txtCountryName]);

  const showModel = () => {
    setShowPicker(!showPicker)
  }

  const onSearch = (txtValue) => {
    setTxtCountryName(txtValue)
  }


  const renderItem = ({ item, index }) => {

    return <TouchableOpacity
      activeOpacity={1}
      onPressOut={() => onPressItem(item)} 
      style={[styles.row, {backgroundColor: item.isd_code == code ? selectedColor : 'transparent'}, rowStyle]} 
      onPress={showModel}>
      <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
        {showFlag && <Text style={[styles.flag, flagStyle]}>{item.flag}</Text>}
        <Text style={[styles.name, coutryNameStyle]}>{item.name}</Text>
      </View>
      {showIsdCode && <Text style={[styles.code, codeStyle]} >{item.isd_code}</Text>}
    </TouchableOpacity>
  }
  
  
  return (
    <>

      <TouchableOpacity activeOpacity={1} onPress={showModel}>
        <Text style={[styles.codeStyle, style]}>{code}</Text>
      </TouchableOpacity>
      
      <Modal
        animationType='fade'
        transparent={true}
        visible={showPicker}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!showPicker);
        }}
      >
        <View style={styles.popupView}>
          <SafeAreaView style={{ flex: 1 }}>
            <View style={[styles.modalView, popupStyle]}>
              <View style={[styles.searchContainer, styleSearch]}>
                <TextInput
                  style={[styles.inputSearch, searchInputView]}
                  placeholder="Search"
                  clearButtonMode="always"
                  value={txtCountryName}
                  onChangeText={onSearch}
                  onFocus={() => {
                    // props.setClicked(true);
                  }}
                />
              </View>
              <FlatList
                data={countries}
                showsVerticalScrollIndicator={false}
                showsHorizontalScrollIndicator={false}
                renderItem={renderItem}
                ItemSeparatorComponent={() => <View
                  style={{
                    backgroundColor: 'gray',
                    height: 0.5,
                  }}
                />}
                keyExtractor={(item) => item.name}
              />
              <View style={{ flex: 1 }}>

              </View>
              <TouchableOpacity
                style={[ styles.buttonClose]}
                onPress={() => setShowPicker(!showPicker)}
              >
                <Text style={styles.btnHideTitle}>Hide Modal</Text>
              </TouchableOpacity>
            </View>
          </SafeAreaView>
        </View>
      </Modal>
    </>
  )
}

CountryInfo.defaultProps = {
  // name: "India",
  // code: "+1",
  showFlag: true,
  showIsdCode: true,
  style: {},
  selectedColor: 'transparent',
  styleSearch: {},
  searchInputView: {},
  flagStyle: {},
  coutryNameStyle: {},
  rowStyle: {},
  codeStyle: {},
  popupStyle: {}
};

export default CountryInfo;

const styles = StyleSheet.create({
  codeStyle: { fontSize: 24 },
  row: { 
    flex: 1, 
    flexDirection: 'row', 
    width: '100%', 
    paddingVertical: 15, 
    justifyContent: 'space-between',
    alignItems: 'center' 
  },
  flag:{ fontSize: 25, marginRight: 10 },
  name: { fontSize: 18,  },
  code: {width: 60, alignSelf: 'center'},
  searchContainer: { 
    flexDirection: 'row', 
    height: 50, 
    width: '100%' 
  },
  popupView: {
    flex: 1,
    backgroundColor: '#00000030',
    borderWidth: 0,
    borderColor: 'red',
    padding: 15
  },
  modalView: {
    flex: 1,
    backgroundColor: "white",
    borderRadius: 20,
    // paddingVertical: 15,
    padding: 15,
  },
  inputSearch: {
    flex: 1
  },
  buttonClose: {
    backgroundColor: "#2196F3",
    borderRadius: 20,
    padding: 10
  },
  btnHideTitle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
});