xxxxxxxxxx
STEP 1 : If not already created, create a config file at the root of the project named react-native.config.js.
Proceed by adding the following code inside
STEP 2 : module.exports = {
project: {
ios:{},
android:{}
},
assets:['./assets/fonts/'],
}
STEP 3 : Run the following command :-
npx react-native link (React-native version < 0.69)
npx react-native-asset (React-native version > 0.69)
xxxxxxxxxx
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts']
};
xxxxxxxxxx
module.exports = {
project: {
ios:{},
android:{}
},
assets:['./assets/fonts/'],
}
xxxxxxxxxx
import React from 'react';
import { Text, StyleSheet } from 'react-native';
import * as Font from 'expo-font';
export default class App extends React.Component {
state = {
fontLoaded: false
};
async componentDidMount() {
await Font.loadAsync({
'customFont': require('./path/to/customFont.ttf'), // Replace with your font file path
});
this.setState({ fontLoaded: true });
}
render() {
return (
this.state.fontLoaded ? (
<Text style={styles.customFont}>Custom Font Example</Text>
) : null
);
}
}
const styles = StyleSheet.create({
customFont: {
fontFamily: 'customFont', // Use the same font family as specified while loading
fontSize: 16,
},
});