{"library":"react-native-country-picker-modal","title":"React Native Country Picker Modal","description":"react-native-country-picker-modal is a versatile React Native component that provides a customizable modal for selecting countries. It supports both iOS, Android, and Web platforms, making it suitable for cross-platform applications. The current stable version is 2.0.0, which recently added support for preferred countries. While the release cadence has been somewhat irregular, the project remains active, with the v2.0.0 release following a significant period since the previous major update. Key features include displaying country flags (as emojis or flat images), showing calling codes, and offering filtering capabilities. The library also ships with comprehensive TypeScript definitions, ensuring a smooth developer experience in typed environments, and supports various customization options for its appearance and behavior.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-native-country-picker-modal"],"cli":null},"imports":["import CountryPicker from 'react-native-country-picker-modal'","import type { CountryCode } from 'react-native-country-picker-modal'","import type { Country } from 'react-native-country-picker-modal'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react'\nimport { View, Text, StyleSheet, Switch } from 'react-native'\nimport CountryPicker from 'react-native-country-picker-modal'\nimport type { CountryCode, Country } from 'react-native-country-picker-modal'\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n    paddingTop: 50\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: 'center',\n    margin: 10\n  },\n  optionContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '80%',\n    marginVertical: 5\n  }\n})\n\nconst Option = ({ title, value, onValueChange }) => (\n  <View style={styles.optionContainer}>\n    <Text>{title}</Text>\n    <Switch value={value} onValueChange={onValueChange} />\n  </View>\n);\n\nexport default function App() {\n  const [countryCode, setCountryCode] = useState<CountryCode>('US')\n  const [country, setCountry] = useState<Country | null>(null)\n  const [withCountryNameButton, setWithCountryNameButton] = useState<boolean>(false)\n  const [withFlag, setWithFlag] = useState<boolean>(true)\n  const [withEmoji, setWithEmoji] = useState<boolean>(true)\n  const [withFilter, setWithFilter] = useState<boolean>(true)\n  const [withAlphaFilter, setWithAlphaFilter] = useState<boolean>(false)\n  const [withCallingCode, setWithCallingCode] = useState<boolean>(false)\n\n  const onSelect = (selectedCountry: Country) => {\n    setCountryCode(selectedCountry.cca2)\n    setCountry(selectedCountry)\n  }\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.welcome}>Welcome to Country Picker!</Text>\n      <Option title='With country name on button' value={withCountryNameButton} onValueChange={setWithCountryNameButton} />\n      <Option title='With flag' value={withFlag} onValueChange={setWithFlag} />\n      <Option title='With emoji' value={withEmoji} onValueChange={setWithEmoji} />\n      <Option title='With filter' value={withFilter} onValueChange={setWithFilter} />\n      <Option title='With calling code' value={withCallingCode} onValueChange={setWithCallingCode} />\n      <Option title='With alpha filter code' value={withAlphaFilter} onValueChange={setWithAlphaFilter} />\n\n      <CountryPicker\n        {...{\n          countryCode,\n          withFilter,\n          withFlag,\n          withCountryNameButton,\n          withAlphaFilter,\n          withCallingCode,\n          withEmoji,\n          onSelect,\n          modalProps: { visible: true }\n        }}\n      />\n      {country && (\n        <Text style={{ marginTop: 20 }}>\n          Selected Country: {country.name} ({country.cca2}) {country.flag}\n          {country.callingCode.length > 0 && ` +${country.callingCode[0]}`}\n        </Text>\n      )}\n    </View>\n  )\n}","lang":"typescript","description":"This quickstart demonstrates basic integration of the CountryPicker component, showcasing how to select a country, display its code and flag, and dynamically toggle various options like filters, flag type, and calling codes using React hooks.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}