xcarpentier / react-native-country-picker-modal

🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.
https://reactnative.gallery/xcarpentier/country-picker
MIT License
1.07k stars 796 forks source link

Allowing for custom FlagSize of FlagButton #431

Closed Svarto closed 2 years ago

Svarto commented 3 years ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-country-picker-modal@2.0.0 for the project I'm working on.

I needed to control the size of the FlagButton, so I made a minor patch to pass in customFlagSize to FlagButton. See below patch-package.

Here is the diff that solved my problem:

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..75bbabc 100644
--- a/node_modules/react-native-country-picker-modal/lib/FlagButton.js
+++ b/node_modules/react-native-country-picker-modal/lib/FlagButton.js
@@ -49,7 +49,7 @@ const FlagWithSomething = memo(({ countryCode, withEmoji, withCountryNameButton,
         withCurrencyButton && currency ? (React.createElement(FlagText, null, `(${currency}) `)) : null,
         withCallingCodeButton && callingCode ? (React.createElement(FlagText, null, `+${callingCode}`)) : null));
 });
-export const FlagButton = ({ withEmoji, withCountryNameButton, withCallingCodeButton, withCurrencyButton, withFlagButton, countryCode, containerButtonStyle, onOpen, placeholder, }) => {
+export const FlagButton = ({ customFlagSize, withEmoji, withCountryNameButton, withCallingCodeButton, withCurrencyButton, withFlagButton, countryCode, containerButtonStyle, onOpen, placeholder, }) => {
     const { flagSizeButton: flagSize } = useTheme();
     return (React.createElement(TouchableOpacity, { activeOpacity: 0.7, onPress: onOpen },
         React.createElement(View, { style: [
@@ -64,7 +64,7 @@ export const FlagButton = ({ withEmoji, withCountryNameButton, withCallingCodeBu
                 withCallingCodeButton,
                 withCurrencyButton,
                 withFlagButton,
-                flagSize: flagSize,
+                flagSize: customFlagSize || flagSize,
                 placeholder,
             })))));
 };

This issue body was partially generated by patch-package.

Vaidas737 commented 3 years ago

It's the same as:


theme={{
    flagSizeButton: 50
}}
stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.