How to add google fonts to React Native?-CodePudding

I have a project created with npx react-native init myProject to which I want to add external Google sources, in this case Lobster-regular.

First, install via terminal "@ expo-google-fonts/lato" and "@expo-google-fonts/oswald" following a tutorial. Perform the imports in the App.js file:

import {
  useFonts as useOswald,
  Oswald_400 Regular,
} from '@ expo-google-fonts / oswald'

import {
  useFonts as useLato,
  Lato_400Regular,
} from '@ expo-google-fonts / lato'

And create these constants:

const [oswaldLoaded] = useOswald ({
  Oswald_400 Regular,
})

const [latoLoaded] = useLato ({
  Lato_400Regular,
})

if (! oswaldLoaded ||! latoLoaded) {
  return null;
}

I have a file in which with my personal styles in which I call the fonts, colors, font sizes, etc:

export const fonts = {
  body: "Oswald_400Regular",
  heading: "Lobster-Regular",
  monospace: "Oswald_400Regular",
}

All this has not worked.

ExceptionsManager.js: 180 Unrecognized font family 'Lobster-Regular'

Finally, override all the above code, and I have manually downloaded and added the Lobster-Regular fonts, in the assets folder at the root of the project. It is also added in:

projectApp / assets
android / app / src / main / assets / fonts
In iOS it is also in projectApp / Resources

I have created a file called react-native.config.js where I added the following and ran react-native link: ( How to add custom fonts to react-native v0.61.x?)

module.exports = {
  project: {
    ios: {},
    Android: {},
  },
  assets: ['./assets/fonts'],
};

However, when I call sources from a file this only works on Android

font-family: $ {(props) => props.theme.fonts.heading}

ExceptionsManager.js: 180 Unrecognized font family 'Lobster-Regular'

What should I do for the fonts that I want to work on iOS?

CodePudding user response：

if React Native Version ≥ 0.60

Create File react-native.config.js and add the following code

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ["./assets/fonts/"], // stays the same
};

if React Native Version < 0.60

You need to tell react native where our custom fonts are located. Adding the following lines in your package.json

"rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }

Path can vary. if you have “src” folder and you want to put assets in “src” folder then path will be “.src/assets/fonts/”

Run in terminal

$ npx react-native link

For details implementation, read the article