withFlagButton and withCallingCodeButton not showing values

[raazatul7]

Issue Description

withFlagButton and withCallingCodeButton not showing values

Steps to Reproduce / Code Snippets

<CountryPicker
                withCallingCode
                preferredCountries={['IN']}
                withFlagButton
                withCallingCodeButton
                containerButtonStyle={{
                  width: 200,
                  height: 100,
                }}
                placeholder={'+91'}
                onSelect={(val) => {
                  console.log('val=>', val);
                  this.setState({countryCode: val.callingCode[0]});
                }}
              />

Expected Results

It should show the country code on the screen when selecting the country.

Additional Information

• React version: 16.13.1
• React Native version: 0.63.3
• react-native-country-picker-modal version: 2.0.0
• Platform(s) (iOS, Android, web, or all?): All

[iwut]

You'll have to set the countryCode value prop on the CountryPicker,

countryCode={this.state.countryCode}

hope it helps!

[amalmohann]

when I tried this I got an error as following :

TypeError : undefined is not an object (evaluating 'str.indexOf')

[VickyA371]

If you are already aware of Patch Package Plugin then you can add below patch file to your project to handle this issue.

diff --git a/node_modules/react-native-country-picker-modal/lib/Flag.js b/node_modules/react-native-country-picker-modal/lib/Flag.js
index b974950..3ab7d74 100644
--- a/node_modules/react-native-country-picker-modal/lib/Flag.js
+++ b/node_modules/react-native-country-picker-modal/lib/Flag.js
@@ -31,10 +31,13 @@ const ImageFlag = memo(({ countryCode, flagSize }) => {
     if (asyncResult.loading) {
         return React.createElement(ActivityIndicator, { size: 'small' });
     }
-    return (React.createElement(Image, { resizeMode: 'contain', style: [
+    if (!asyncResult.loading && !asyncResult.result) {
+        return null
+    }
+    return (React.createElement(View, { style: styles.container }, React.createElement(Image, { resizeMode: 'contain', style: [
             styles.imageFlag,
             { borderColor: 'transparent', height: flagSize },
-        ], source: { uri: asyncResult.result } }));
+        ], source: { uri: asyncResult.result } })));
 });
 const EmojiFlag = memo(({ countryCode, flagSize }) => {
     const { getEmojiFlagAsync } = useContext();
@@ -42,10 +45,14 @@ const EmojiFlag = memo(({ countryCode, flagSize }) => {
     if (asyncResult.loading) {
         return React.createElement(ActivityIndicator, { size: 'small' });
     }
-    return (React.createElement(Text, { style: [styles.emojiFlag, { fontSize: flagSize }], allowFontScaling: false },
-        React.createElement(Emoji, Object.assign({}, { name: asyncResult.result }))));
+    if (!asyncResult.loading && !asyncResult.result) {
+        return null
+    }
+    return (React.createElement(View, { style: styles.container }, React.createElement(Text, { style: [styles.emojiFlag, { fontSize: flagSize }], allowFontScaling: false }, React.createElement(Emoji, Object.assign({}, { name: asyncResult.result })))))
 });
-export const Flag = ({ countryCode, withEmoji, withFlagButton, flagSize, }) => withFlagButton ? (React.createElement(View, { style: styles.container }, withEmoji ? (React.createElement(EmojiFlag, Object.assign({}, { countryCode, flagSize }))) : (React.createElement(ImageFlag, Object.assign({}, { countryCode, flagSize }))))) : null;
+
+export const Flag = ({ countryCode, withEmoji, withFlagButton, flagSize, }) => withFlagButton ? withEmoji ? (React.createElement(EmojiFlag, Object.assign({}, { countryCode, flagSize }))) : (React.createElement(ImageFlag, Object.assign({}, { countryCode, flagSize }))) : null;
+
 Flag.defaultProps = {
     withEmoji: true,
     withFlagButton: true,
diff --git a/node_modules/react-native-country-picker-modal/lib/FlagButton.js b/node_modules/react-native-country-picker-modal/lib/FlagButton.js
index 7ad3e7b..4886ad8 100644
--- a/node_modules/react-native-country-picker-modal/lib/FlagButton.js
+++ b/node_modules/react-native-country-picker-modal/lib/FlagButton.js
@@ -25,6 +25,7 @@ const styles = StyleSheet.create({
 const FlagText = (props) => (React.createElement(CountryText, Object.assign({}, props, { style: styles.something })));
 const FlagWithSomething = memo(({ countryCode, withEmoji, withCountryNameButton, withCurrencyButton, withCallingCodeButton, withFlagButton, flagSize, placeholder, }) => {
     const { translation, getCountryInfoAsync } = useContext();
+    const [loading, setLoading] = useState(true)
     const [state, setState] = useState({
         countryName: '',
         currency: '',
@@ -35,7 +36,10 @@ const FlagWithSomething = memo(({ countryCode, withEmoji, withCountryNameButton,
         if (countryCode) {
             getCountryInfoAsync({ countryCode, translation })
                 .then(setState)
-                .catch(console.warn);
+                .catch(console.warn)
+                .finally(function () {
+                    setLoading(false)
+                });
         }
     }, [
         countryCode,
@@ -43,9 +47,10 @@ const FlagWithSomething = memo(({ countryCode, withEmoji, withCountryNameButton,
         withCurrencyButton,
         withCallingCodeButton,
     ]);
+
     return (React.createElement(View, { style: styles.flagWithSomethingContainer },
         countryCode ? (React.createElement(Flag, Object.assign({}, { withEmoji, countryCode, withFlagButton, flagSize: flagSize }))) : (React.createElement(FlagText, null, placeholder)),
-        withCountryNameButton && countryName ? (React.createElement(FlagText, null, countryName + ' ')) : null,
+        withCountryNameButton && countryName ? (React.createElement(FlagText, null, countryName + ' ')) : loading || !countryCode ? null : (React.createElement(FlagText, null, placeholder)),
         withCurrencyButton && currency ? (React.createElement(FlagText, null, `(${currency}) `)) : null,
         withCallingCodeButton && callingCode ? (React.createElement(FlagText, null, `+${callingCode}`)) : null));
 });