I need to provide Custom Font in React Native app for all Components [closed]

Question

I have RN App and custom font. I want to provide it to all my screens and Components. How can I do it? I used react-navigation.

Answer 1

You could create a file in which you store all fonts and then reuse the font in all of your components.

Here is a minimal example using two different fonts.

fonts.js

export const regular = {
  fontWeight: "500",
  fontFamily: "SomeRegularFontFamily",
}

export const bold = {
  fontWeight: "800",
  fontFamily: "SomeBoldFontFamily",
}

export const text = {
  fontSize: 12,
  lineHeight: 16,
  ...regular,
}

export const header = {
  fontSize: 16,
  lineHeight: 22,
  ...bold,
}

In your components you can use the above defined fonts. For example, you could create a wrapper component around Text.

Text.js

import { Text as ReactText } from "react-native"

const CustomText = (font) => ({children, style, ...props}) => {
    return (
      <ReactText
        {...props}
        style={[
          font,
          style,
        ]}>
        {children}
      </ReactText>
    )
}

export const Regular = CustomText(regular)
export const Bold = CustomText(bold)

export const Text = {
  Regular,
  Bold,
}

Then, you could use it as follows.

const SomeScreen = (props) => {
    return <Text.Regular>Hello World</Text.Regular>
}

You can proceed similarly for other components. Either create a wrapper, or reuse the exported TextStyles.