Could not find a declaration file for module 'react-native-country-codes-picker/components/CountryPicker'.

Unfortunately, flag emojis are not displayed on windows.
How can i fix it?

Print below:

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I couldn't spent much time on fixing this ts error, hence i just ignored the line which is causing the ts error.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-country-codes-picker/index.tsx b/node_modules/react-native-country-codes-picker/index.tsx
index 1d2131f..fc7e6e2 100644
--- a/node_modules/react-native-country-codes-picker/index.tsx
+++ b/node_modules/react-native-country-codes-picker/index.tsx
@@ -394,6 +394,7 @@ export const CountryList = ({
             style={[style?.itemsList]}
             keyboardShouldPersistTaps={'handled'}
             renderItem={renderItem}
+            // @ts-ignore
             ListHeaderComponent={(popularCountries && ListHeaderComponent && !searchValue ) &&
                 <ListHeaderComponent countries={preparedPopularCountries} lang={lang}/>}
             {...rest}

This issue body was partially generated by patch-package.

• Most other country pickers have this.

E.G, a prop that lets you enter US, CA, UK, and those 3 countries show at the top of the list.

Expose the flag component separately. This will help user to create a button with flag and country name, upon touch open the country picker

Hello, I was trying to make a snapshop using Jest but it's throwing me this error:

this is my snapshop:

import React from 'react';
import Phone from '../../../components/storyBook/components/inputs/Phone';
import renderer from 'react-test-renderer';

test('renders correctly', () => {
  const tree = renderer
    .create(
      <Phone
        onCountryCodeChange={() => {}}
        inputValue={''}
        onChangeText={() => {}}
        inputIsDisabled={false}
        floatingLabelText={'Label'}
        inputIsInValid={false}
      />,
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});

and this is my react component:

        <View>
          <CountryPicker
            lang="es"
            show={show}
            onBackdropPress={() => setShow(false)}
            pickerButtonOnPress={item => {
              setCountryCode(item.flag + ' ' + item.dial_code);
              onCountryCodeChange?.(item.flag + ' ' + item.dial_code);
              setShow(false);
            }}
            inputPlaceholder={'Selecciona tu país'}
            searchMessage={'Lo sentimos, no pudimos encontrar tu país'}
          />
        </View>

any suggestions on how to fix this issue?
"react-native": "0.68.2",
"react-native-country-codes-picker": "^2.2.0",

When you open the list, the response is slow because of the country, and the performance improvement should be obvious

The code in guide:
import {CountryPicker} from "react-native-country-codes-picker";
is unable to import the library component onto the required screen. Because the component is exported by default, I used,
import CountryPicker from "react-native-country-codes-picker";
and it worked. I think updating the library will help others, Thank you.

We are going to detect user's locale and based on that we need to populate the initial value of the Country Picker. Is there a way to do this?

Getting this error:
node_modules/react-native-country-codes-picker/index.tsx(16,33): error TS7016: Could not find a declaration file for module './helpers/useKeyboardStatus'. '/Users/../../node_modules/react-native-country-codes-picker/helpers/useKeyboardStatus.js' implicitly has an 'any' type.

Not sure how to fix it! Can anyone help with this?

the given type for the CountyPicker is a following,

interface Props {
excludedCountries?: string[],
showOnly?: string[],
popularCountries?: string[],

style?: Style,

show: boolean,
enableModalAvoiding?: boolean,
disableBackdrop?: boolean,

onBackdropPress?: (...args: any) => any,
pickerButtonOnPress: (item: CountryItem) => any,
itemTemplate?: (props: ItemTemplateProps) => JSX.Element,
ListHeaderComponent?: (props: ListHeaderComponentProps) => JSX.Element,
onRequestClose?: (...args: any) => any,

lang: string,
inputPlaceholder?: string,
inputPlaceholderTextColor?: TextStyle['color'],
searchMessage?: string,
androidWindowSoftInputMode?: string,
initialState?: string,

}

Now, As I my writing test in my application where I have used this CounteryPicker component, so, I have to test this CountryPicker for that I have find the element of the text input from where I can search the country and then select that country, so for that I have to pass testId to the textInput, the type of CountryPicker does not have the testID props but If I am passing it forcefully than I works.

The correct country code for Cyprus is +357, but it appears that there is a slight typo and it is shown as +537

1. The country Anguilla miss the Arabic name: أنغيلا

Hey I'm get this "Element type is invalid: expected a string(for built-in components) or a class/function (for composite components) but got: undefined." error. I've literally just copy pasted the code from the demo. Any idea? Thanks for this package btw :D

 WARN  Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"15204":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15207":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15210":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15213":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15216":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15219":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15222":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15225":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15228":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15231":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15234":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15237":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15240":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15243":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15246":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15249":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15252":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15255":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15258":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15261":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15264":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15267":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15270":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15273":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15276":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15279":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15282":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15285":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15288":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15291":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15294":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15297":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15300":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15303":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15306":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15309":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15312":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15315":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15318":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15321":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15324":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15327":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15330":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15333":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15336":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15339":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15342":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15345":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15348":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"15351":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"...(truncated keys)...":451}

• Just scroll the list to the very end.

iPhone 12 Pro, iOS 16.3.1
Expo SDK 48
Expo Go

Please do let me know if there's a way to enable / disable the actual picker.

I want to customize the flag and want to make it circular, but though I'm receiving flag in Text Component, so I'm no able to customize it

Just some minor suggestions (I can make a PR for this if needed):

1. Export the types and CountryButton Component at top level (in index.ts). Makes it easier to use the library
2. Correctly type ListHeaderComponent with ({countries: CountryItem[], locale: string}) => JSX.Element To avoid TS false-errors when using the library.

Hello,
I try to use the library in my app, but when I run I get this message:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I also tried to import into my APP with this line: import CountryPicker from "react-native-country-codes-picker ";
but in this case I get this message: Error: text strings must be displayed inside a component.

Has anyone encountered the same problem?
Can you help me?

Firstly, this library is awesome.
I was wondering if you have the exact code for the example GIF you have in the README? I love the search feature and the collapsible context menu list, I'm struggling to replicate it :). (Currently my implementation takes the entire screen :( )

code:

<CountryPicker
      show={show}
      enableModalAvoiding
      style={{
        modal: {height: '50%'},
      }}
      onBackdropPress={() => setShow(false)}
      pickerButtonOnPress={item => onPickCountry(item)}
    />

i was using enableModalAvoiding but it not work in my project

IOS: 16.1 , Simulator : Iphone 14

Greetings,

I'm currently using the CountryPicker in our project, and it's generally functioning as expected. However, there's a specific scenario that requires attention. Here's how it plays out:

1. Upon clicking the button, the CountryPicker opens, and the list of countries populates. I can select my preferred country code by clicking on an item from the list.
2. After making a selection, the CountryPicker modal is dismissed or hidden.

The issue arises when I click on the input box to search for a country among the available options. When I click on an item in the list that appears after the search, there's an unexpected behavior. On the first click, the keyboard gets dismissed, and I need to click again to select the desired country. This means I have to click twice to make a country selection.

This behavior is somewhat cumbersome and could benefit from a smoother interaction. We appreciate your attention to this matter as it affects the usability of the CountryPicker component. Thank you for considering this feedback.

here is the code
`
const handlePickerPress = item => {
setCountryCode(item.dial_code);
setFlag(item.flag);
setShow(false);
Keyboard.dismiss();
if (onPress) {
onPress(item);
}
};
<TouchableOpacity
onPress={() => setShow(true)}
style={{
alignSelf: 'center',
}}>
<Text
style={{
color: '#1b1212',
fontSize: 14,
marginRight: 10,
marginLeft: 10,
}}>
{countryCode}

          <CountryPicker
            searchMessage={'Search here'}
            show={show}
            style={{
              // Styles for whole modal [View]
              modal: {
                height: 425,
                //backgroundColor: 'red',
              },
              // Styles for modal backdrop [View]
              backdrop: {
                backgroundColor: 'transparent',
              },

              textInput: {
                height: 45,
                //borderRadius: 20,
                color: '#1b1212',
              },
              countryName: {
                color: '#1b1212',
                fontFamily: 'Mont-Regular',
                lineHeight: 16,
                fontSize: 14,
              },
              dialCode: {
                color: '#1b1212',
                fontFamily: 'Mont-Regular',
                lineHeight: 16,
                fontSize: 14,
              },
              countryButtonStyles: {
                height: 50,
                //backgroundColor:'#f3f3f3'
              },
            }}
            pickerButtonOnPress={handlePickerPress}
            onRequestClose={() => {
              setShow(false);
            }}
     />

`

Hi there,

Any update regarding adding the typescript support to the package? If you need some help, do let me know and we can discuss.

On clicking name an object error is displayed

Description

When the back button is pressed, nothing happen which feels like the application is buggy.

Problem

When a Modal is opened, BackButton events are not propagated. As this component is using a Modal, developers cannot catch this event

Solution

Close the modal when the back button is pressed

import { BackHandler } from "react-native";

// Add handleBackButton to props

useEffect(() => {
  let backHandler: NativeEventSubscription;
  if (handleBackButton) {
    backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
      closeModal();
    });
  }

  return () => {
    backHandler?.remove();
  };
}, [handleBackButton]);

I want to select specifc countries only and remove the rest. Is there any prop or method available for that?

After installing the library and opening the app i got this error on app startup
after checking the files i found that CountryPicker and CountryButton are in jsx format which is not supported, changing the formats to JS or TS fixes it
RN version: 0.68.1

p

when enableModalAvoiding={true} and you specify the "height" property in the Modal style, the keyboard avoiding view stops working. If you remove the "height" value (from below) it starts working again.

style={{
modal: {
height: 250,
},
}}

Hi,

Thanks for the library. is it supported in rn-web?

This package looks great. Thank you.

it would be great to have a second drop down component for choosing languages styled the same way. Same concept - flag on left with language displayed based on currently selected language.

Hi, thanks for this package!

@GeorgeHop how can I hide the countryCode?

thanks

I found a problem that on light mode, the background color is white and text is dark. But when switch to dark mode, background color is still white but text color is change to white. Great work, thank you so much!

When I use Chinese pinyin to type in the search bar, it automatically makes it english, making it impossible to type pinyin. My suggestion: add an onchangetext prop to the component

Country with multiple calling code is handled in this library?
For example, country puerto rico has 2 calling codes (refer screenshot).

Hi, in React Native ver. > 0.69.0 it is necessary to specify the placeholderTextColor field in the TextInput component, only in this way the placeholder will be visible. Thanks a lot.

I was searching for mexico, but I could not see any result. So, the thing is that I need to search it exactly like ''méxico'' with the ''é'' being accented.

I think it would be nice if we can ignore the accents on the search query for a better user experience.

I fixed this issue by modifying the next lines 119 and 122 in index.tsx

const resultCountries = React.useMemo(() => {
    const lowerSearchValue = searchValue.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");

    return codes.filter((country) => {
        if (country?.dial_code.includes(searchValue) || country?.name[lang || 'en'].toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").includes(lowerSearchValue)) {
            return country;
        }
    });
}, [searchValue]);

I needed to add .normalize("NFD").replace(/[\u0300-\u036f]/g, "") to ignore all accents in search query.

Could this solution be added in the main branch?

Would it be possible to have the country list sorted by alphabetical order in the chosen language ?

Proposed change: (#66)

Hi,
Thanks for the work! Very much appreciated!

I created a pull request to only show popular countries if there is no searchValue. As long as the popular countries doesn't filter when searching, I would prefer them to go away. Possible to merge that (if it looks ok), and update the package with the types-fixes done 3 weeks ago as well?

Hi! I found some incorrect types for Style type and ListHeaderComponent.
This is my solutions:
1.

2.

Kindly add mobile number templet based on country, so we can display as place holder in textinput