add feature fontscaling

trooperandz · Mar 19, 2021 · f62a668 · f62a668
1 parent 1ae3a26
commit f62a668
Show file tree

Hide file tree

Showing 9 changed files with 1,607 additions and 1,501 deletions.
diff --git a/App.tsx b/App.tsx
@@ -61,23 +61,25 @@ export default function App() {
   const [withCurrencyButton, setWithCurrencyButton] = useState<boolean>(false)
   const [withFlagButton, setWithFlagButton] = useState<boolean>(true)
   const [withCallingCodeButton, setWithCallingCodeButton] = useState<boolean>(
-    false,
+    true,
   )
   const [withFlag, setWithFlag] = useState<boolean>(true)
   const [withEmoji, setWithEmoji] = useState<boolean>(true)
   const [withFilter, setWithFilter] = useState<boolean>(true)
   const [withAlphaFilter, setWithAlphaFilter] = useState<boolean>(false)
-  const [withCallingCode, setWithCallingCode] = useState<boolean>(false)
+  const [withCallingCode, setWithCallingCode] = useState<boolean>(true)
   const [withCurrency, setWithCurrency] = useState<boolean>(false)
   const [withModal, setWithModal] = useState<boolean>(true)
   const [visible, setVisible] = useState<boolean>(false)
   const [dark, setDark] = useState<boolean>(false)
+  const [fontScaling, setFontScaling] = useState<boolean>(true)
   const [disableNativeModal, setDisableNativeModal] = useState<boolean>(false)
   const onSelect = (country: Country) => {
     setCountryCode(country.cca2)
     setCountry(country)
   }
   const switchVisible = () => setVisible(!visible)
+
   return (
     <CountryModalProvider>
       <ScrollView contentContainerStyle={styles.container}>
@@ -102,6 +104,11 @@ export default function App() {
           value={withFlag}
           onValueChange={setWithFlag}
         />
+        <Option
+          title='With font scaling'
+          value={fontScaling}
+          onValueChange={setFontScaling}
+        />
         <Option
           title='With emoji'
           value={withEmoji}
@@ -146,6 +153,7 @@ export default function App() {
         <CountryPicker
           theme={dark ? DARK_THEME : {}}
           {...{
+            allowFontScaling: fontScaling,
             countryCode,
             withFilter,
             excludeCountries: ['FR'],

diff --git a/data/countries-emoji.json b/data/countries-emoji.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "react-native-country-picker-modal",
   "version": "2.0.0",
   "description": "react-native country picker",
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "repository": {
     "type": "git",

diff --git a/src/CountryFilter.tsx b/src/CountryFilter.tsx
@@ -10,10 +10,10 @@ const styles = StyleSheet.create({
       web: {
         outlineWidth: 0,
         outlineColor: 'transparent',
-        outlineOffset: 0
-      }
-    })
-  }
+        outlineOffset: 0,
+      },
+    }),
+  },
 })
 
 export type CountryFilterProps = TextInputProps
@@ -23,16 +23,16 @@ export const CountryFilter = (props: CountryFilterProps) => {
     filterPlaceholderTextColor,
     fontFamily,
     fontSize,
-    onBackgroundTextColor
+    onBackgroundTextColor,
   } = useTheme()
   return (
     <TextInput
-      testID="text-input-country-filter"
+      testID='text-input-country-filter'
       autoCorrect={false}
       placeholderTextColor={filterPlaceholderTextColor}
       style={[
         styles.input,
-        { fontFamily, fontSize, color: onBackgroundTextColor }
+        { fontFamily, fontSize, color: onBackgroundTextColor },
       ]}
       {...props}
     />
@@ -41,5 +41,5 @@ export const CountryFilter = (props: CountryFilterProps) => {
 
 CountryFilter.defaultProps = {
   autoFocus: false,
-  placeholder: 'Enter country name'
+  placeholder: 'Enter country name',
 }
diff --git a/src/CountryList.tsx b/src/CountryList.tsx
@@ -58,11 +58,13 @@ const styles = StyleSheet.create({
 })
 
 interface LetterProps {
+  allowFontScaling?: boolean
   letter: string
   scrollTo(letter: string): void
 }
-const Letter = ({ letter, scrollTo }: LetterProps) => {
+const Letter = ({ allowFontScaling, letter, scrollTo }: LetterProps) => {
   const { fontSize, activeOpacity } = useTheme()
+
   return (
     <TouchableOpacity
       testID={`letter-${letter}`}
@@ -72,8 +74,8 @@ const Letter = ({ letter, scrollTo }: LetterProps) => {
     >
       <View style={styles.letter}>
         <CountryText
+          allowFontScaling={allowFontScaling}
           style={[styles.letterText, { fontSize: fontSize! * 0.8 }]}
-          allowFontScaling={false}
         >
           {letter}
         </CountryText>
@@ -151,6 +153,7 @@ const renderItem = (props: Omit<CountryItemProps, 'country'>) => ({
 )
 
 interface CountryListProps {
+  allowFontScaling?: boolean
   data: Country[]
   filter?: string
   filterFocus?: boolean
@@ -176,6 +179,7 @@ const { height } = Dimensions.get('window')
 
 export const CountryList = (props: CountryListProps) => {
   const {
+    allowFontScaling,
     data,
     withAlphaFilter,
     withEmoji,
@@ -256,8 +260,8 @@ export const CountryList = (props: CountryListProps) => {
           contentContainerStyle={styles.letters}
           keyboardShouldPersistTaps='always'
         >
-          {letters.map(letter => (
-            <Letter key={letter} {...{ letter, scrollTo }} />
+          {letters.map((letter) => (
+            <Letter key={letter} {...{ allowFontScaling, letter, scrollTo }} />
           ))}
         </ScrollView>
       )}

diff --git a/src/CountryPicker.tsx b/src/CountryPicker.tsx
@@ -41,6 +41,7 @@ const renderFilter = (
   )
 
 interface CountryPickerProps {
+  allowFontScaling?: boolean
   countryCode?: CountryCode
   region?: Region
   subregion?: Subregion
@@ -78,6 +79,7 @@ interface CountryPickerProps {
 
 export const CountryPicker = (props: CountryPickerProps) => {
   const {
+    allowFontScaling,
     countryCode,
     region,
     subregion,
@@ -109,7 +111,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
     closeButtonImageStyle,
     excludeCountries,
     placeholder,
-    preferredCountries
+    preferredCountries,
   } = props
   const [state, setState] = useState<State>({
     visible: props.visible || false,
@@ -138,6 +140,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
       handleClose()
     }
   }
+
   const setFilter = (filter: string) => setState({ ...state, filter })
   const setCountries = (countries: Country[]) =>
     setState({ ...state, countries })
@@ -148,6 +151,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
   const onFocus = () => setState({ ...state, filterFocus: true })
   const onBlur = () => setState({ ...state, filterFocus: false })
   const flagProp = {
+    allowFontScaling,
     countryCode,
     withEmoji,
     withCountryNameButton,
@@ -169,7 +173,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
       countryCodes,
       excludeCountries,
       preferredCountries,
-      withAlphaFilter
+      withAlphaFilter,
     )
       .then(setCountries)
       .catch(console.warn)
@@ -195,6 +199,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
           renderFilter={(props: CountryFilter['props']) =>
             renderFilter({
               ...props,
+              allowFontScaling,
               renderCountryFilter,
               onChangeText: setFilter,
               value: filter,
@@ -206,6 +211,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
         />
         <CountryList
           {...{
+            allowFontScaling,
             onSelect: onSelectClose,
             data: countries,
             letters: [],
@@ -229,4 +235,5 @@ CountryPicker.defaultProps = {
   withAlphaFilter: false,
   withCallingCode: false,
   placeholder: 'Select Country',
+  allowFontScaling: true,
 }
diff --git a/src/FlagButton.tsx b/src/FlagButton.tsx
@@ -41,14 +41,15 @@ type FlagWithSomethingProp = Pick<
   | 'withCallingCodeButton'
   | 'withFlagButton'
   | 'placeholder'
-> & { flagSize: number }
+> & { flagSize: number; allowFontScaling?: boolean }
 
 const FlagText = (props: TextProps & { children: ReactNode }) => (
   <CountryText {...props} style={styles.something} />
 )
 
 const FlagWithSomething = memo(
   ({
+    allowFontScaling,
     countryCode,
     withEmoji,
     withCountryNameButton,
@@ -85,24 +86,31 @@ const FlagWithSomething = memo(
             {...{ withEmoji, countryCode, withFlagButton, flagSize: flagSize! }}
           />
         ) : (
-          <FlagText>{placeholder}</FlagText>
+          <FlagText allowFontScaling={allowFontScaling}>{placeholder}</FlagText>
         )}
 
         {withCountryNameButton && countryName ? (
-          <FlagText>{countryName + ' '}</FlagText>
+          <FlagText allowFontScaling={allowFontScaling}>
+            {countryName + ' '}
+          </FlagText>
         ) : null}
         {withCurrencyButton && currency ? (
-          <FlagText>{`(${currency}) `}</FlagText>
+          <FlagText
+            allowFontScaling={allowFontScaling}
+          >{`(${currency}) `}</FlagText>
         ) : null}
         {withCallingCodeButton && callingCode ? (
-          <FlagText>{`+${callingCode}`}</FlagText>
+          <FlagText
+            allowFontScaling={allowFontScaling}
+          >{`+${callingCode}`}</FlagText>
         ) : null}
       </View>
     )
   },
 )
 
 export interface FlagButtonProps {
+  allowFontScaling?: boolean
   withEmoji?: boolean
   withCountryNameButton?: boolean
   withCurrencyButton?: boolean
@@ -115,6 +123,7 @@ export interface FlagButtonProps {
 }
 
 export const FlagButton = ({
+  allowFontScaling,
   withEmoji,
   withCountryNameButton,
   withCallingCodeButton,
@@ -137,6 +146,7 @@ export const FlagButton = ({
       >
         <FlagWithSomething
           {...{
+            allowFontScaling,
             countryCode,
             withEmoji,
             withCountryNameButton,

diff --git a/src/index.tsx b/src/index.tsx
@@ -14,6 +14,7 @@ import { StyleProp, ViewStyle, ModalProps, FlatListProps } from 'react-native'
 import { CountryPicker } from './CountryPicker'
 
 interface Props {
+  allowFontScaling?: boolean
   countryCode: CountryCode
   region?: Region
   subregion?: Subregion