I tried using a custom font Avenir-book.tff and AvernirNext.otf for my expo project. For some reason my custom font works in my iOS device but doesn't work for my android device. Here my code:
app.js:
UNSAFE_componentWillMount() {
Font.loadAsync({
"Avenir-Book": require("./assets/fonts/Avenir-Book.ttf"),
"Avenir-Next": require("./assets/fonts/AvenirNextLTPro-Bold.otf"),
}).then(() => this.setState({ fontsLoaded: true }));
}
my text:
<Text style={styles.text}>ORA</Text>
Style sheet:
text: {
color: colors.white,
fontSize: 30,
fontFamily: "Avenir-Book",
fontWeight: "bold",
marginTop: 8,
},
I tried using both the fonts. Both works perfectly fine on iOS but doesn't work at all on android. Does anyone know why?
I think this answer is relevant: https://stackoverflow.com/a/62460424/659988
Be sure to refer to this minimal and complete working example in the documentation too: https://docs.expo.io/guides/using-custom-fonts/#a-minimal-but-complete-working-example
Related
I have the following files added in the android/src/main/assets folder.
Poppins-Bold.ttf
Poppins-Regular.ttf
Poppins-Light.ttf
Poppins-Medium.ttf
Poppins-MediumItalic.ttf
When applying font-family as follows in my stylesheet
header: {
fontFamily: 'Poppins',
fontWeight: '700'
}
This works fine on iOS but the font-family is not applied on Android. After going through some answers provided, I figured out we could apply the following directly and it'll work
header: {
fontFamily: 'Poppins-Bold',
}
This works on both Android and iOS. But the problem here is, if I want to give my devs control on font-weight with this custom font, can't do that.
Is there no way to, say maybe combine all ttf's to one ttf and use it with font-weight or some efficient way to fix this in Android?
you can follow step to do this
make js file react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['../../assets/fonts'],
};
then make fonts folder inside android assets and copy all
End in js file used font like
txtLoginDescription: {
color: COLORS.F_1E1F22,
fontSize: 12,
width: '100%',
textAlign: 'center',
fontFamily: 'Montserrat-Regular',
fontWeight: '400',
marginTop: 15
},
I want to style my List Slider, I used thumbStyle prop but this isn't working in android any suggestions ?
<RNListSlider
mainContainerStyle={{ backgroundColor: "#F3F5F9" }}
thumbStyle={{ color: 'green' }}
tenthItemStyle={{}}
itemStyle={{ color: 'red' }}
value={num}
onValueChange={vl => setNum(vl)}
/>
I've been building react-native for android at beginning and never been into IOS as I don't have project that use IOS at that moment and I don't own IOS or MacOS. And I'm clueless of what is difference between IOS and Android in general. I'm currently need to develop my app to be able to use by both Android and IOS.
What are the common things that need to be handle? To be exact, check for Platform. From maestral-solutions, it shows on stylesheet that the header height and margin top:-
const styles = StyleSheet.create({
header: {
height: Platform.OS === 'android' ? 76 : 100,
marginTop: Platform.OS === 'ios' ? 0 : 24,
...Platform.select({
ios: { backgroundColor: '#f00', paddingTop: 24},
android: { backgroundColor: '#00f'}
}),
alignItems: 'center',
justifyContent: 'center'
},
text: {
color: '#fff',
fontSize: 24
}
});
Is there any other common things to handle for IOS platform? Like status bar or tab navigation or icon?
You can use SafeAreaView instead of View for wrap.
for example:
render() {
return (
<SafeAreaView>
<View style={{backgroundColor: 'red'}} />
</SafeAreaView>
);
}
If you wrap with View then the header will cutted when you are using iPhoneX since iPhoneX has different UI with others.
And also there are some other things different in style.
In iOS you should add overflow: 'hidden' for borderRadius. Means, you can only use borderRadius in Android but you can see the circular border after add overflow: 'hidden'. And I think the backgroundColor will works in Text component in Android but not in iOS.
Then you should care about Alert.alert in iOS. in Android you can normally use Alert and setState in the same time. But if you use Alert and setState in the same time then alert disappear right after show. For break down this you can use like this.
setTimeout(() => {
Alert.alert('info', 'Testing');
}, 100);
this.setState({spinner: false});
You can check this will works well in iOS too.
I'm currently facing a font weight issue. This occured after I installed a custom font via Xcode. I've linked everything and the custom font works but I still see no effect?
attrName: {
color: '#000',
fontWeight: '300' /* Normally this should work */
},
Has anyone else stumbled upon this issue? Need to solve this fast...
UPDATE
I solved this a while after posting this. If you want different font weights to your text element, make sure to import all types of weight of your font in Xcode or Android Studio. One weight or version of the font is not enough...
I'm facing a similar issue.
react: 16.0.0-alpha.6
react-native: 0.44
fontWeight: '300' works for IOS but doesn't for Android. I certainly don't want to include ALL font weights for every single font I use, that's why I propose the following approach for those who are still looking:
// Style definition
const styles = StyleSheet.create({
base: {
fontFamily: 'Roboto',
},
light: {
...Platform.select({
ios: {
fontWeight: '300',
},
android: {
// RN 0.44.0 bug: fontWeight 300 not linked to *Thin or *Light fonts yet...
fontFamily: 'Roboto-Thin',
},
}),
},
});
Usage example:
<Text style={styles.base}>Hello world</Text>
<Text style={[styles.base, styles.light]}>Hello light world</Text>
In future releases, this will most likely be fixed by the API, but the devs have got their hands full for now :)
I was facing the same issue, but the I realized that is should be -
fontWeight:'bold',
not -
fontweight:'bold',
the only difference is w->W
ya some time we get wrong auto suggestion, usually happens a lot when you work on lot of different languages.
I have encountered a problem porting my app from iOS to android. I have built a minimal bug case with which it can be reproduced.
My app is very simple and consists of one component:
const Main = () => (
<View>
<View style= {styles.green}>
<View style={styles.blue}/>
</View>
</View>
)
export default Main;
const styles = StyleSheet.create({
green: {
height:200,
marginTop: 200,
backgroundColor: 'green',
},
blue:{
position:'absolute',
height: 100,
width: 100,
top: -50,
backgroundColor: 'blue',
},
})
But strangely this component renders differently on iOS and Android
iOS
Android
I would like it to render like on iOS on both devices. You can check code on this repo https://github.com/42void/ReactNativeBug to easily reproduce it.
Thank you!
In Android overflow property defaults to 'hidden' and cannot be changed.
From 0.23 known issues, apparently isn't fixed yet.