📲💬 react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.

Overview

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

  1. Download and integrate fonts in your react-native application

    1. Download your preferred font from Google Fonts or any other font provider.

    2. Create a folder fonts in the root directory and place your downloaded fonts here. It is not mandatory to keep the fonts folder in the root directory but it is advised to keep it there for maintaining simplicity.

    3. 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 the react-native.config.js file.

    module.exports = {
      project: {
        ios: {},
        android: {},
      },
      assets: ['./fonts'],
    };
    1. In the terminal, write the command npx react-native link to link the fonts with your android and ios projects.
    2. Once linking is done, you can see the integrated fonts in Android (android/app/src/main/assets/fonts) and ios (info.plist).
  2. 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 from react-native-fontext

      import Text from react-native-fontext
    
  • Use fontFamily and fontWeight to add fonts to your Text.

textStyle: {
    fontFamily: 'NotoSansMono',
    fontWeight: '900',
  },

Example: Adding font Noto Sans

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;
You might also like...
RoboDemo is a ShowCase library for Android to demonstrate to users how a given Activity works.
RoboDemo is a ShowCase library for Android to demonstrate to users how a given Activity works.

RoboDemo RoboDemo is a ShowCase library for Android to demonstrate to users how a given Activity works. A sample is available in the download area of

Library to read incoming SMS in Android for Expo (React Native)

react-native-expo-read-sms Maintainers maniac-tech Active maintainer Installation Install this in your managed Expo project by running this command: $

FairEmail is easy to set up and works with virtually all email providers, including Gmail, Outlook and Yahoo!
FairEmail is easy to set up and works with virtually all email providers, including Gmail, Outlook and Yahoo!

Downloads • Privacy • Support • License FairEmail Fully featured, open source, privacy oriented email app for Android FairEmail is easy to set up and

Simple library to decompress files .zip, .rar, .cbz, .cbr in React Native.
Simple library to decompress files .zip, .rar, .cbz, .cbr in React Native.

Uncompress React Native Simple library to decompress files .zip, .rar, .cbz and .cbr in React Native. Installation yarn add uncompress-react-native o

MQTTandroidApp is android application that monitoring users state and other ambient condition, the acquire data is send at central broker (RaspberryPI3) of the MQTT architecture and then recieved back again an anothers android devices that chose to subscribe at topic.
A Kotlin Mindustry mod that works on Android and PC

Mindustry Kotlin Mod Template A Kotlin Mindustry mod that works on Android and PC. This is equivalent to the Java version, except in Kotlin. Building

A rewrite of the popular project GitUp that works in Linux, Mac, and Windows.
A rewrite of the popular project GitUp that works in Linux, Mac, and Windows.

GitDown This is a rewrite from the ground up of the popular GitUp library available on Mac. It is built using Kotlin and Compose Desktop from Jetbrain

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

Ionic Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a sin

Find your ideal fitness partners according to your preferences and interact with them whenever you want! All this with no hassle, because there's FitMate! Take timed challenges updated daily, read blogs related to health, and be a part of numerous communities too! During covid times, partner with your FitMate to achieve your fitness goals at home.
Comments
  • Update module

    Update module

    • [TS] no children error
    • [TS] component & computeFont are required props error
    • [Example] Add example
    • [Feat] Optimise style assignment (without spread)
    opened by retyui 0
Owner
mroads
This is official public repository for mroads.com
mroads
Matomo wrapper for React-Native. Supports Android and iOS. Fixed issues for native platforms build that are present in the official package.

@mccsoft/react-native-matomo Matomo wrapper for React-Native. Supports Android and iOS. Fixed issues for native platforms build that are present in th

MCC Soft 4 Dec 29, 2022
React-native-user-interface - Change React Native userinterface at runtime

react-native-user-interface change RN userinterface at runtime. Installation npm

Ahmed Eid 0 Jan 11, 2022
🌄 Photo editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)

React Native Photo Editor (RNPE) ?? Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and Ph

Baron Ha. 242 Dec 28, 2022
Initiate immediate phone call for React Native on iOS and Android.

react-native-immediate-call-library Initiate immediate phone call for React Native on iOS and Android. Getting started Using npm: npm install react-na

null 7 Sep 7, 2022
🚀 React Native Segmented Control, Pure Javascript for iOS and Android

Installation Add the dependency: npm i react-native-segmented-control-2 Peer Dependencies Zero Dependency ?? Usage Import import SegmentedControl from

FreakyCoder 11 Nov 10, 2022
An Animated Scrolling View for React Native applications, supported on both iOS and Android

react-native-focused-scroll An Animated Scrolling View for React Native applications, supported on both iOS and Android Preview react-native-focus-scr

Fatemeh Marzoughi (Saba) 3 Aug 12, 2022
You can store all your password, bank details, card details in one place and remember only one master PIN. The application works totally offline.

Keep Password An application where you can store all your password, bank details, card details in one place and remember only one master PIN. The appl

rıdvan 4 Apr 18, 2022
How to integrate classic App Shortcuts with Google Assistant through the new Capabilities API

Assistant Shortcuts (App Actions) En este ejemplo, revisaremos el uso de los clásicos Shortcuts de Android repotenciados con Google Assistant, haciend

Carlo Huamán 3 Jun 20, 2021
Works Planning Application

Works Planning Application Clean Architecture MVVM Room database Binding Adapters Data Binding View Binding RecyclerView.Adapter DiffUtil LiveData Vie

null 0 Nov 23, 2021
A music picker library for React Native. Provides access to the system's UI for selecting songs from the phone's music library.

Expo Music Picker A music picker library for React Native. Provides access to the system's UI for selecting songs from the phone's music library. Supp

Bartłomiej Klocek 60 Dec 29, 2022