React native Question posted in
The official React Native documentation can be found here.

React Native Fonts are Not Working on Styleshhet.create object

fontFamily not working. Am i must use the expo-font why?
Also, when using expo, you need to specify the font name in the element, I do not want this.

// react-native.config.js

module.exports = {
  "assets": ["./assets/fonts/"],
}

// src/constants/fonts.ts

 export const fonts = {
  QUICKSAND: {
    REGULAR: 'QuicksandRegular',
    BOLD: 'QuicksandBold',
    LIGHT: 'QuicksandLight',
    MEDIUM: 'QuicksandMedium',
  },
  SOUR_GUMMY: {
    REGULAR: 'SourGummyRegular',
    BOLD: 'SourGummyBold',
    LIGHT: 'SourGummyLight',
    MEDIUM: 'SourGummyMedium',
  },
}

// GreetingPage.ts

import { StyleSheet, Text, View } from "react-native";
import React from "react";
import colors from "../constants/colors";
import { flexbox } from "../constants/mixins";
import { fonts } from "../constants/fonts";

const GreetingPage = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to App</Text>
    </View>
  );
};



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.primary,
    width: "100%",
    ...flexbox("center", "center"),
  },
  text: {
    fontSize: 24,
    color: colors.white,
    fontFamily: fonts.SOUR_GUMMY.BOLD,
  },
});

export default GreetingPage;

// asset/fonts
enter image description here

Tags:

2

Answers


  1. 0

    Here is a solution that worked for me in my React native application

    1. Declare a font.ts file inside your src folder and put this inside it

      export const FONT_FAMILY = { nunito_black: require("../assets/fonts/Nunito/static/Nunito-Black.ttf"),}
      you can change it to the font you want to use in your application

    2. Go to your app.tsx file and import the FONT_FAMILY declared above. Then, put this code inside your app.tsx.

      const [loaded] = useFonts(FONT_FAMILY);
      if (!loaded) {
      return null;
      }

    NOTE: import useFonts from expo-fonts
    Further reading: expo-fonts

    Login or Signup to reply.
  2. 0

    You need to link them after that you’ll be able to use them in any files inside the project. For that just run the below command.

    npx react-native-asset

    If the assets are successfully linked, you should see the following message in your terminal

    > npx react-native-asset info Linking ttf assets to iOS project  info
> Linking ttf assets to Android project
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search