@realtril/react-native-country-picker-modal v1.0.12

React Native Country Picker Modal

A React Native country picker modal updated for Expo 53 and React Native 0.79.x.

This is a migrated version of the popular react-native-country-picker-modal library, updated to work with the latest versions of Expo and React Native.

Features

• 🎨 Uses React Native Expo (SDK 53)
• ⚛️ Compatible with React Native 0.79.x
• 🏳️ Support for both emoji and regular flags
• 📱 Native feeling with search and alphabetical index bar
• 🔎 Fast and efficient search with fuzzy search
• 🌐 Supports multiple languages
• 🎭 Dark theme and light theme
• 🔧 No build step required - use components directly from source

Implementation Notes

This implementation imports and uses the components directly from the source files (src directory) without requiring a build step or a compiled lib directory. This makes the code more maintainable and easier to understand.

Usage

import React, { useState } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import CountryPicker from './src';
import { Country, CountryCode, TranslationLanguageCodeMap } from './src/types';

export default function App() {
  const [countryCode, setCountryCode] = useState<CountryCode>('US');
  const [country, setCountry] = useState<Country>();
  const [visible, setVisible] = useState(false);

  const getCountryName = (name: TranslationLanguageCodeMap | string) => {
    if (typeof name === 'string') return name;
    return name.common;
  };

  const onSelect = (country: Country) => {
    setCountryCode(country.cca2);
    setCountry(country);
    setVisible(false);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={() => setVisible(true)}>
        <Text style={styles.buttonText}>
          {country ? getCountryName(country.name) : 'Select Country'}
        </Text>
      </TouchableOpacity>

      <CountryPicker
        countryCode={countryCode}
        withFilter
        withFlag
        withEmoji={true}
        onSelect={onSelect}
        visible={visible}
        onClose={() => setVisible(false)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

Props

Dark theme example

A simple example to display a CountryPicker component with a dark theme.

import CountryPicker, { DARK_THEME } from 'react-native-country-picker-modal'

const MyDarkView = () => <CountryPicker theme={DARK_THEME} />

Dependencies

• world-countries : https://www.npmjs.com/package/world-countries

FAQ

Is it supported and tested both on android and iOS?

YES

Is the data that is populated inside the list saved offline once I install your package?

YES : It used the world-countries package and image is stored into json and base64.

Tiers lib using this lib

• react-native-phone-verification

> Your project?

See also

• react-native-linkedin

Contribution

• @xcapentier The main author.

Questions

Feel free to contact me or create an issue

made with ♥

Licence

MIT

Hire an expert!

Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from my website!