react-native-country-select 0.1.1

package/LICENSE.md

@@ -0,0 +1,7 @@
+ISC License
+
+Copyright 2025-present Willian Barbosa Lima do Nascimento
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,296 @@
+<h1 align="center">React Native Country Select</h1>
+
+<p>
+  🌍 A lightweight and customizable country picker for React Native with modern UI, flags, search engine, and i18n support. Includes TypeScript types, offline support and no dependencies.
+</p>
+
+<br>
+
+<div align="center">
+  <a href="https://www.npmjs.com/package/react-native-country-select">
+    <img src="https://img.shields.io/npm/v/react-native-country-select.svg?style=flat-square">
+  </a>
+  <a href="https://www.npmjs.com/package/react-native-country-select">
+    <img src="https://img.shields.io/npm/dt/react-native-country-select.svg?style=flat-square&color=success">
+  </a>
+  <a href="https://github.com/AstrOOnauta/react-native-country-select">
+    <img src="https://img.shields.io/github/stars/AstrOOnauta/react-native-country-select?style=flat-square&color=success"/>
+  </a>
+  <a href="https://github.com/AstrOOnauta/react-native-country-select/issues">
+    <img src="https://img.shields.io/github/issues/AstrOOnauta/react-native-country-select?style=flat-square&color=blue"/>
+  </a>
+  <a href="https://github.com/AstrOOnauta/react-native-country-select/pulls">
+    <img src="https://img.shields.io/github/issues-pr/AstrOOnauta/react-native-country-select?style=flat-square&color=blue"/>
+  </a>
+  <a href="LICENSE.md">
+    <img src="https://img.shields.io/:license-isc-yellow.svg?style=flat-square"/>
+  </a>
+</div>
+
+<br>
+
+<div align="center">
+    <a href="https://www.buymeacoffee.com/astroonauta" target="_blank">
+        <img src="https://survivingmexico.files.wordpress.com/2018/07/button-gif.gif" alt="Buy Me A Coffee" style="height: auto !important;width: 60% !important;">
+    </a>
+</div>
+
+<br>
+
+## Features
+
+- 📱 Cross-platform: works with iOS, Android and Expo;
+- 🎨 Lib with custom and modern UI;
+- 👨‍💻 Functional and class component support;
+- 🈶 32 languages supported;
+- ♿ Accessibility.
+
+<br>
+
+## Try it out
+
+- [Demo](https://snack.expo.dev/@astroonauta/react-native-country-select)
+
+<br>
+
+## Installation
+
+```sh
+npm install react-native-country-select
+# or
+yarn add react-native-country-select
+```
+
+<br>
+
+## Basic Usage
+
+- Class Component
+
+```jsx
+import React, {Component} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+import CountrySelect from 'react-native-country-select';
+
+export default class App extends Component {
+  countryRef = null;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showPicker: false,
+      country: null,
+    };
+  }
+
+  handleCountrySelect = country => {
+    this.setState({country});
+  };
+
+  render() {
+    return (
+      <View style={{flex: 1}}>
+        <TouchableOpacity onPress={() => this.setState({showPicker: true})}>
+          <Text>Select Country</Text>
+        </TouchableOpacity>
+        <Text>
+          Country:{' '}
+          {`${this.state.selectedCountry?.name?.common} (${this.state.selectedCountry?.cca2})`}
+        </Text>
+
+        <CountrySelect
+          visible={this.state.showPicker}
+          onClose={() => this.setState({showPicker: false})}
+          onSelect={this.handleCountrySelect}
+        />
+      </View>
+    );
+  }
+}
+```
+
+<br>
+
+- Function Component
+
+```jsx
+import React, {useState} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+import CountrySelect from 'react-native-country-select';
+
+export default function App() {
+  const [showPicker, setShowPicker] = useState(false);
+  const [selectedCountry, setSelectedCountry] = useState(null);
+
+  const handleCountrySelect = country => {
+    setSelectedCountry(country);
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+      }}>
+      <TouchableOpacity onPress={() => setShowPicker(true)}>
+        <Text>Select Country</Text>
+      </TouchableOpacity>
+      <Text>
+        Country: {`${selectedCountry?.name?.common} (${selectedCountry?.cca2})`}
+      </Text>
+
+      <CountrySelect
+        visible={showPicker}
+        onClose={() => setShowPicker(false)}
+        onSelect={handleCountrySelect}
+      />
+    </View>
+  );
+}
+```
+
+<br>
+
+- Typescript
+
+```tsx
+import React, {useState} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+import CountrySelect, {ICountry} from 'react-native-country-select';
+
+export default function App() {
+  const [showPicker, setShowPicker] = useState<boolean>(false);
+  const [selectedCountry, setSelectedCountry] = useState<ICountry | null>(null);
+
+  const handleCountrySelect = (country: ICountry) => {
+    setSelectedCountry(country);
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+      }}>
+      <TouchableOpacity onPress={() => setShowPicker(true)}>
+        <Text>Select Country</Text>
+      </TouchableOpacity>
+      <Text>
+        Country: {`${selectedCountry?.name?.common} (${selectedCountry?.cca2})`}
+      </Text>
+
+      <CountrySelect
+        visible={showPicker}
+        onClose={() => setShowPicker(false)}
+        onSelect={handleCountrySelect}
+      />
+    </View>
+  );
+}
+```
+
+<br>
+
+## CountrySelect Props
+
+| Prop     | Type                        | Required | Default | Description                                                |
+| -------- | --------------------------- | -------- | ------- | ---------------------------------------------------------- |
+| visible  | boolean                     | Yes      | false   | Controls the visibility of the country picker modal        |
+| onClose  | () => void                  | Yes      | -       | Callback function called when the modal is closed          |
+| onSelect | (country: ICountry) => void | Yes      | -       | Callback function called when a country is selected        |
+| theme    | 'light' \| 'dark'           | No       | 'light' | Theme for the country picker                               |
+| language | ICountrySelectLanguages     | No       | 'eng'   | Language for country names (see supported languages below) |
+
+<br>
+
+### Supported Languages
+
+The `language` prop supports the following values:
+
+| Code       | Language            |
+| ---------- | ------------------- |
+| `ara`      | Arabic              |
+| `bel`      | Belarusian          |
+| `bre`      | Breton              |
+| `bul`      | Bulgarian           |
+| `ces`      | Czech               |
+| `deu`      | German              |
+| `ell`      | Greek               |
+| `eng`      | English             |
+| `est`      | Estonian            |
+| `fin`      | Finnish             |
+| `fra`      | French              |
+| `heb`      | Hebrew              |
+| `hrv`      | Croatian            |
+| `hun`      | Hungarian           |
+| `ita`      | Italian             |
+| `jpn`      | Japanese            |
+| `kor`      | Korean              |
+| `nld`      | Dutch               |
+| `per`      | Persian             |
+| `pol`      | Polish              |
+| `por`      | Portuguese          |
+| `ron`      | Romanian            |
+| `rus`      | Russian             |
+| `slk`      | Slovak              |
+| `spa`      | Spanish             |
+| `srp`      | Serbian             |
+| `swe`      | Swedish             |
+| `tur`      | Turkish             |
+| `ukr`      | Ukrainian           |
+| `urd`      | Urdu                |
+| `zho`      | Chinese             |
+| `zho-Hans` | Simplified Chinese  |
+| `zho-Hant` | Traditional Chinese |
+
+<br>
+
+## Testing
+
+When utilizing this package, you may need to target the CountrySelect component in your automated tests. To facilitate this, we provide a testID props for the CountrySelect component. The testID can be integrated with popular testing libraries such as @testing-library/react-native or Maestro. This enables you to efficiently locate and interact with CountrySelect elements within your tests, ensuring a robust and reliable testing experience.
+
+```js
+const countrySelect = getByTestId('countrySelectSearchInput');
+const countrySelectList = getByTestId('countrySelectList');
+const countrySelectItem = getByTestId('countrySelectItem');
+```
+
+<br>
+
+## Accessibility
+
+Ensure your app is inclusive and usable by everyone by leveraging built-in React Native accessibility features. The accessibility props are covered by this package.
+
+<br>
+
+## Contributing
+
+Thank you for considering contributing to **react-native-country-select**!
+
+- Fork or clone this repository
+
+```bash
+  $ git clone https://github.com/AstrOOnauta/react-native-country-select.git
+```
+
+- Repair, Update and Enjoy 🛠️🚧⚙️
+
+- Create a new PR to this repository
+
+<br>
+
+## Credits
+
+@mledoze for the [countries data](https://github.com/mledoze/countries)
+
+## License
+
+[ISC](LICENSE.md)
+
+<br>
+
+<div align = "center">
+	<br>
+	  Thanks for stopping by! 😁
+	<br>
+</div>

package/lib/components/CountryItem/index.tsx

@@ -0,0 +1,41 @@
+import React, {memo} from 'react';
+import {View, Text, TouchableOpacity} from 'react-native';
+
+import {createStyles} from '../styles';
+import {ICountryItemProps, ICountrySelectLanguages} from '../../interface';
+
+const DEFAULT_LANGUAGE: ICountrySelectLanguages = 'eng';
+
+export const CountryItem = memo<ICountryItemProps>(
+  ({item, onSelect, onClose, theme = 'light', language}) => {
+    const styles = createStyles(theme);
+
+    return (
+      <TouchableOpacity
+        testID="countrySelectItem"
+        accessibilityRole="button"
+        accessibilityLabel="Country Select Item"
+        accessibilityHint="Click to select a country"
+        style={styles.countryItem}
+        onPress={() => {
+          onSelect(item);
+          onClose();
+        }}>
+        <Text testID="countrySelectItemFlag" style={styles.flag}>
+          {item.flag}
+        </Text>
+        <View style={styles.countryInfo}>
+          <Text
+            testID="countrySelectItemCallingCode"
+            style={styles.callingCode}>
+            {item.idd.root}
+          </Text>
+          <Text testID="countrySelectItemName" style={styles.countryName}>
+            {item?.translations[language]?.common ||
+              item?.translations[DEFAULT_LANGUAGE]?.common}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  },
+);

package/lib/components/CountrySelect/index.tsx

@@ -0,0 +1,159 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {useCallback, useMemo, useState} from 'react';
+import {
+  View,
+  TextInput,
+  FlatList,
+  Pressable,
+  ListRenderItem,
+  Modal,
+} from 'react-native';
+
+import {CountryItem} from '../CountryItem';
+
+import {createStyles} from '../styles';
+import countries from '../../constants/countries.json';
+import {translations} from '../../utils/getTranslation';
+import {
+  ICountry,
+  ICountrySelectProps,
+  ICountrySelectLanguages,
+} from '../../interface';
+
+const DEFAULT_LANGUAGE: ICountrySelectLanguages = 'eng';
+
+export const CountrySelect: React.FC<ICountrySelectProps> = ({
+  visible,
+  onClose,
+  onSelect,
+  theme = 'light',
+  language = DEFAULT_LANGUAGE,
+  ...props
+}) => {
+  const styles = createStyles(theme);
+
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Obtain the country name in the selected language
+  const getCountryNameInLanguage = (country: ICountry): string => {
+    return (
+      country.translations[language]?.common ||
+      country.translations[DEFAULT_LANGUAGE]?.common ||
+      country.name.common ||
+      ''
+    );
+  };
+
+  // Normalize country name and remove accents
+  const normalizeCountryName = (str: string) =>
+    str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+
+  const sortCountriesAlphabetically = (
+    countriesList: ICountry[],
+  ): ICountry[] => {
+    return [...countriesList].sort((a, b) => {
+      const nameA = normalizeCountryName(
+        getCountryNameInLanguage(a).toLowerCase(),
+      );
+      const nameB = normalizeCountryName(
+        getCountryNameInLanguage(b).toLowerCase(),
+      );
+      return nameA.localeCompare(nameB);
+    });
+  };
+
+  const getCountries = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+
+    if (query.length > 0) {
+      let countriesData = countries as unknown as ICountry[];
+
+      const filteredCountries = countriesData.filter(country => {
+        const countryName = getCountryNameInLanguage(country);
+        const callingCode = country.idd.root.toLowerCase();
+        const flag = country.flag.toLowerCase();
+        return (
+          countryName.includes(query) ||
+          callingCode.includes(query) ||
+          flag.includes(query)
+        );
+      });
+
+      return sortCountriesAlphabetically(filteredCountries);
+    }
+
+    let allCountries = countries as unknown as ICountry[];
+
+    const result: ICountry[] = allCountries;
+
+    return result;
+  }, [searchQuery]);
+
+  const keyExtractor = useCallback((item: ICountry) => item.cca2, []);
+
+  const renderItem: ListRenderItem<ICountry> = useCallback(
+    ({item}) => {
+      return (
+        <CountryItem
+          item={item as ICountry}
+          onSelect={onSelect}
+          onClose={onClose}
+          theme={theme}
+          language={language}
+        />
+      );
+    },
+    [onSelect, onClose, styles, language],
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+      {...props}>
+      <Pressable
+        style={[
+          styles.backdrop,
+          {alignItems: 'center', justifyContent: 'center'},
+        ]}
+        onPress={onClose}>
+        <Pressable style={styles.popupContainer}>
+          <View style={styles.popupContent}>
+            <View style={styles.searchContainer}>
+              <TextInput
+                testID="countrySelectSearchInput"
+                accessibilityRole="text"
+                accessibilityLabel="Country Select Search Input"
+                accessibilityHint="Type to search for a country"
+                style={styles.searchInput}
+                placeholder={
+                  translations.searchPlaceholder[
+                    language as ICountrySelectLanguages
+                  ]
+                }
+                placeholderTextColor={styles.searchInputPlaceholder.color}
+                value={searchQuery}
+                onChangeText={setSearchQuery}
+              />
+            </View>
+
+            <FlatList
+              testID="countrySelectList"
+              accessibilityRole="list"
+              accessibilityLabel="Country Select List"
+              accessibilityHint="List of countries"
+              data={getCountries}
+              keyExtractor={keyExtractor}
+              renderItem={renderItem}
+              keyboardShouldPersistTaps="handled"
+            />
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};

package/lib/components/index.ts

@@ -0,0 +1,2 @@
+export {CountrySelect} from './CountrySelect';
+export {CountryItem} from './CountryItem';

package/lib/components/styles.ts

@@ -0,0 +1,83 @@
+import {StyleSheet} from 'react-native';
+
+export const createStyles = (theme: 'light' | 'dark') =>
+  StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    popupContainer: {
+      width: '90%',
+      maxWidth: 600,
+      height: '60%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      alignSelf: 'center',
+    },
+    popupContent: {
+      flex: 1,
+      width: '100%',
+      backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
+      borderRadius: 20,
+      alignSelf: 'center',
+      padding: 16,
+    },
+    searchContainer: {
+      marginBottom: 16,
+      paddingTop: 16,
+      flexDirection: 'row',
+    },
+    searchInput: {
+      flex: 1,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      fontSize: 16,
+      borderColor: theme === 'dark' ? '#F3F3F3' : '#303030',
+      borderWidth: 1,
+      color: theme === 'dark' ? '#FFFFFF' : '#000000',
+    },
+    searchInputPlaceholder: {
+      color: theme === 'dark' ? '#FFFFFF80' : '#00000080',
+    },
+    list: {
+      flex: 1,
+    },
+    countryItem: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 12,
+      marginBottom: 8,
+      backgroundColor: theme === 'dark' ? '#404040' : '#F3F3F3',
+      borderColor: theme === 'dark' ? '#F3F3F3' : '#303030',
+      borderWidth: 1,
+      borderRadius: 8,
+    },
+    flag: {
+      flex: 0.1,
+      fontSize: 16,
+      color: theme === 'dark' ? '#FFFFFF' : '#000000',
+    },
+    countryInfo: {
+      flex: 0.9,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    callingCode: {
+      flex: 0.2,
+      fontSize: 14,
+      color: theme === 'dark' ? '#FFFFFF80' : '#00000080',
+    },
+    countryName: {
+      flex: 0.8,
+      fontSize: 16,
+      fontWeight: '500',
+      color: theme === 'dark' ? '#FFFFFF' : '#000000',
+    },
+    sectionTitle: {
+      fontSize: 16,
+      fontWeight: '600',
+      paddingVertical: 8,
+      color: theme === 'dark' ? '#FFFFFF' : '#000000',
+    },
+  });