react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.
$ npm install react-native-fontext
or
$ yarn add react-native-fontext
-
Download and integrate fonts in your react-native application
-
Download your preferred font from Google Fonts or any other font provider.
-
Create a folder
fontsin the root directory and place your downloaded fonts here. It is not mandatory to keep thefontsfolder in the root directory but it is advised to keep it there for maintaining simplicity. -
Create a
react-native.config.jsfile in the root directory of your project. This file is responsible for locating fonts' path so that react-native knows where to find them. The below code explains the content of thereact-native.config.jsfile.
module.exports = { project: { ios: {}, android: {}, }, assets: ['./fonts'], };
- In the terminal, write the command
npx react-native linkto link the fonts with your android and ios projects. - Once linking is done, you can see the integrated fonts in Android (
android/app/src/main/assets/fonts) and ios (info.plist).
-
-
Rebuild the project in Android and iOS projects and re-run the application.
inherits Text Props from react-native. All the props that are available for React Native Text component are available for font-text Text component.
| Prop | Default | Type | Description |
|---|---|---|---|
| computeFont | - | function |
Function that calculates font family |
| component | React Native Text | React.Component |
A custom component that can be passed to override the default component |
-
Install the package
react-native-fontextnpm install react-native-fontext -
Import the
Textcomponent fromreact-native-fontextimport Text from react-native-fontext -
Use
fontFamilyandfontWeightto add fonts to your Text.
textStyle: {
fontFamily: 'NotoSansMono',
fontWeight: '900',
},import React from 'react';
import { StyleSheet, View, Image } from 'react-native';
import logo from './assets/images/logo.png';
import Text from 'react-native-fontext';
const App = () => {
return (
<View>
<Image source={logo} />
<Text style={styles.text}>
react-native-fontext gives you the ability to embed any font into your
react native application.
</Text>
</View>
);
};
const styles = StyleSheet.create({
text: {
// Add the following lines to add fonts in your Text component
fontFamily: 'NotoSansMono',
fontWeight: 'bold',
},
// Rest of the styles
});
export default App;
import React, { useState } from 'react';
import { StyleSheet, View, Image } from 'react-native';
import logo from './assets/images/logo.png';
import Text from 'react-native-fontext';
import { Button, Text as NBText } from 'native-base';
const COLORS = ['red', 'green', 'blue', 'orange', 'purple'];
const App = () => {
const [color, setColor] = useState('black');
const toggleColor = () => {
let randomColor = COLORS[Math.floor(Math.random() * COLORS.length)];
setColor(randomColor);
};
return (
<View style={styles.container}>
<Image source={logo} />
<Text style={[styles.text, { color: color }]}>
react-native-fontext gives you the ability to embed any font into your
react native application.
</Text>
<Button>
<Text
onPress={toggleColor}
component={NBText}
style={styles.buttonText}
>
Toggle Color
</Text>
</Button>
</View>
);
};
const styles = StyleSheet.create({
text: {
// Add the following lines to add fonts in the text project
fontFamily: 'NotoSansMono',
fontWeight: 'bold',
marginBottom: 60,
},
buttonText: {
// Add the following lines to add fonts in the button's Text component
fontFamily: 'NotoSansMono',
fontWeight: '900',
},
// Rest of the styling
});
export default App;