Is there an option to adjust the font and size of the font?

[sdadrianalvarez]

I want to change the fontFamily and fontSize. Thank you.

[lfkwtz]

Of what specifically? A certain element? On a specific platform or both?

[sdadrianalvarez]

I installed the "Open Sans" library on Android and I will also install it on iOS. On Android I put the TTF files in this path: "android / app / src / main / assets / fonts /".

Then, in react-native, I put something like this in the styles:

input: { fontFamily: 'OpenSans-Regular', fontSize: 13, color: 'white', },

But this does not work for "react-native-picker-select". So my question is, how can I assign these styles in Android and iOS?

Thank you

[claudelarland]

I have the same problem

[lfkwtz]

What element are you trying to target with the font? The Picker component?

[sdadrianalvarez]

@lfkwtz Yes, that's exactly what I want to do.

I tried to assign it this style but it doesn't work:

inputAndroid: { height: width * 0.11, color: cdarkblue, fontFamily: 'OpenSans-Regular', fontSize: 13, }

This image shows the problem (fifth field):

[lfkwtz]

That's unfortunately a limitation of the native Picker component as supplied by RN. If you do some research on Stack Overflow, you'll see some ways to modify it via the styles.xml file.

The solution here would be to use the "headless" mode for Android and wrap this component in a simulated input that is styled the way you want.

[sdadrianalvarez]

Oh, that's very sad.

I appreciate your help anyway.
Thank you

[lfkwtz]

It'll be a little extra work, but you can make it function exactly the same way. Look at the android-headless example for help getting started.

[ChandniSharma]

how to increase it's textInput height and font size also how to give it's background color as I tried but doesn't work any thing.
Please suggest
Please select your subCity
<RNPickerSelect
placeholder={{
label: 'Select subcity',
value: null,
}}
items={this.state.items2}
onValueChange={(value) => {
this.setState({
subcitySelected: value,
});
}}
onUpArrow={() => {
this.inputRefs.picker.togglePicker();
}}
onDownArrow={() => {
this.inputRefs.picker3.togglePicker();
}}
style={ homeStyle.inputIOS }
value={this.state.subcitySelected}
ref={(el) => {
this.inputRefs.picker2 = el;
}}
/>

[ssarnot]

I have same issue. Solution of our problem is very simple:

<RNPickerSelect
  // your props
  useNativeAndroidPickerStyle={false}
/>

And you should have defined fontFamily property inside your inputAndroid style object.

[ThailanHigor]

I have same issue. Solution of our problem is very simple:

<RNPickerSelect
  // your props
  useNativeAndroidPickerStyle={false}
/>

And you should have defined fontFamily property inside your inputAndroid style object.

Thanks!

[YosefBlandin]

If you want to prevent font scaling in the dialog that opens up after pressing the input too, use the following solution:

With this solution you don't need to change the useNativeAndroidPickerStyle property.

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 to the /node_modules/react-native-picker-select/src/index.js file:

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.

If everything is okay, run: npx patch-package react-native-picker-select this command will generate the patch for the library inside the patches folder in order to be applied with the postinstall script after running npm install.

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