react-native-country-iso-selector

react-native-country-iso-selector is a React Native component library that provides a country selector with ISO codes and flags.

Installation

To install the library, use npm or yarn:

1npm install react-native-country-iso-selector

or

1yarn add react-native-country-iso-selector

ScreenShots

Example using in popover component

Usage

Here is an example of how to use the CountrySelector and SelectedCountryDisplay components:

1import React, { useState } from 'react';
2import { View } from 'react-native';
3import { CountrySelector, SelectedCountryDisplay } from 'react-native-country-iso-selector';
4
5const App = () => {
6    const [selectedCountry, setSelectedCountry] = useState(null);
7
8    return (
9        <View>
10            <CountrySelector
11                setCountry={setSelectedCountry}
12                placeholder="Select a country"
13                leftComponent={<YourCustomComponent />}
14            />
15            <SelectedCountryDisplay
16                country={selectedCountry}
17                iconSize={20}
18                iconColor="blue"
19            />
20        </View>
21    );
22};
23
24export default App;

Props

CountrySelector

• setCountry: Function to set the selected country.
• placeholder: Placeholder text for the search input.
• leftComponent: Custom component to display on the left side of the search input.

SelectedCountryDisplay

• country: The selected country object.
• styleContainer: Custom style for the container.
• styleInnerContainer: Custom style for the inner container.
• styleFlag: Custom style for the flag image.
• iconSize: Size of the chevron icon.
• iconColor: Color of the chevron icon.

Interfaces

Country

1interface Country {
2    country_name: string;
3    iso2: string;
4    e164_code: number;
5}

CountrySelectorProps

1interface CountrySelectorProps {
2    setCountry: (country: Country) => void;
3    placeholder: string;
4    leftComponent: React.ReactNode;
5}

SelectedCountryDisplayProps

1interface SelectedCountryDisplayProps {
2    country: Country | null;
3    styleContainer?: StyleProp<ViewStyle>;
4    styleInnerContainer?: StyleProp<ViewStyle>;
5    styleFlag?: StyleProp<ImageStyle>;
6    iconSize?: number;
7    iconColor?: string;
8}

License

This project is licensed under the ISC License.

Author

Hesler Dennis