React Native Fontext
react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.
Setup
Installation
$ npm install react-native-fontext
or
$ yarn add react-native-fontext
Setup Instructions
-
Download and integrate fonts in your react-native application
-
Download your preferred font from Google Fonts or any other font provider.
-
Create a folder
fonts
in the root directory and place your downloaded fonts here. It is not mandatory to keep thefonts
folder in the root directory but it is advised to keep it there for maintaining simplicity. -
Create a
react-native.config.js
file 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.js
file.
module.exports = { project: { ios: {}, android: {}, }, assets: ['./fonts'], };
- In the terminal, write the command
npx react-native link
to 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.
Props
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 |
Usage
-
Install the package
react-native-fontext
npm install react-native-fontext
-
Import the
Text
component fromreact-native-fontext
import Text from react-native-fontext
-
Use
fontFamily
andfontWeight
to add fonts to your Text.
textStyle: {
fontFamily: 'NotoSansMono',
fontWeight: '900',
},
Noto Sans
Example: Adding font 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;
Example: Using a Component prop
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;