There are over a thousand Text fonts freely available on internet for web and mobile applications. Custom font gives us the facility to expand our way of representing content in mobile applications like we see in Websites, Because we can use any font according to our customer requirement. There are no limitation in text if you are using custom fonts. Custom fonts makes our app rich and expensive. So in this tutorial we would going to create a react native mobile application with Custom External Text Fonts applied on Text component using fontFamily style. All the fonts used in this tutorial is downloaded from Google Fonts. You can also download fonts from Google Fonts. So let’s get started .
Contents in this project Add Custom External Text Fonts in React Native App :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Download Custom External fonts.
3. Open you react native project’s folder and create two folders inside it . First one assets . Now create another folder named as fonts inside the assets folder.
4. Put all the downloaded fonts inside the assets/fonts folder.
5. Open package.json file present inside your project folder. Add below lines inside it. Using the below code we would tell the React native project about our newly created custom fonts folder.
|
1
2
3
4
5
|
“rnpm”: {
“assets”: [
“./assets/fonts/”
]
}
|
6. Below is the copy of my package.json file after adding above code.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
{
“name”: “Myproject”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”,
“test”: “jest”
},
“dependencies”: {
“react”: “16.0.0-alpha.12”,
“react-native”: “0.48.4”
},
“devDependencies”: {
“babel-jest”: “21.2.0”,
“babel-preset-react-native”: “4.0.0”,
“jest”: “21.2.1”,
“react-test-renderer”: “16.0.0-alpha.12”
},
“jest”: {
“preset”: “react-native”
},
“rnpm”: {
“assets”: [
“./assets/fonts/”
]
}
}
|
7. Now Open your project folder inside CMD / Terminal, like i did in below screenshot.
6. Run
react–native link command . This command should refresh your complete project and add newly created assets/fonts folder to its directory listing. Now the font can be accessible using fontFamily style.
7. Open index.android.js / index.ios.js file.
8. Import AppRegistry, StyleSheet, Text and View component in your project.
|
1
2
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View } from ‘react-native’;
|
9. Create 3 Text component inside a Parent View in the render’s return block .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.container}>
<Text> React Native App </Text>
<Text> React Native App </Text>
<Text> React Native App </Text>
</View>
);
}
|
10. Now add custom fonts using inline style in each Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.container}>
<Text style={{fontFamily: “BerkshireSwash-Regular”, fontSize: 30}}> React Native App </Text>
<Text style={{fontFamily: “Pacifico-Regular”, fontSize: 30}}> React Native App </Text>
<Text style={{fontFamily: “GermaniaOne-Regular”, fontSize: 30}}> React Native App </Text>
</View>
);
}
|
11. Add style sheet class for Parent View.
|
1
2
3
4
5
6
7
8
|
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
});
|
12. Complete source code for index.android.js / index.ios.js file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View } from ‘react-native’;
class Myproject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{fontFamily: “BerkshireSwash-Regular”, fontSize: 30}}> React Native App </Text>
<Text style={{fontFamily: “Pacifico-Regular”, fontSize: 30}}> React Native App </Text>
<Text style={{fontFamily: “GermaniaOne-Regular”, fontSize: 30}}> React Native App </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshot in Android mobile phone application :
Screenshot in iOS mobile application :
Also Read :
React Native Add Sticky Header to ListView Android iOS Example
React Native Create Custom Component with custom user define Props
React Native Set TextInput Type Style Password Android iOS Example
React Native createBottomTabNavigator with Vector Icons Android iOS Example
React Native RequestFocus TextInput Programmatically Example
