fix type

App.tsx

@@ -1,5 +1,12 @@
 import React, { useState } from 'react'
-import { View, Text, StyleSheet, PixelRatio, Switch } from 'react-native'
+import {
+  View,
+  Text,
+  StyleSheet,
+  PixelRatio,
+  Switch,
+  Button
+} from 'react-native'
 import CountryPicker from './src/'
 import { CountryCode, Country } from './src/types'
 import { Row } from './src/Row'
@@ -22,8 +29,8 @@ const styles = StyleSheet.create({
     marginBottom: 5
   },
   data: {
-    padding: 15,
-    marginTop: 10,
+    padding: 10,
+    marginTop: 7,
     backgroundColor: '#ddd',
     borderColor: '#888',
     borderWidth: 1 / PixelRatio.get(),
@@ -53,10 +60,12 @@ export default function App() {
   const [withAlphaFilter, setWithAlphaFilter] = useState<boolean>(false)
   const [withCallingCode, setWithCallingCode] = useState<boolean>(false)
   const [withCurrency, setWithCurrency] = useState<boolean>(false)
+  const [visible, setVisible] = useState<boolean>(false)
   const onSelect = (country: Country) => {
     setCountryCode(country.cca2)
     setCountry(country)
   }
+  const switchVisible = () => setVisible(!visible)
   return (
     <View style={styles.container}>
       <Text style={styles.welcome}>Welcome to Country Picker !</Text>
@@ -101,12 +110,21 @@ export default function App() {
           withCallingCode,
           withCurrency,
           withEmoji,
-          onSelect
+          onSelect,
+          modalProps: {
+            visible
+          },
+          onClose: () => setVisible(false),
+          onOpen: () => setVisible(true)
         }}
       />
       <Text style={styles.instructions}>Press on the flag to open modal</Text>
+      <Button
+        title={'Open modal from outside using visible props'}
+        onPress={() => switchVisible()}
+      />
       {country !== null && (
-        <Text style={styles.data}>{JSON.stringify(country, null, 2)}</Text>
+        <Text style={styles.data}>{JSON.stringify(country, null, 0)}</Text>
       )}
     </View>
   )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-country-picker-modal",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "react-native country picker",
   "main": "node_modules/expo/AppEntry.js",
   "types": "lib/index.d.ts",

scripts/transform-world-countries.js

@@ -21,8 +21,8 @@ const getCountryNames = (common, translations) =>
 const newcountries = countries
   .map(({ cca2, currency, callingCode, name: { common }, translations }) => ({
     [cca2]: {
-      currency: currency[0],
-      callingCode: callingCode[0],
+      currency,
+      callingCode,
       flag: isEmoji ? `flag-${cca2.toLowerCase()}` : flags[cca2],
       name: { common, ...getCountryNames(common, translations) }
     }

src/CountryList.tsx

@@ -104,10 +104,10 @@ const CountryItem = (props: CountryItemProps) => {
   } = props
   const extraContent: string[] = []
   if (withCallingCode && country.callingCode) {
-    extraContent.push(`+${country.callingCode}`)
+    extraContent.push(`+${country.callingCode.join('|')}`)
   }
   if (withCurrency && country.currency) {
-    extraContent.push(country.currency)
+    extraContent.push(country.currency.join('|'))
   }
   return (
     <TouchableOpacity

src/CountryPicker.tsx

@@ -49,6 +49,8 @@ interface CountryPickerProps {
   renderFlagButton?(props: FlagButton['props']): ReactNode
   renderCountryFilter?(props: CountryFilter['props']): ReactNode
   onSelect(country: Country): void
+  onOpen?(): void
+  onClose?(): void
 }
 
 export const CountryPicker = (props: CountryPickerProps) => {
@@ -67,7 +69,9 @@ export const CountryPicker = (props: CountryPickerProps) => {
     withCallingCode,
     withCurrency,
     withFlag,
-    withModal
+    withModal,
+    onClose: handleClose,
+    onOpen: handleOpen
   } = props
   const [state, setState] = useState<State>({
     visible: props.visible || false,
@@ -76,8 +80,18 @@ export const CountryPicker = (props: CountryPickerProps) => {
   })
   const { translation, getCountries } = useContext()
   const { visible, filter, countries } = state
-  const onOpen = () => setState({ ...state, visible: true })
-  const onClose = () => setState({ ...state, filter: '', visible: false })
+  const onOpen = () => {
+    setState({ ...state, visible: true })
+    if (handleOpen) {
+      handleOpen()
+    }
+  }
+  const onClose = () => {
+    setState({ ...state, filter: '', visible: false })
+    if (handleClose) {
+      handleClose()
+    }
+  }
   const setFilter = (filter: string) => setState({ ...state, filter })
   const setCountries = (countries: Country[]) =>
     setState({ ...state, countries })
@@ -104,7 +118,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
     <>
       {renderFlagButton(flagProp)}
       <CountryModal
-        {...{ ...modalProps, visible, withModal }}
+        {...{ visible, withModal, ...modalProps }}
         onRequestClose={onClose}
       >
         <HeaderModal