Usar fuente de Google en React Native

Esta publicación demostrará cómo usa la biblioteca expo-google-fonts para importar fuentes únicas a la aplicación nativa React.

Usar fuente de Google en React Native

Nuestro programa necesita que se le agregue algo de repetitivo como paso inicial. En su programa, agregue el siguiente código:

import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "white",
  },
});

El código anterior usa la fuente predeterminada y se parece a esto:

Ha llegado el momento de añadir Expo-Google-Fonts y Expo-Font a nuestro proyecto ahora que hemos configurado nuestro modelo estándar.

El primer paso es instalar las librerías usando la expo. Puede obtener expo-google-font desde aquí.

Puedes instalar expo-google-fonts así:

expo install @expo-google-fonts/finger-paint

Agregue las siguientes líneas de importación al encabezado de su aplicación después de eso.

import {FingerPaint_400Regular, useFonts,} from '@expo-google-fonts/finger-paint';

Usaremos la fuente FingerPaint_400Regular en esta aplicación, y useFonts ayudará a cargar nuestra aplicación.

El enlace useFonts se utilizará para cargar nuestra fuente en nuestro programa. La familia de fuentes de nuestro estilo de texto se establecerá en FingerPaint_400Regular.

import {FingerPaint_400Regular, useFonts,} from '@expo-google-fonts/finger-paint';
import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  let [fontsLoaded] = useFonts({
    FingerPaint_400Regular,
  });
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "white",
    fontFamily: "FingerPaint_400Regular",
  },
});

Lo más probable es que la fuente no haya cambiado, o si lo hizo, no cambió al tipo que esperaba. Esto se debe a que nuestra aplicación se carga antes que nuestro tipo de letra.

Para corregir esto, debemos utilizar el componente AppLoading que ofrece React Native para mantener la visibilidad de nuestra pantalla de bienvenida hasta que se cargue nuestra fuente.

El componente AppLoading primero debe agregarse a nuestro proyecto antes de utilizarlo. Para instalar el componente, ingrese el siguiente código en su terminal:

expo install expo-app-loading

Y luego impórtalo en el encabezado de tu aplicación:

import AppLoading from 'expo-app-loading';

Debemos realizar algún renderizado condicional en nuestra aplicación para aprovechar AppLoading.

El componente AppLoading se mostrará antes de que se haya cargado nuestra fuente. Pero después de que las fuentes se hayan cargado correctamente, mostraremos nuestro contenido principal en su lugar.

El código es el siguiente:

import {FingerPaint_400Regular, useFonts,} from '@expo-google-fonts/finger-paint';
import AppLoading from 'expo-app-loading';
import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  let [fontsLoaded] = useFonts({
    FingerPaint_400Regular,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello World!</Text>
        <StatusBar style="auto" />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "white",
    fontFamily: "FingerPaint_400Regular",
  },
});

La siguiente pantalla debería aparecer ahora en su aplicación:

La discusión sobre este tema ha llegado a su fin, pero todavía hay algo que queremos mencionar. Las declaraciones de importación requeridas para cada fuente enumerada aquí se pueden encontrar en el directorio expo-google-fonts si desea utilizar una fuente diferente.

Debe instalar la fuente correcta porque cada una tiene su declaración y biblioteca de importación.