React Native Country Picker Modal

https://github.com/xcarpentier/react-native-country-picker-modal
Admin
React Native Country Picker Modal is a component for React Native applications that provides a...
Tokens:38,487
Snippets:369
Trust Score:9.6
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install react-native-country-picker-modal

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/README.md

Install the library using Yarn.

```bash
$ yarn add react-native-country-picker-modal
```

--------------------------------

### Install react-native-country-picker-modal

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

Install the library using either Yarn or npm. Ensure your project meets the specified React Native and TypeScript versions.

```bash
yarn add react-native-country-picker-modal
# or
npm install react-native-country-picker-modal
```

--------------------------------

### Example: Using CountryModalProvider with Multiple Modals

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/context-api.md

Demonstrates how to use CountryModalProvider when you need to manage multiple modals, including a standard React Native Modal alongside the CountryPicker. This setup is useful for complex UI interactions.

```typescript
import React, { useState } from 'react'
import { View, Button, Modal as RNModal } from 'react-native'
import CountryPicker, { 
  CountryModalProvider 
} from 'react-native-country-picker-modal'

function App() {
  const [modalVisible, setModalVisible] = useState(false)

  return (
    <CountryModalProvider>
      <View style={{ flex: 1 }}>
        <Button 
          title="Show Modal" 
          onPress={() => setModalVisible(true)} 
        />
        
        <RNModal
          visible={modalVisible}
          onRequestClose={() => setModalVisible(false)}
        >
          <View style={{ flex: 1 }}>
            <CountryPicker
              countryCode='US'
              onSelect={(country) => {
                console.log(country)
                setModalVisible(false)
              }}
              disableNativeModal={true}
            />
          </View>
        </RNModal>
      </View>
    </CountryModalProvider>
  )
}

export default App
```

--------------------------------

### Complete Country Picker Example with All Features

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

An extensive example showcasing all available features of the CountryPicker component, including filtering, flags, emojis, country names, calling codes, currency, alpha filter, and dark mode.

```typescript
import React, { useState } from 'react'
import {
  View,
  Text,
  StyleSheet,
  Switch,
  ScrollView,
  SafeAreaView,
} from 'react-native'
import CountryPicker, { DARK_THEME } from 'react-native-country-picker-modal'
import { CountryCode, Country } from 'react-native-country-picker-modal'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
  },
  pickerContainer: {
    padding: 16,
    backgroundColor: '#fff',
    marginHorizontal: 16,
    marginTop: 16,
    borderRadius: 8,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  optionsContainer: {
    padding: 16,
    backgroundColor: '#fff',
    marginHorizontal: 16,
    marginTop: 16,
    borderRadius: 8,
  },
  optionRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  optionLabel: {
    fontSize: 14,
    color: '#333',
  },
  dataContainer: {
    padding: 16,
    backgroundColor: '#fff',
    marginHorizontal: 16,
    marginTop: 16,
    marginBottom: 16,
    borderRadius: 8,
  },
  dataText: {
    fontSize: 12,
    color: '#666',
    fontFamily: 'Courier',
    lineHeight: 18,
  },
})

export default function App() {
  const [countryCode, setCountryCode] = useState<CountryCode>('US')
  const [country, setCountry] = useState<Country | null>(null)
  const [withFilter, setWithFilter] = useState(true)
  const [withFlag, setWithFlag] = useState(true)
  const [withEmoji, setWithEmoji] = useState(true)
  const [withCountryName, setWithCountryName] = useState(false)
  const [withCallingCode, setWithCallingCode] = useState(false)
  const [withCurrency, setWithCurrency] = useState(false)
  const [withAlphaFilter, setWithAlphaFilter] = useState(false)
  const [darkMode, setDarkMode] = useState(false)

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

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>Country Picker</Text>
      </View>

      <ScrollView>
        {/* Picker * /
        <View style={styles.pickerContainer}>
          <CountryPicker
            countryCode={countryCode}
            onSelect={onSelect}
            withFilter={withFilter}
            withFlag={withFlag}
            withEmoji={withEmoji}
            withCountryNameButton={withCountryName}
            withCallingCode={withCallingCode}
            withCurrency={withCurrency}
            withAlphaFilter={withAlphaFilter}
            theme={darkMode ? DARK_THEME : undefined}
            visible={true}
          />
        </View>

```

--------------------------------

### CloseButton Usage Example

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/advanced-components.md

Demonstrates how to use the CloseButton component, including providing a custom image and an onPress handler.

```typescript
import { CloseButton } from 'react-native-country-picker-modal'

<CloseButton
  onPress={() => console.log('Close pressed')}
  image={require('./custom-close.png')}
/>
```

--------------------------------

### Usage Example for CurrencyCode

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/types.md

Shows how to use the CurrencyCode type. Assigns a standard currency code string to a variable typed as CurrencyCode.

```typescript
import { CurrencyCode } from 'react-native-country-picker-modal'

const currency: CurrencyCode = 'USD'
```

--------------------------------

### CountryList Usage Example

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/api-reference.md

Demonstrates how to use the CountryList component with various props enabled. Ensure 'Country' and 'CountryList' are imported, and 'countries' data is populated.

```typescript
import { CountryList, Country } from 'react-native-country-picker-modal'

const countries: Country[] = [...] // from CountryService

<CountryList
  data={countries}
  onSelect={(country) => console.log(country.name)}
  withFlag={true}
  withEmoji={true}
  withAlphaFilter={true}
  withCallingCode={true}
/>
```

--------------------------------

### FlagButton Component Usage

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/api-reference.md

Example of how to use the FlagButton component with various customization options. Ensure 'react-native-country-picker-modal' is installed and imported.

```typescript
import { FlagButton } from 'react-native-country-picker-modal'

<FlagButton
  countryCode='FR'
  placeholder='Select'
  withEmoji={true}
  withCountryNameButton={true}
  withCallingCodeButton={true}
  onOpen={() => console.log('Button pressed')}
/>
```

--------------------------------

### Usage Example for CallingCode

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/types.md

Demonstrates how to use the CallingCode type when importing from the library. Assigns a string value prefixed with '+' to a variable typed as CallingCode.

```typescript
import { CallingCode } from 'react-native-country-picker-modal'

const code: CallingCode = '+1'
```

--------------------------------

### TranslationLanguageCodeMap Structure Example

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/types.md

Illustrates the structure of the `TranslationLanguageCodeMap` with examples for common languages. Each key represents a language code, and the value is the translated country name.

```typescript
{
  common: string    // English name
  cym: string       // Welsh name
  deu: string       // German name
  fra: string       // French name
  hrv: string       // Croatian name
  ita: string       // Italian name
  jpn: string       // Japanese name
  nld: string       // Dutch name
  por: string       // Portuguese name
  rus: string       // Russian name
  spa: string       // Spanish name
  svk: string       // Slovak name
  fin: string       // Finnish name
  zho: string       // Chinese name
  isr: string       // Hebrew name
}
```

--------------------------------

### Light Theme Color Recommendations

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/theme.md

Example of a light theme color palette. This theme uses white and black for background and text, with a standard blue for primary elements.

```typescript
const lightTheme: Theme = {
  primaryColor: '#0066CC',
  primaryColorVariant: '#E6F0FF',
  backgroundColor: '#FFFFFF',
  onBackgroundTextColor: '#000000',
  filterPlaceholderTextColor: '#999999',
}
```

--------------------------------

### CountryModalProvider Usage Example

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/api-reference.md

Demonstrates how to wrap your application with CountryModalProvider to enable custom modal support. This is necessary when disableNativeModal is set to true in the CountryPicker.

```typescript
import { CountryModalProvider } from 'react-native-country-picker-modal'

<CountryModalProvider>
  <App />
</CountryModalProvider>
```

```typescript
<CountryPicker
  countryCode='US'
  onSelect={(country) => console.log(country)}
  disableNativeModal={true}
/>
```

--------------------------------

### CountryCode Usage Example

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/types.md

Demonstrates how to use the CountryCode type for single country codes or arrays of codes.

```typescript
import { CountryCode } from 'react-native-country-picker-modal'

const code: CountryCode = 'US'
const codes: CountryCode[] = ['US', 'CA', 'MX']
```

--------------------------------

### Minimal Country Picker Usage

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

A basic example demonstrating how to use the CountryPicker component with minimal configuration. It sets the initial country code and handles country selection.

```typescript
import React, { useState } from 'react'
import { View } from 'react-native'
import CountryPicker from 'react-native-country-picker-modal'
import { CountryCode, Country } from 'react-native-country-picker-modal'

export default function App() {
  const [countryCode, setCountryCode] = useState<CountryCode>('US')
  const [country, setCountry] = useState<Country | null>(null)

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

  return (
    <View style={{ flex: 1 }}>
      <CountryPicker
        countryCode={countryCode}
        onSelect={onSelect}
      />
    </View>
  )
}
```

--------------------------------

### Dark Theme Country Picker Example

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/README.md

Use this snippet to display a CountryPicker component with a dark theme. Ensure the 'react-native-country-picker-modal' library is installed.

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

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

--------------------------------

### Complete Custom Theme Example

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/theme.md

Define a comprehensive theme object to customize various aspects of the country picker, including colors, typography, layout, and sizing. Ensure to import the Theme type for type safety.

```typescript
import CountryPicker, { Theme } from 'react-native-country-picker-modal'
import { Platform } from 'react-native'

const myTheme: Theme = {
  // Brand colors
  primaryColor: '#007AFF', // iOS blue
  primaryColorVariant: '#E8F4FE',
  
  // Layout
  backgroundColor: '#F9F9F9',
  onBackgroundTextColor: '#1C1C1E',
  
  // Typography
  fontSize: 15,
  fontFamily: Platform.select({
    ios: 'System',
    android: 'sans-serif',
    web: '-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif'
  }),
  
  // Search
  filterPlaceholderTextColor: '#C7C7CC',
  
  // Interactions
  activeOpacity: 0.6,
  
  // Sizing
  itemHeight: 56,
  flagSize: 28,
  flagSizeButton: 32,
}

export default function App() {
  return (
    <CountryPicker
      countryCode='US'
      onSelect={(country) => console.log(country)}
      theme={myTheme}
    />
  )
}
```

--------------------------------

### Basic Country Picker Usage

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/README.md

Demonstrates the fundamental setup of the CountryPicker component with filtering and emoji flags enabled. Use this for a standard country selection interface.

```typescript
import React, { useState } from 'react'
import CountryPicker from 'react-native-country-picker-modal'
import { CountryCode, Country } from 'react-native-country-picker-modal'

export default function App() {
  const [countryCode, setCountryCode] = useState<CountryCode>('US')
  const [country, setCountry] = useState<Country | null>(null)

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

  return (
    <CountryPicker
      countryCode={countryCode}
      onSelect={onSelect}
      withFilter={true}
      withEmoji={true}
    />
  )
}
```

--------------------------------

### Usage Example for Country Interface

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/types.md

Illustrates how to use the Country interface in a function. It logs various properties of a selected country object, such as its ISO code, name, flag, calling code, currency, region, and subregion.

```typescript
import { Country } from 'react-native-country-picker-modal'

const handleSelect = (country: Country) => {
  console.log(country.cca2) // 'US'
  console.log(country.name) // 'United States' or { common: 'United States', ... }
  console.log(country.flag) // '🇺🇸' or URL
  console.log(country.callingCode) // ['1']
  console.log(country.currency) // ['USD']
  console.log(country.region) // 'Americas'
  console.log(country.subregion) // 'North America'
}
```

--------------------------------

### Warm Theme Color Recommendations

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/theme.md

Example of a warm theme color palette. This theme uses a light beige background with dark brown text and an orange primary color.

```typescript
const warmTheme: Theme = {
  primaryColor: '#D97706',
  primaryColorVariant: '#FEF3C7',
  backgroundColor: '#FFFBF0',
  onBackgroundTextColor: '#78350F',
  filterPlaceholderTextColor: '#B45309',
}
```

--------------------------------

### Get Specific Countries with French Names

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Retrieve a predefined list of countries ('US', 'FR', 'DE') and display their names in French. This example shows how to filter by specific country codes and set the translation language.

```typescript
// Get specific countries with French names
const selected = await getCountriesAsync(
  FlagType.EMOJI,
  'fra',
  undefined,
  undefined,
  ['US', 'FR', 'DE']
)
```

--------------------------------

### Dark Theme Color Recommendations

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/theme.md

Example of a dark theme color palette. This theme uses dark gray for the background and white for text, with a lighter blue for primary elements.

```typescript
const darkTheme: Theme = {
  primaryColor: '#4A9EFF',
  primaryColorVariant: '#1A3A4D',
  backgroundColor: '#1C1C1E',
  onBackgroundTextColor: '#FFFFFF',
  filterPlaceholderTextColor: '#666666',
}
```

--------------------------------

### Provide Theme with ThemeProvider Component

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/theme.md

The `ThemeProvider` component, exported for advanced use cases, allows you to wrap your application or parts of it to provide a custom theme. The `CountryPicker` component uses this internally, but manual usage is supported for custom setups.

```typescript
import { ThemeProvider, DARK_THEME } from 'react-native-country-picker-modal'
import { View } from 'react-native'

function App() {
  return (
    <ThemeProvider theme={DARK_THEME}>
      <View>
        {/* Components can now use useTheme() hook */}
      </View>
    </ThemeProvider>
  )
}
```

--------------------------------

### Get Countries with Preferred Order

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Fetch countries and specify a list of 'preferred' countries that should appear at the beginning of the results. This requires `withAlphaFilter` to be false or not provided.

```typescript
// Get countries with preferred order
const withPreferred = await getCountriesAsync(
  FlagType.EMOJI,
  'common',
  undefined,
  undefined,
  undefined,
  undefined,
  ['US', 'CA', 'MX']
)
```

--------------------------------

### Accessing Translated Country Names

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/types.md

Demonstrates how to access translated country names using the `TranslationLanguageCodeMap` structure. This example shows accessing both the common English name and the German name for France.

```typescript
const country: Country = {
  cca2: 'FR',
  name: {
    common: 'France',
    deu: 'Frankreich',
    fra: 'France',
    jpn: 'フランス'
  },
  flag: '🇫🇷',
  region: 'Europe',
  subregion: 'Western Europe',
  callingCode: ['33'],
  currency: ['EUR']
}

// Access translated name
console.log(country.name['common']) // 'France'
console.log(country.name['deu']) // 'Frankreich'
```

--------------------------------

### Complete Country Picker Modal Example

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

This snippet shows a full integration of the Country Picker Modal component, including options for filtering, displaying flags, and handling selected country data. It's useful for demonstrating the component's capabilities in a React Native application.

```javascript
        {
          /* Options */
        }
        <View style={styles.optionsContainer}>
          <View style={styles.optionRow}>
            <Text style={styles.optionLabel}>Search Filter</Text>
            <Switch value={withFilter} onValueChange={setWithFilter} />
          </View>
          <View style={styles.optionRow}>
            <Text style={styles.optionLabel}>Show Flags</Text>
            <Switch value={withFlag} onValueChange={setWithFlag} />
          </View>
          <View style={styles.optionRow}>
            <Text style={styles.optionLabel}>Emoji Flags</Text>
            <Switch value={withEmoji} onValueChange={setWithEmoji} />
          </View>
          <View style={styles.optionRow}>
            <Text style={styles.optionLabel}>Country Names</Text>
            <Switch
              value={withCountryName}
              onValueChange={setWithCountryName}
            />
          </View>
          <View style={styles.optionRow}>
            <Text style={styles.optionLabel}>Calling Codes</Text>
            <Switch
              value={withCallingCode}
              onValueChange={setWithCallingCode}
            />
          </View>
          <View style={styles.optionRow}>
            <Text style={styles.optionLabel}>Currencies</Text>
            <Switch value={withCurrency} onValueChange={setWithCurrency} />
          </View>
          <View style={styles.optionRow}>
            <Text style={styles.optionLabel}>Alpha Filter</Text>
            <Switch value={withAlphaFilter} onValueChange={setWithAlphaFilter} />
          </View>
          <View style={styles.optionRow}>
            <Text style={styles.optionLabel}>Dark Mode</Text>
            <Switch value={darkMode} onValueChange={setDarkMode} />
          </View>
        </View>

        {
          /* Data Display */
        }
        {country && (
          <View style={styles.dataContainer}>
            <Text style={{ fontWeight: '600', marginBottom: 8 }}>
              Selected Country:
            </Text>
            <Text style={styles.dataText}>
              {JSON.stringify(country, null, 2)}
            </Text>
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  )
}
```

--------------------------------

### Get Country Flag Image URL Async

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Use this function to retrieve the URL for a country's flat image flag. It defaults to 'FR' if no country code is provided. The URL points to flags hosted on 'xcarpentier.github.io'.

```typescript
import { getImageFlagAsync } from 'react-native-country-picker-modal'

const flagUrl = await getImageFlagAsync('US')
// Returns URL like: 'https://xcarpentier.github.io/...' 

const frFlagUrl = await getImageFlagAsync('FR')
```

--------------------------------

### Get Country Information Async

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

This function retrieves detailed information about a country, including its name, currency, and calling code. You can specify a translation language for the country name. An error is thrown if country data cannot be loaded or the country code is invalid.

```typescript
import { getCountryInfoAsync } from 'react-native-country-picker-modal'

const info = await getCountryInfoAsync({
  countryCode: 'US',
  translation: 'common'
})
console.log(info)
// {
//   countryName: 'United States',
//   currency: 'USD',
//   callingCode: '1'
// }

const frInfo = await getCountryInfoAsync({
  countryCode: 'FR',
  translation: 'fra'
})
```

--------------------------------

### Get European Countries

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Retrieve a list of countries specifically from the 'Europe' region. This example demonstrates filtering by region and specifies the translation language.

```typescript
// Get European countries only
const europe = await getCountriesAsync(
  FlagType.EMOJI,
  'common',
  'Europe'
)
```

--------------------------------

### Using Dark Theme

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/theme.md

Shows how to apply the pre-built DARK_THEME to the CountryPicker component by importing it and passing it to the theme prop.

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

<CountryPicker
  countryCode='US'
  onSelect={(country) => console.log(country)}
  theme={DARK_THEME}
/>
```

--------------------------------

### Using Default Theme

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/theme.md

Demonstrates how to apply the default theme to the CountryPicker component. The theme can be explicitly passed or will be applied automatically if not specified.

```typescript
import { DEFAULT_THEME } from 'react-native-country-picker-modal'

// Use default theme
<CountryPicker
  countryCode='US'
  onSelect={(country) => console.log(country)}
  theme={DEFAULT_THEME}
/>

// Or use without specifying (it's applied automatically)
<CountryPicker
  countryCode='US'
  onSelect={(country) => console.log(country)}
/>
```

--------------------------------

### Custom CountryProvider Implementation

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/context-api.md

Shows how to manually implement CountryProvider with a custom translation value for specific country data services.

```typescript
import { CountryProvider, DEFAULT_COUNTRY_CONTEXT } from 'react-native-country-picker-modal'

<CountryProvider
  value={{
    ...DEFAULT_COUNTRY_CONTEXT,
    translation: 'fra'
  }}
>
  <MyCustomCountryComponents />
</CountryProvider>
```

--------------------------------

### Memoization with useCallback and useMemo

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

Optimizes component performance by memoizing the onSelect handler with useCallback and the theme object with useMemo. This prevents unnecessary re-renders.

```typescript
import { useMemo, useCallback } from 'react'

function MyComponent() {
  const onSelect = useCallback((country) => {
    // Handle selection
  }, [])

  const theme = useMemo(() => ({
    primaryColor: '#007AFF',
  }), [])

  return (
    <CountryPicker
      countryCode='US'
      onSelect={onSelect}
      theme={theme}
    />
  )
}
```

--------------------------------

### Country Picker with All Features Enabled

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/README.md

Shows how to enable all available features of the CountryPicker, including filters, flags, calling codes, currency, and custom themes. This is useful for a comprehensive country selection experience.

```typescript
<CountryPicker
  countryCode='US'
  onSelect={onSelect}
  withFilter={true}
  withEmoji={true}
  withFlag={true}
  withCountryNameButton={true}
  withCallingCode={true}
  withCurrency={true}
  withAlphaFilter={true}
  theme={DARK_THEME}
  placeholder='Select a country'
  onOpen={() => console.log('Opened')}
  onClose={() => console.log('Closed')}
/>
```

--------------------------------

### Get Emoji Flag Async

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Retrieve the emoji flag character for a given country code. The function defaults to 'FR' if no country code is specified.

```typescript
import { getEmojiFlagAsync } from 'react-native-country-picker-modal'

const emoji = await getEmojiFlagAsync('US')
console.log(emoji) // '🇺🇸'

const frFlag = await getEmojiFlagAsync('FR')
console.log(frFlag) // '🇫🇷'
```

--------------------------------

### Custom Filter Input - React Native Component

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/advanced-components.md

Example of a custom filter input component. It uses a TextInput for searching countries and includes basic styling.

```typescript
import { CountryFilterProps } from 'react-native-country-picker-modal'
import { View, TextInput } from 'react-native'

function CustomFilter(props: CountryFilterProps) {
  return (
    <View style={{ padding: 10, borderBottomWidth: 1 }}>
      <TextInput
        {...props}
        placeholder='Search countries...'
        style={{
          padding: 8,
          borderRadius: 6,
          borderWidth: 1,
          borderColor: '#DDD',
        }}
      />
    </View>
  )
}

// Usage
<CountryPicker
  countryCode='US'
  onSelect={(country) => console.log(country)}
  withFilter={true}
  renderCountryFilter={(props) => <CustomFilter {...props} />}
/>
```

--------------------------------

### Get Country Currency Async

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Retrieves the currency code for a specific country. Use this function when you need to display or use the currency code associated with a country.

```typescript
import { getCountryCurrencyAsync } from 'react-native-country-picker-modal'

const usd = await getCountryCurrencyAsync('US')
console.log(usd) // 'USD'

const eur = await getCountryCurrencyAsync('FR')
console.log(eur) // 'EUR'
```

--------------------------------

### Asynchronous Loading for Slow Networks

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/advanced-components.md

Utilizes `useAsync` to load flags asynchronously, preventing UI blocking. A spinner is shown while data is loading.

```typescript
const asyncResult = useAsync(getEmojiFlagAsync, [countryCode])

if (asyncResult.loading) {
  return <ActivityIndicator /> // Show spinner while loading
}
```

--------------------------------

### Get All Countries with Emoji Flags

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Use this snippet to retrieve a list of all available countries, utilizing emoji flags for representation. Ensure the `FlagType` is set to `EMOJI`.

```typescript
import { getCountriesAsync } from 'react-native-country-picker-modal'
import { FlagType } from 'react-native-country-picker-modal'

// Get all countries with emoji flags
const allCountries = await getCountriesAsync(FlagType.EMOJI)
```

--------------------------------

### Unit Test Country Selection with Jest

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

Tests if the onSelect callback is invoked when a country is selected in the picker. Requires setup with react-native testing library for modal content.

```typescript
import { render, fireEvent } from '@testing-library/react-native'
import CountryPicker from 'react-native-country-picker-modal'
import { CountryCode } from 'react-native-country-picker-modal'

describe('CountryPicker', () => {
  it('calls onSelect when a country is selected', async () => {
    const onSelect = jest.fn()
    const { getByText } = render(
      <CountryPicker
        countryCode={'US' as CountryCode}
        onSelect={onSelect}
      />
    )

    // Note: Testing modal content requires proper setup
    // with react-native testing library
  })
})
```

--------------------------------

### Custom Flag Button - React Native Component

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/advanced-components.md

Example of a custom flag button component. It uses TouchableOpacity and renders a View with Text to display the country code or placeholder.

```typescript
import { FlagButtonProps } from 'react-native-country-picker-modal'
import { View, Text, TouchableOpacity } from 'react-native'

function CustomFlagButton(props: FlagButtonProps) {
  return (
    <TouchableOpacity onPress={props.onOpen}>
      <View style={{
        padding: 10,
        borderRadius: 8,
        backgroundColor: '#F0F0F0',
      }}>
        <Text>
          {props.countryCode || props.placeholder}
        </Text>
      </View>
    </TouchableOpacity>
  )
}

// Usage
<CountryPicker
  countryCode='US'
  onSelect={(country) => console.log(country)}
  renderFlagButton={(props) => <CustomFlagButton {...props} />}
/>
```

--------------------------------

### TypeScript Type Imports

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

Demonstrates the correct way to import types for Country and CountryCode from the main package to avoid TypeScript errors.

```typescript
// Always import types from the main package
import type { Country, CountryCode } from 'react-native-country-picker-modal'

// Not from individual files
import type { CountryCode } from 'react-native-country-picker-modal/src/types'
```

--------------------------------

### getCountryInfoAsync()

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/GENERATION_SUMMARY.txt

Asynchronously retrieves comprehensive information for a given country.

```APIDOC
## getCountryInfoAsync()

### Description
Asynchronously fetches a combined set of information for a specific country, including its name, code, calling code, currency, and flag.

### Signature
`getCountryInfoAsync(countryCode: CountryCode, language?: TranslationLanguageCode): Promise<Country>`

### Parameters
- **countryCode** (CountryCode) - Required - The ISO 3166-1 alpha-2 code of the country.
- **language** (TranslationLanguageCode) - Optional - The language code for the desired translation of the country name.

### Returns
- **Promise<Country>** - A promise that resolves to a Country object containing detailed information.

### Errors
(Details on potential errors would be listed here if available in the source.)

### Example
```javascript
import { getCountryInfoAsync } from 'react-native-country-picker-modal';

async function fetchCountryDetails() {
  try {
    const countryInfo = await getCountryInfoAsync('CA', 'en');
    console.log(countryInfo);
  } catch (error) {
    console.error('Failed to fetch country info:', error);
  }
}
```
```

--------------------------------

### Get Country Calling Code Async

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Retrieves the calling code for a specific country. Use this function when you need to display or use the international dialing code associated with a country.

```typescript
import { getCountryCallingCodeAsync } from 'react-native-country-picker-modal'

const code = await getCountryCallingCodeAsync('US')
console.log(code) // '1'

const frCode = await getCountryCallingCodeAsync('FR')
console.log(frCode) // '33'
```

--------------------------------

### ThemeProvider Component

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/theme.md

A context provider component used to set the theme for your application. While the main `CountryPicker` component uses it internally, you can leverage it for custom theming scenarios.

```APIDOC
## Component: ThemeProvider

Context provider component for theming (exported for advanced use cases).

### Signature

```typescript
const ThemeProvider = createTheming<Theme>(DEFAULT_THEME).ThemeProvider
```

### Props

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| theme | `Theme` | Yes | Theme object to provide |
| children | `React.ReactNode` | Yes | Child components |

### Usage

The main CountryPicker component automatically wraps itself with ThemeProvider, but you can use it directly for custom implementations:

```typescript
import { ThemeProvider, DARK_THEME } from 'react-native-country-picker-modal'
import { View } from 'react-native'

function App() {
  return (
    <ThemeProvider theme={DARK_THEME}>
      <View>
        {/* Components can now use useTheme() hook */}
      </View>
    </ThemeProvider>
  )
}
```
```

--------------------------------

### getLetters()

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/GENERATION_SUMMARY.txt

Generates an alphabetic index for countries.

```APIDOC
## getLetters()

### Description
Generates a list of alphabetic characters that can be used for indexing or sorting countries, typically for a scrollbar or index list.

### Signature
`getLetters(): string[]`

### Returns
- **string[]** - An array of uppercase letters representing the available starting letters for countries.

### Example
```javascript
import { getLetters } from 'react-native-country-picker-modal';

const letters = getLetters();
console.log(letters);
```
```

--------------------------------

### Get Countries Excluding Specific Codes

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Fetch a list of countries while excluding specific country codes like 'US' and 'CA'. This is useful for tailoring country lists based on exclusion criteria.

```typescript
// Get countries excluding US and Canada
const withoutNA = await getCountriesAsync(
  FlagType.EMOJI,
  'common',
  undefined,
  undefined,
  undefined,
  ['US', 'CA']
)
```

--------------------------------

### Country Picker with Preferred Countries

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/README.md

Demonstrates how to prioritize a list of specific countries at the top of the picker. Use this to highlight frequently selected or important countries for your users.

```typescript
<CountryPicker
  countryCode='US'
  onSelect={onSelect}
  preferredCountries={['US', 'CA', 'MX']}
/>
```

--------------------------------

### Get Unique First Letters of Country Names

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Use this function to generate a sorted array of unique uppercase first letters from a list of countries. This is useful for creating alphabetic indexing in UI components.

```typescript
import { getLetters, getCountriesAsync } from 'react-native-country-picker-modal'
import { FlagType } from 'react-native-country-picker-modal'

const countries = await getCountriesAsync(FlagType.EMOJI)
const letters = getLetters(countries)
console.log(letters)
// ['A', 'B', 'C', 'D', 'E', 'F', 'G', ...]
```

--------------------------------

### loadDataAsync()

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/GENERATION_SUMMARY.txt

A low-level function for asynchronously loading country data.

```APIDOC
## loadDataAsync()

### Description
Provides a low-level interface for asynchronously loading the raw country data. This might be used for custom data handling or advanced scenarios.

### Signature
`loadDataAsync(): Promise<Country[]>`

### Returns
- **Promise<Country[]>** - A promise that resolves to the raw array of Country objects.

### Errors
(Details on potential errors would be listed here if available in the source.)

### Example
```javascript
import { loadDataAsync } from 'react-native-country-picker-modal';

async function loadRawData() {
  try {
    const data = await loadDataAsync();
    console.log('Raw country data loaded:', data);
  } catch (error) {
    console.error('Failed to load raw data:', error);
  }
}
```
```

--------------------------------

### Get Localized Country Name Async

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/country-service.md

Use this function to retrieve the localized name of a country. Specify the country code and optionally the desired translation language code. Defaults to 'FR' and 'common' if not provided.

```typescript
import { getCountryNameAsync } from 'react-native-country-picker-modal'

const enName = await getCountryNameAsync('FR')
console.log(enName) // 'France'

const frName = await getCountryNameAsync('FR', 'fra')
console.log(frName) // 'France' (French name)

const deNames = await getCountryNameAsync('US', 'deu')
console.log(deNames) // 'Vereinigte Staaten'
```

--------------------------------

### Integration Test Country Loading and Searching

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

Verifies the asynchronous loading of countries with emoji flags and the search functionality. Ensures countries are loaded and can be filtered by name.

```typescript
import { getCountriesAsync, search } from 'react-native-country-picker-modal'
import { FlagType } from 'react-native-country-picker-modal'

describe('CountryService', () => {
  it('loads countries with emoji flags', async () => {
    const countries = await getCountriesAsync(FlagType.EMOJI)
    expect(countries.length).toBeGreaterThan(0)
    expect(countries[0]).toHaveProperty('cca2')
    expect(countries[0]).toHaveProperty('flag')
  })

  it('searches countries by name', async () => {
    const countries = await getCountriesAsync(FlagType.EMOJI)
    const results = search('United', countries)
    expect(results.length).toBeGreaterThan(0)
  })
})
```

--------------------------------

### v1 vs v2 Import Comparison

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

Compares import statements between v1 and v2 of the library. Both versions maintain compatibility for default component imports.

```typescript
// v1
import CountryPicker from 'react-native-country-picker-modal'
import { DEFAULT_THEME } from 'react-native-country-picker-modal'

// v2 (same)
import CountryPicker, { DEFAULT_THEME } from 'react-native-country-picker-modal'
```

--------------------------------

### Responsive Font Sizing

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/theme.md

Adjust font size dynamically based on screen dimensions using React Native's Platform and Dimensions APIs. This example sets a larger font size for screens wider than 600px.

```typescript
import { Platform, Dimensions } from 'react-native'

const screenWidth = Dimensions.get('window').width
const responsiveFontSize = screenWidth > 600 ? 18 : 14

const responsiveTheme: Theme = {
  fontSize: responsiveFontSize,
  filterPlaceholderTextColor: '#AAA',
}

<CountryPicker
  countryCode='US'
  onSelect={onSelect}
  theme={responsiveTheme}
/>
```

--------------------------------

### Country Picker Modal Props

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/README.md

Configuration options for the Country Picker Modal component.

```APIDOC
## Props

### `countryCode`
- Type: `CountryCode`
- Description: The default country code to be selected.

### `region`
- Type: `Region` (Optional)
- Description: The region to filter countries by.

### `subregion`
- Type: `Subregion` (Optional)
- Description: The subregion to filter countries by.

### `countryCodes`
- Type: `CountryCode[]` (Optional)
- Description: An array of country codes to display.

### `theme`
- Type: `Theme` (Optional)
- Description: Custom theme for the component.

### `translation`
- Type: `TranslationLanguageCode` (Optional)
- Description: Language code for country name translations.

### `modalProps`
- Type: `ModalProps` (Optional)
- Description: Props to be passed to the underlying React Native Modal.

### `filterProps`
- Type: `CountryFilterProps` (Optional)
- Description: Props to be passed to the country filter input.

### `flatListProps`
- Type: `FlatListProps<Country>` (Optional)
- Description: Props to be passed to the FlatList displaying countries.

### `withAlphaFilter`
- Type: `boolean` (Optional)
- Description: Enables alphabet filter.

### `withCallingCode`
- Type: `boolean` (Optional)
- Description: Shows calling code next to country name.

### `withCurrency`
- Type: `boolean` (Optional)
- Description: Shows currency next to country name.

### `withEmoji`
- Type: `boolean` (Optional)
- Description: Displays country flags as emojis.

### `withCountryNameButton`
- Type: `boolean` (Optional)
- Description: Displays a button with the country name.

### `withCurrencyButton`
- Type: `boolean` (Optional)
- Description: Displays a button with the country currency.

### `withCallingCodeButton`
- Type: `boolean` (Optional)
- Description: Displays a button with the country calling code.

### `withFlagButton`
- Type: `boolean` (Optional)
- Description: Displays a button with the country flag.

### `withCloseButton`
- Type: `boolean` (Optional)
- Description: Displays a close button in the modal header.

### `withFilter`
- Type: `boolean` (Optional)
- Description: Enables the filter input.

### `withFlag`
- Type: `boolean` (Optional)
- Description: Displays country flags.

### `withModal`
- Type: `boolean` (Optional, default: true)
- Description: Determines if the modal should be used.

### `visible`
- Type: `boolean` (Optional)
- Description: Controls the visibility of the modal.

### `containerButtonStyle`
- Type: `StyleProp<ViewStyle>` (Optional)
- Description: Style for the container of the flag button.

### `renderFlagButton`
- Type: `(props: FlagButton['props']) => ReactNode` (Optional)
- Description: Custom render function for the flag button.

### `renderCountryFilter`
- Type: `(props: CountryFilter['props']) => ReactNode` (Optional)
- Description: Custom render function for the country filter input.

### `onSelect`
- Type: `(country: Country) => void`
- Description: Callback function when a country is selected.

### `onOpen`
- Type: `() => void`
- Description: Callback function when the modal is opened.

### `onClose`
- Type: `() => void`
- Description: Callback function when the modal is closed.

### `closeButtonImage`
- Type: `ImageSourcePropType` (Optional)
- Description: Custom image for the close button.

### `closeButtonStyle`
- Type: `StyleProp<ViewStyle>` (Optional)
- Description: Style for the close button.

### `closeButtonImageStyle`
- Type: `StyleProp<ImageStyle>` (Optional)
- Description: Style for the close button image.

### `disableNativeModal`
- Type: `boolean` (Optional)
- Description: Disables the native modal. Requires wrapping the app with `CountryModalProvider`.

### `preferredCountries`
- Type: `CountryCode[]` (Optional)
- Description: An array of country codes that will appear at the top of the list. `withAlphaFilter` must be false when using this prop.
```

--------------------------------

### getCountriesAsync()

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/GENERATION_SUMMARY.txt

Asynchronously loads a list of countries, potentially with filtering options.

```APIDOC
## getCountriesAsync()

### Description
Asynchronously fetches a list of countries. This function is useful for populating country selection components or for retrieving country data.

### Signature
`getCountriesAsync(filter?: CountryFilterOptions): Promise<Country[]>`

### Parameters
- **filter** (CountryFilterOptions) - Optional - Options to filter the list of countries returned.

### Returns
- **Promise<Country[]>** - A promise that resolves to an array of Country objects.

### Errors
(Details on potential errors would be listed here if available in the source.)

### Example
```javascript
import { getCountriesAsync } from 'react-native-country-picker-modal';

async function fetchCountries() {
  try {
    const countries = await getCountriesAsync();
    console.log(countries);
  } catch (error) {
    console.error('Failed to fetch countries:', error);
  }
}
```
```

--------------------------------

### search()

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/GENERATION_SUMMARY.txt

Performs a fuzzy search on the list of countries.

```APIDOC
## search()

### Description
Performs a fuzzy search across the available country data to find matching countries based on a query string.

### Signature
`search(query: string, language?: TranslationLanguageCode): Country[]`

### Parameters
- **query** (string) - Required - The search term to look for.
- **language** (TranslationLanguageCode) - Optional - The language code to use for searching country names.

### Returns
- **Country[]** - An array of Country objects that match the search query.

### Example
```javascript
import { search } from 'react-native-country-picker-modal';

const searchResults = search('United');
console.log(searchResults);
```
```

--------------------------------

### Calculate Percentage Height - TypeScript Utility

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/advanced-components.md

Utility function to calculate percentage-based height for responsive layouts. Used internally for item height calculations.

```typescript
export const getHeightPercent = (percentage: number): number
```

--------------------------------

### Country Code Validation and Check

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/types.md

Demonstrates how to validate a string as a country code using `isCountryCode` or by checking inclusion in `CountryCodeList`.

```typescript
import { CountryCodeList, isCountryCode } from 'react-native-country-picker-modal'

// Validate a string as a country code
if (isCountryCode('US')) {
  // It's a valid country code
}

// Check if code is in list
if (CountryCodeList.includes('US')) {
  // It's a valid country code
}
```

--------------------------------

### Usage of Region Type

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/types.md

Demonstrates how to import and use the Region type in your application. Assign a valid region string to a variable or pass it as a prop to the CountryPicker component.

```typescript
import { Region } from 'react-native-country-picker-modal'

const region: Region = 'Europe'

// In component
<CountryPicker
  countryCode='US'
  onSelect={onSelect}
  region='Americas'
/>
```

--------------------------------

### Integrate with Phone Number Input

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

Combine `CountryPicker` with a `TextInput` for a seamless phone number input experience. Fetch the calling code for the selected country and display it as a placeholder.

```typescript
import { useState } from 'react'
import { View, TextInput } from 'react-native'
import CountryPicker, { getCallingCode } from 'react-native-country-picker-modal'
import { CountryCode, Country } from 'react-native-country-picker-modal'

function PhoneInput() {
  const [countryCode, setCountryCode] = useState<CountryCode>('US')
  const [callingCode, setCallingCode] = useState('1')
  const [phoneNumber, setPhoneNumber] = useState('')

  const handleSelectCountry = async (country: Country) => {
    setCountryCode(country.cca2)
    const code = await getCallingCode(country.cca2)
    setCallingCode(code)
  }

  return (
    <View>
      <CountryPicker
        countryCode={countryCode}
        onSelect={handleSelectCountry}
        withCallingCode={true}
      />
      <TextInput
        placeholder={`+${callingCode}`}
        value={phoneNumber}
        onChangeText={setPhoneNumber}
        keyboardType="phone-pad"
      />
    </View>
  )
}
```

--------------------------------

### Custom Styling with Theme Prop

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/README.md

Apply custom styles to the Country Picker component using the `theme` prop. This allows for easy integration with your application's design system.

```typescript
<CountryPicker
  theme={{
    primaryColor: '#007AFF',
    backgroundColor: '#f5f5f5',
  }}
/>
```

--------------------------------

### Workaround for Multiple Selection UI

Source: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/_autodocs/integration-guide.md

Implement a custom UI for multiple country selections using `CountryList` and state management, as the `CountryPicker` component itself only supports single selection.

```typescript
import { useState, useEffect } from 'react'
import { View, FlatList, TouchableOpacity, Text } from 'react-native'
import CountryPicker, { 
  CountryList,
  getCountriesAsync,
} from 'react-native-country-picker-modal'
import { CountryCode, Country, FlagType } from 'react-native-country-picker-modal'

function MultiSelectCountries() {
  const [countries, setCountries] = useState<Country[]>([])
  const [selected, setSelected] = useState<CountryCode[]>(['US'])

  useEffect(() => {
    getCountriesAsync(FlagType.EMOJI).then(setCountries)
  }, [])

  const toggleCountry = (code: CountryCode) => {
    setSelected(prev =>
      prev.includes(code)
        ? prev.filter(c => c !== code)
        : [...prev, code]
    )
  }

  return (
    <CountryList
      data={countries}
      onSelect={(country) => toggleCountry(country.cca2)}
      withEmoji={true}
      flatListProps={{
        renderItem: ({ item }) => (
          <TouchableOpacity
            onPress={() => toggleCountry(item.cca2)}
            style={{
              opacity: selected.includes(item.cca2) ? 1 : 0.5,
            }}
          >
            <Text>{item.name} {selected.includes(item.cca2) ? '✓' : ''}</Text>
          </TouchableOpacity>
        ),
      }}
    />
  )
}
```
Tokens:
Raw