Even though I did everything correctly, my React app still doesn't change the font.
First I added:
module.exports = {
assets: ['./assets/fonts']
}
to react-native.config.js, then I created a folder in the assets folder and named it fonts and pasted all the fonts there, then I used this commmand npx react-native-asset. After that I added fontFamily: Poppins-Regular to the stylesheets and it doesn't work!
Please someone tell me what did I do wrong?
Here is my code:
import React from 'react';
import {Image, StyleSheet, Text, View, ImageBackground, Dimensions } from 'react-native';
const width_screen = Dimensions.get('window').width;
const hight_screen = Dimensions.get('window').height;
const card_size = {
width:614,
height:285,
}
let card_hight = 0;
if (width_screen < 614)
card_hight = ((screen.width - 50) * card_size.height) / card_size.width;
else
card_hight = 285
const Card = () => {
return (
<ImageBackground
source={require('../assets/card1.png')}
style={styles.card}>
<View style={styles.card}>
<Text>
<img style={styles.image} src={require('../assets/user4.png')}/>
<Text style={styles.cardNameText}>{'Bahez'}</Text>
<Text style={styles.balance}>100<Text style={styles.usdt}>USDT</Text></Text>
</Text>
<img style={styles.settings} src={require('../assets/settings.png')}/>
<Text style={styles.inviteCode}>Invite Code : 1225346</Text>
</View>
</ImageBackground>
);
}
export default Card;
const styles = StyleSheet.create({
card : {
width: "100%",
height : card_hight,
maxHeight : 285,
maxWidth: 614,
},
test : {
backgroundColor : 'red',
},
cardNameText : {
marginTop : 25,
position : 'absolute',
color : 'white',
fontSize : 22,
fontWeight : 500,
},
balance :{
fontFamily : 'Poppins-Regular',
position: 'absolute',
top : 10,
right: 20,
color : 'white',
fontWeight : 800,
fontSize : 25,
},
inviteCode : {
position : 'absolute',
bottom : 20,
left : 25,
color : 'white',
fontWeight : 500,
},
settings : {
width : 20,
height : 20,
position: 'absolute',
bottom : 20,
right: 25,
},
usdt : {
padding : 3,
paddingTop : 15,
fontSize : 13,
},
image: {
padding : 20,
width: 40,
height: 40,
}
});
Here is a screenshot of the project:
