feat: allow font scaling prop for Text and TextInput

.gitignore

@@ -68,3 +68,14 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Lock files
+yarn.lock
+ios/Podfile.lock

src/components/Dropdown/index.tsx

@@ -95,6 +95,7 @@ const DropdownComponent = React.forwardRef<IDropdownRef, DropdownProps<any>>(
       closeModalWhenSelectedItem = true,
       excludeItems = [],
       excludeSearchItems = [],
+      allowFontScaling = false,
     } = props;
 
     const ref = useRef<View>(null);
@@ -452,6 +453,7 @@ const DropdownComponent = React.forwardRef<IDropdownRef, DropdownProps<any>>(
           <View style={styles.dropdown}>
             {renderLeftIcon?.(visible)}
             <Text
+              allowFontScaling={allowFontScaling}
               style={[
                 styles.textItem,
                 isSelected !== null ? selectedTextStyle : placeholderStyle,
@@ -510,6 +512,7 @@ const DropdownComponent = React.forwardRef<IDropdownRef, DropdownProps<any>>(
               ) : (
                 <View style={styles.item}>
                   <Text
+                    allowFontScaling={allowFontScaling}
                     style={StyleSheet.flatten([
                       styles.textItem,
                       itemTextStyle,

src/components/Dropdown/model.ts

@@ -71,4 +71,5 @@ export interface DropdownProps<T> {
   searchQuery?: (keyword: string, labelValue: string) => boolean;
   onChangeText?: (search: string) => void;
   onConfirmSelectItem?: (item: T) => void;
+  allowFontScaling?: boolean;
 }

src/components/MultiSelect/index.tsx

@@ -97,6 +97,7 @@ const MultiSelectComponent = React.forwardRef<
     mode = 'default',
     excludeItems = [],
     excludeSearchItems = [],
+    allowFontScaling = false,
   } = props;
 
   const ref = useRef<View>(null);
@@ -420,6 +421,7 @@ const MultiSelectComponent = React.forwardRef<
         <View style={styles.dropdown}>
           {renderLeftIcon?.(visible)}
           <Text
+            allowFontScaling={allowFontScaling}
             style={StyleSheet.flatten([
               styles.textItem,
               placeholderStyle,
@@ -484,6 +486,7 @@ const MultiSelectComponent = React.forwardRef<
             ) : (
               <View style={styles.item}>
                 <Text
+                  allowFontScaling={allowFontScaling}
                   style={StyleSheet.flatten([
                     styles.textItem,
                     itemTextStyle,
@@ -764,6 +767,7 @@ const MultiSelectComponent = React.forwardRef<
                   ])}
                 >
                   <Text
+                    allowFontScaling={allowFontScaling}
                     style={StyleSheet.flatten([
                       styles.selectedTextLeftItem,
                       selectedTextStyle,
@@ -773,6 +777,7 @@ const MultiSelectComponent = React.forwardRef<
                     {_get(e, labelField)}
                   </Text>
                   <Text
+                    allowFontScaling={allowFontScaling}
                     style={StyleSheet.flatten([
                       styles.selectedTextItem,
                       selectedTextStyle,
@@ -816,6 +821,7 @@ const MultiSelectComponent = React.forwardRef<
             _renderItemSelected(true)
           ) : (
             <Text
+              allowFontScaling={allowFontScaling}
               style={StyleSheet.flatten([
                 styles.textItem,
                 placeholderStyle,

src/components/MultiSelect/model.ts

@@ -79,4 +79,5 @@ export interface MultiSelectProps<T> {
   searchQuery?: (keyword: string, labelValue: string) => boolean;
   onChangeText?: (search: string) => void;
   onConfirmSelectItem?: (item: any) => void;
+  allowFontScaling?: boolean;
 }

src/components/SelectCountry/index.tsx

@@ -16,6 +16,7 @@ const SelectCountryComponent = React.forwardRef<
     imageField,
     selectedTextStyle,
     imageStyle,
+    allowFontScaling = false,
   } = props;
   const ref: any = useRef(null);
 
@@ -35,7 +36,10 @@ const SelectCountryComponent = React.forwardRef<
     return (
       <View style={styles.item}>
         <Image source={item[imageField]} style={[styles.image, imageStyle]} />
-        <Text style={[styles.selectedTextStyle, selectedTextStyle]}>
+        <Text
+          allowFontScaling={allowFontScaling}
+          style={[styles.selectedTextStyle, selectedTextStyle]}
+        >
           {item[labelField]}
         </Text>
       </View>

src/components/TextInput/index.tsx

@@ -26,6 +26,7 @@ const TextInputComponent: CTextInput = (props) => {
     onChangeText = (_value: string) => {},
     renderLeftIcon,
     renderRightIcon,
+    allowFontScaling = false,
   } = props;
 
   const [text, setText] = useState<string>('');
@@ -77,6 +78,7 @@ const TextInputComponent: CTextInput = (props) => {
         <View style={styles.textInput}>
           {renderLeftIcon?.()}
           <TextInput
+            allowFontScaling={allowFontScaling}
             {...props}
             style={StyleSheet.flatten([styles.input, inputStyle, font()])}
             value={text}