question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

fontFamily prop passed to inputAndroid doesn't work

See original GitHub issue

Describe the bug
fontFamily prop passed to the TextInput style doesn’t work on Android (using Expo)

To Reproduce
Steps to reproduce the behavior:

  1. Import the fonts you want to use in your app.
  2. Use the picker provided by this repository, for example:
<RNPickerSelect
   style={pickerStyle}
   useNativeAndroidPickerStyle={false}
   onValueChange={(value) => console.log(value)}
   items={[
      { label: 'Football', value: 'football' },
      { label: 'Baseball', value: 'baseball' },
      { label: 'Hockey', value: 'hockey' },
   ]}
/>
  1. Create an styleSheet for the inputAndroid style:
const pickerStyle = StyleSheet.create({
  inputAndroid: {
    color: "#333",
    fontFamily: "FiraSans",
    marginLeft: 7,
    marginBottom: 5,
    paddingRight: 60
  }
});
  1. fontFamily prop doesn’t apply, but all others do.

Expected behavior
TextInput should change the font based on what is passed on the fontFamily prop

Screenshots
image Top: Picker using the style above Down: TextInput with the “fontFamily: FiraSans” prop in its style

Additional details

  • Device: Redmi 4x
  • OS: Android 7.1.2
  • react-native-picker-select version: 6.6.0
  • react-native version: 0.61 (through Expo SDK 36)
  • react version: 16.9

Reproduction and/or code sample
Here’s a snack: https://snack.expo.io/@r_kuerten/react-native-picker-select Local imported font is not recognized by the component, that switchs to one of the backup fonts.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
lfkwtzcommented, Apr 2, 2020

alright so you updated the snack to include it.

style.inputAndroid just passes props down to TextInput. try again with your non-snack by applying useNativeAndroidPickerStyle={false}

1reaction
lfkwtzcommented, Apr 2, 2020

check the docs https://github.com/lawnstarter/react-native-picker-select#android-specific

style.inputAndroid requires useNativeAndroidPickerStyle={false}

Read more comments on GitHub >

github_iconTop Results From Across the Web

TextInput font family doesn't work in React Native Android
I'm creating a React Native Application with React Native version: '~0.55.2'. I have two custom fonts and I have set them using rnpm...
Read more >
TextInput · React Native Paper
If true, user won't be able to interact with the component. label ... Pass fontSize prop to modify the font size inside TextInput...
Read more >
(React Native) Create a Custom Text Component ... - Medium
Open in app ... To make the font family configurable via props, ... If the style prop is passed an array of style...
Read more >
Open Props: sub-atomic styles
Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.
Read more >
3 ways to add custom fonts to your MUI project - LogRocket Blog
Then, wrap your components with the default MUI ThemeProvider component, passing it theme props. The value of the theme props should be the ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found