CustomText componnent for Expo - loads any google font

CustomText.tsx

import * as React from "react";
import RN, { Text, TextProps } from "react-native";
import { Asset } from 'expo-asset';
import { useFonts } from '@use-expo/font';
import * as fonts from "@expo-google-fonts/dev";


enum FontDisplay {
  AUTO = "auto",
  SWAP = "swap",
  BLOCK = "block",
  FALLBACK = "fallback",
  OPTIONAL = "optional"
}

type FontResource = {
  uri: string | number;
  display?: FontDisplay;
};

interface Props extends TextProps {
  fontName?: string | number | Asset | FontResource;
  enabled?: boolean;
}

const defaultProps: Props = {
  fontName: "Roboto",
  enabled: false
}
const fontWeightStyles: { [name: string]: string } = {
  "100": "Thin100",
  "200": "ExtraLight200",
  "300": "Light300",
  "400": "Regular400",
  "500": "Medium500",
  "600": "SemiBold600",
  "700": "Bold700",
  "800": "ExtraBold800",
  "900": "Black900"
};

const CustomText: React.FC<Props> = (props = defaultProps) => {
  const [fontWeightFromStyle] = React.useState((props.style as RN.TextStyle)?.fontWeight ?? "400");
  const selectedFont = `${props.fontName ?? defaultProps.fontName}_${fontWeightStyles[fontWeightFromStyle] ?? fontWeightStyles["400"]}`;
  const [fontsLoaded] = props.enabled
    ? useFonts({
      [fonts[selectedFont]]: fonts[selectedFont] ?? null
    })
    : [props.enabled]

  return (
    <Text style={[props.style, (fontsLoaded && props.enabled) && { fontFamily: `${fonts[selectedFont]}` ?? `${defaultProps.fontName}_${fontWeightStyles["400"]}` }]}>
      {props.children}
    </Text>
  )
}

export default CustomText;

usage

 - Import
  import CustomText from "./CustomText";

 - To Use
  <CustomText>Hello, World!</CustomText>

 - Props
  fontName: string (A font available in expo-google-fonts)
  enabled: boolean (Should the font be applied)
  
 - Notes:
  This component is only recommended for dev use, as it will cause significantly longer render times!
  It is designed to allow you to see what your app will look like with various fonts without having to rewrite significant amount of code.
  It can replace ReactNative.Text component, and component accepts any props that the regular <Text> component from react-native accepts.
  
  If you wish to use it in production, it is recommended to decide which font to use, and swap out the import;
  FROM "@expo-google-fonts/dev" TO "@expo-google-fonts/<font name>"
  This will cause the font to load from the library, instead of the network. You must also install the font with yarn or NPM.
  
  This component attempts to load a font for a specific weight.
  Not all fonts support all weights, and no equivalence-mapping has been added.
  By default, the regular font with weight 400 will attempt to be used as a fallback.

Is there any way to use it on prod?
Loved the component great work 🔥👌

Is there any way to use it on prod?
Loved the component great work 🔥👌

Swap out @expo-google-fonts/dev import for @expo-google-fonts/<font name>. It will work on prod without that, but it's recommended to switch once you have decided which font to use.