Develop Reference

React Native Android Fonts don't work when specific font-family is not applied

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
},

React native Expo Custom font android issue

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

What is common thing to handle for ios and android platform in react-native?

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.

Styles are not being applied to children props

My container class:
import React from 'react';
import {View} from 'react-native';
const Cont = (props) => {
return(
<View style={styles.cStyle}>
{props.children}
</View>
);
};
const styles = {
cStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#fff',
borderBottomWidth: 0,
elevation: 10,
marginLeft: 5,
marginRight: 5,
marginTop: 10
}
};
export default Cont;
Now the class that uses this component:
import React from 'react';
import {Text} from 'react-native';
import Cont from './Cont';
const Det = (props) => {
return(
<Cont>
<Text>{props.alb.title}</Text>
</Cont>
);
};
export default Det;
I don't think I need to provide the index.js, since all I'm doing related to the subject in matter is calling a self closing tag of the object. I have no idea why my styles are not being applied. I checked everything I thought I could of have checked. Any ideas? Any support is appreciated.
PS: I was expecting <Text /> childs to inherit my styles
PS2: Also I'm not sure this is really 'inheritance'. Because actually the styles should affect every <View> from my class and then consequently the children that is INSIDE my <View> tags

I'd like to answer my own question regarding this issue because there might be other persons struggling now or in the future, and would not know quite what to do, hopefully this answer will help them.
There was no error in my code, at least not in the classes I posted above. And EVERY <Text> children should be inside a styled <View>, which was my intention at first. So I had made a typo when calling the class in the entry js file. But, somehow (yes this defies my current React Native knowledge which is already little) the app was still compiling but not styling ANYTHING. Only after I restarted not only the server in the terminal but also the simulator, is that I received the bug which I could finnally debug. (Unexpected char 'blabla' in Line X). After fixing it my styles were applied. But the craziest thing is: It was either compiling with an unexpected character (which seems impossible to me) or compiling a past version of my App. Now, this sounds absolutely crazy to me and I will be reporting it on React Native forums and Android Studio. Thanks for all the help.
EDIT: React Native forums topic on the issue: http://discuss.nativebase.io/t/android-simulator-compiling-wrong-code/1183

Regular styles behave differently in react-native compared to CSS in say, the web-browser. There's no concept of style inheritance by default in react-native, so styling that you apply to <Cont /> won't be inherited by the children of <Cont /> (ie your <Text> elements).
When styling with react, you'll typically need to apply styles directly to all components that you want to tweak the appearance of:
<Cont>
{ /* custom styling must be applied to all components that you
want to tweak */ }
<Text style={{ color : 'red' }}>{props.alb.title}</Text>
</Cont>
Something to also keep in mind is that different element types (<Text/> , <View />, etc) sometimes only support a limited subset of styling options. For example, see the styling documentation for <Text /> for an overview of the styling options that the <Text /> element type supports.

Android react-native app not picking up font

I am trying to use a font "Verveine Corp Regular' inside my react-native app.
The font works in the iOS build, but not in the Android build.
The font is in .tff format and is placed in the root of my work (linked in the package.json and I have run react-native link) and inside "android/gradle/src/main/assets/fonts" but it's still not picking the font up. I have also cleaned and rebuilt the app multiple times.
When inspecting an element which uses the font in the android debugger, it says it's using the font. But the font is still the default font.
Could anyone offer some help or guidance on this issue?
Thanks!

The other answers helped me get this working for me, thank you. This manuever is probably only necessary when the font has capital letters in the filename. A more complete answer:
Add the font as normal in react native, for example:
{react-native-project}/fonts/GovtAgentBB.ttf
Run react-native link and this will put the font in
{react-native-project}/android/app/src/main/assets/fonts/GovtAgentBB.ttf
{react-native-project}/android/app/src/main/assets/fonts/GovtAgentBB_ital.ttf
But android, bring robotic and not human, doesn't like this. So rename the file with all lower case letters and an underscore before the variant, like:
{react-native-project}/android/app/src/main/assets/fonts/govtagentbb.ttf
{react-native-project}/android/app/src/main/assets/fonts/govtagentbb_ital.ttf
Then, you have to change the font name in the style depending on the platform. For iOS, use the human name that is the name of the font that would be displaying in the title of the window of the Mac Font menu (or just the name you see on the web). For android, you have to, robotically, use the name of the file you just renamed.
{Platform.OS === 'ios' ? (
<Text style={styles.welcome}>
Hello World!
</Text>
) : (
<Text style={styles.welcomeAndroid}>
Hello World
</Text>
)}
const styles = StyleSheet.create({
...
welcome: {
fontFamily: 'Government Agent BB',
},
welcomeAndroid: {
fontFamily: 'govtagentbb',
},

This is how I used custom font in my project
//sampleStyle.js
import overrideStyles from '/sampleoverridestyles';
iconTextStyle: {
color: '#FFFFFF',
fontSize: 16
}
//sampleoverridestyles.ios.js
export default {
iconTextStyle: {
fontFamily: 'FaktSoftPro-Medium'
}
}
//sampleoverridestyles.android.js
export default {
iconTextStyle: {
fontFamily: 'faktsoftpro_medium'
}
}
since I cannot set the font name same for iOS and android I have overridden it as above and it worked.

Guys if you are following all other solution and still no update then try following the steps
add react-native-config.js file
then add fonts in assets/fonts/your font
rename it with lowercase like OpenSans_Regular to opensans_regular
react-native link in terminal in your project folder
after all build your project again using react-native run-android
fontFamily: Platform.OS === "ios" ? 'opensans_regular' : 'cassandrapersonaluseregular_3bjg',
I was also getting the same issue the font was not reflecting changes then I build my project again that was my mistake because we adding fonts in our android folder so we need to compile that again.
I hope someone may save their time

I added font in react-native android from here:
https://medium.com/#gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7#.40vw3ooar
Follow all the steps it will work fine.
After adding run react-native run-android

First, make sure you are up to version 0.16+ with react-native.
Your fonts should be *.ttf or *.otf files and must be located in: /projectname/android/app/src/main/assets/fonts
Make sure the fonts are lowercase only and follow this pattern: fontname.ttf, fontname_bold.ttf, fontname_light.ttf, fontname_bold_italic.ttf

Have you defined another font in your AppTheme (styles.xml), that overrides your preferred font?
Have you tested your font with a "Hello World"-App as a minimal test?
Have you implemented your ttf as shown here for example?: How to use custom font in Android Studio