rn-country-dropdown-picker

A fully customizable react native component that displays the flag and name of the selected country from a dropdwon list.

with customization	Without Customization (out of the box)

Forked to use react-native-country-flag instead

Installation

1. npm i react-native-country-flag install peer dependencies
2. npm i rn-country-dropdown-picker

Import Component

import CountryPicker from 'rn-country-dropdown-picker';

Usage

This component can be used as it is without any customization, just import and use

import React from 'react';
import {View, Text} from 'react-native';
import CountryPicker from 'rn-country-dropdown-picker';

export default function App() {

  function handleSelection(e) {
    console.log(e);
  }

  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      <CountryPicker selectedItem={handleSelection} />
    </View>
  );
}

Usage with customizations

import React from "react";
import { Dimensions, StyleSheet, View } from "react-native";
import CountryPicker from "rn-country-dropdown-picker";

export default function App() {

  function handleSelection(e) {
    console.log(e);
  }

  return (
    <View style={styles.container}>
     <CountryPicker
        InputFieldStyle={styles.ContainerStyle}
        DropdownContainerStyle={styles.myDropdownContainerStyle}
        DropdownRowStyle={styles.myDropdownRowStyle}
        Placeholder="choose country ..."
        DropdownCountryTextStyle={styles.myDropdownCountryTextStyle}
        countryNameStyle={styles.mycountryNameStyle}
        flagSize={24}
        selectedItem={handleSelection}
      />

    </View>
  );
}

const styles = StyleSheet.create({{...}});

Props	Type	Description	Optional
InputFieldStyle	View Style	Defines the first color in the linear gradient of a chart's background	yes
ContainerStyle	View Style	Defines the View style of the components container	yes
DropdownCountryTextStyle	Text Style	Defines the style of the country names in the dropdown	yes
DropdownContainerStyle	View Style	Defines the style of the whole dropdown container	yes
DropdownRowStyle	View Style	Defines the style of the individual view row in the dropdown ( icon + country name )	yes
countryNameStyle	Text Style	Defines the style of the selected country name	yes
flagSize	Number	Flag size according to react-native-flags (Allowed values: 16, 24, 32, 48 or 64)	yes
Placeholder	String	Place holder for input	yes
selectedItem	(e: { country:string, code: string}) => void	a function that sets the selected country and code	mandatory

More information

This library is built on top of the following open-source projects:

• react-native-Flags (https://github.com/frostney/react-native-flags)