fix #261

Author: xcarpentier

App.tsx

@@ -6,7 +6,6 @@ import {
   Switch,
   Button,
   ScrollView,
-  Platform,
 } from 'react-native'
 import CountryPicker from './src/'
 import { CountryCode, Country } from './src/types'
@@ -54,7 +53,7 @@ const Option = ({ value, onValueChange, title }: OptionProps) => (
 )
 
 export default function App() {
-  const [countryCode, setCountryCode] = useState<CountryCode>('FR')
+  const [countryCode, setCountryCode] = useState<CountryCode | undefined>()
   const [country, setCountry] = useState<Country>(null)
   const [withCountryNameButton, setWithCountryNameButton] = useState<boolean>(
     false,

src/CountryPicker.tsx

@@ -41,7 +41,7 @@ const renderFilter = (
   )
 
 interface CountryPickerProps {
-  countryCode: CountryCode
+  countryCode?: CountryCode
   region?: Region
   subregion?: Subregion
   countryCodes?: CountryCode[]
@@ -62,6 +62,7 @@ interface CountryPickerProps {
   withFlag?: boolean
   withModal?: boolean
   visible?: boolean
+  placeholder?: string
   containerButtonStyle?: StyleProp<ViewStyle>
   closeButtonImage?: ImageSourcePropType
   closeButtonStyle?: StyleProp<ViewStyle>
@@ -104,6 +105,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
     closeButtonStyle,
     closeButtonImageStyle,
     excludeCountries,
+    placeholder,
   } = props
   const [state, setState] = useState<State>({
     visible: props.visible || false,
@@ -135,15 +137,16 @@ export const CountryPicker = (props: CountryPickerProps) => {
   const onFocus = () => setState({ ...state, filterFocus: true })
   const onBlur = () => setState({ ...state, filterFocus: false })
   const flagProp = {
+    countryCode,
     withEmoji,
     withCountryNameButton,
     withCallingCodeButton,
     withCurrencyButton,
     withFlagButton,
-    countryCode,
     renderFlagButton: renderButton,
     onOpen,
     containerButtonStyle,
+    placeholder,
   }
 
   useEffect(() => {
@@ -211,4 +214,5 @@ CountryPicker.defaultProps = {
   withModal: true,
   withAlphaFilter: false,
   withCallingCode: false,
+  placeholder: 'Select Country',
 }

src/FlagButton.tsx

@@ -41,6 +41,7 @@ type FlagWithSomethingProp = Pick<
   | 'withCurrencyButton'
   | 'withCallingCodeButton'
   | 'withFlagButton'
+  | 'placeholder'
 > & { flagSize: number }
 
 const FlagText = (props: TextProps & { children: ReactNode }) => (
@@ -56,6 +57,7 @@ const FlagWithSomething = memo(
     withCallingCodeButton,
     withFlagButton,
     flagSize,
+    placeholder,
   }: FlagWithSomethingProp) => {
     const { translation, getCountryInfoAsync } = useContext()
     const [state, setState] = useState({
@@ -65,9 +67,11 @@ const FlagWithSomething = memo(
     })
     const { countryName, currency, callingCode } = state
     useEffect(() => {
-      getCountryInfoAsync({ countryCode, translation })
-        .then(setState)
-        .catch(console.warn)
+      if (countryCode) {
+        getCountryInfoAsync({ countryCode, translation })
+          .then(setState)
+          .catch(console.warn)
+      }
     }, [
       countryCode,
       withCountryNameButton,
@@ -77,9 +81,14 @@ const FlagWithSomething = memo(
 
     return (
       <View style={styles.flagWithSomethingContainer}>
-        <Flag
-          {...{ withEmoji, countryCode, withFlagButton, flagSize: flagSize! }}
-        />
+        {countryCode ? (
+          <Flag
+            {...{ withEmoji, countryCode, withFlagButton, flagSize: flagSize! }}
+          />
+        ) : (
+          <FlagText>{placeholder}</FlagText>
+        )}
+
         {withCountryNameButton && countryName ? (
           <FlagText>{countryName + ' '}</FlagText>
         ) : null}
@@ -101,7 +110,8 @@ interface FlagButtonProps {
   withCallingCodeButton?: boolean
   withFlagButton?: boolean
   containerButtonStyle?: StyleProp<ViewStyle>
-  countryCode: CountryCode
+  countryCode?: CountryCode
+  placeholder: string
   onOpen?(): void
 }
 
@@ -114,6 +124,7 @@ export const FlagButton = ({
   countryCode,
   containerButtonStyle,
   onOpen,
+  placeholder,
 }: FlagButtonProps) => {
   const { flagSizeButton: flagSize } = useTheme()
   return (
@@ -134,6 +145,7 @@ export const FlagButton = ({
             withCurrencyButton,
             withFlagButton,
             flagSize: flagSize!,
+            placeholder,
           }}
         />
       </View>