how to disable font scaling of @react-native-picker/picker

[ksquaresys22]

If we want to disable font scaling, we can add this code to app.js or index.js.

if (Text.defaultProps == null) {
    Text.defaultProps = {};
    Text.defaultProps.allowFontScaling = false;
}

We want to disable the font scaling of the picker component in the same way.

Please help me

[YosefBlandin]

Hi @ksquaresys22, I managed to prevent font scaling in the picker component by modifying a file in the library and patching it, below are the adjustments in the .patch file that I made:

diff --git a/node_modules/react-native-picker-select/src/index.js b/node_modules/react-native-picker-select/src/index.js
index c38a05b..89f18a6 100644
--- a/node_modules/react-native-picker-select/src/index.js
+++ b/node_modules/react-native-picker-select/src/index.js
@@ -4,6 +4,20 @@ import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 import { Picker } from '@react-native-picker/picker';
 import { defaultStyles } from './styles';
+import { PixelRatio } from 'react-native';
+
+const calculateFixedFontSize = (baseFontSize) => {
+  const fixedScaleFactor = 1;
+
+  const pixelDensity = PixelRatio.getFontScale();
+
+  // Calculate the fixed font size
+  const fixedFontSize = baseFontSize / pixelDensity * fixedScaleFactor;
+
+  return fixedFontSize;
+};
 
 export default class RNPickerSelect extends PureComponent {
     static propTypes = {
@@ -280,6 +294,9 @@ export default class RNPickerSelect extends PureComponent {
                     key={item.key || item.label}
                     color={item.color || defaultItemColor}
                     testID={item.testID}
+		     style={{
+		     fontSize: calculateFixedFontSize(16)
+		     }}
                 />
             );
});

If you have the version 8.1.0 you can easily copy and paste the previous code and create a file called: react-native-picker-select+8.1.0.patch inside a folder named patches in the root of your project. Afterwards run the following command:

npm i patch-package or
npm i patch-package --legacy-peer-deps

Choosing one or another depends on your project.

When the installation process has finished, add the following script inside the "scripts" property of your package json: "postinstall": "patch-package",

The purpose of that script is to run after you install your project's dependencies and apply the patch to the library.

If you want to do it by yourself without the patch file I left above, go to the following path: "your_project/node_modules/react-native-picker-select/src/index.js" and apply the changes using the calculateFixedFontSize function inside the style property of the <Picker.Item component returned by the renderPickerItems method:

<Picker.Item label={item.label} value={item.value} key={item.key || item.label} color={item.color || defaultItemColor} testID={item.testID} style={{ fontSize: calculateFixedFontSize(16) }} />

With the changes made you can test by changing the default font size in your device's display settings and check how the font doesn't scale inside the picker.

Don't forget to commit the changes made in order to preserve the patch inside your project.

That's it, I hope this helps everyone facing the same challenge.

patch-package: https://www.npmjs.com/package/patch-package