fontFamily prop passed to inputAndroid doesn't work
See original GitHub issueDescribe the bug
fontFamily prop passed to the TextInput style doesn’t work on Android (using Expo)
To Reproduce
Steps to reproduce the behavior:
- Import the fonts you want to use in your app.
- 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' },
]}
/>
- Create an styleSheet for the inputAndroid style:
const pickerStyle = StyleSheet.create({
inputAndroid: {
color: "#333",
fontFamily: "FiraSans",
marginLeft: 7,
marginBottom: 5,
paddingRight: 60
}
});
- 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
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:
- Created 3 years ago
- Comments:11 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
alright so you updated the snack to include it.
style.inputAndroid
just passes props down to TextInput. try again with your non-snack by applyinguseNativeAndroidPickerStyle={false}
check the docs https://github.com/lawnstarter/react-native-picker-select#android-specific
style.inputAndroid
requiresuseNativeAndroidPickerStyle={false}