En esta clase, exploraremos cómo integrar fuentes personalizadas en tu aplicación utilizando Expo. A continuación, te guiamos paso a paso a través del proceso.
Requisitos Previos
Antes de comenzar, asegúrate de tener configurado tu entorno de desarrollo con Expo. Vamos a utilizar la documentación oficial de Expo para realizar la integración de fuentes en nuestra aplicación.
Paso 1: Consultar la Documentación Oficial de Expo
Lo primero que debemos hacer es acceder a la documentación oficial de Expo. En la barra lateral de búsqueda, escribe «Expo Font» y selecciona la primera opción disponible.
Paso 2: Instalar las Librerías Necesarias
Para poder usar las fuentes personalizadas, necesitamos instalar algunas librerías. Puedes hacerlo ejecutando el siguiente comando en tu terminal:
bashCopiar códigoexpo install expo-font
Expo también ofrece una configuración automática de las fuentes, que incluye la modificación del archivo app.json.
Paso 3: Configurar Expo Splash Screen
Además de la librería de fuentes, necesitaremos instalar Expo Splash Screen para manejar la pantalla de inicio de la aplicación. Ejecuta el siguiente comando:
bashCopiar códigonpx expo install expo-splash-screen
Una vez instalada, puedes copiar el código de ejemplo que Expo proporciona y pegarlo en tu archivo app.js o app.tsx.
Paso 4: Importar y Configurar Dependencias
Una vez que hayas copiado el código de ejemplo, es posible que necesites importar algunas dependencias. Si aparece un mensaje de error indicando que falta alguna dependencia, puedes utilizar Ctrl + Espacio para importar lo que sea necesario.
Recuerda que algunas dependencias deben ser importadas de una forma específica, como se indica en la documentación de Expo.
Paso 5: Utilizar Fuentes Personalizadas
En este punto, ya tenemos configuradas las fuentes predeterminadas en Android (Roboto) y iOS (San Francisco). Si deseas personalizar las fuentes, debes seguir los siguientes pasos:
- Descargar las Fuentes
Dirígete a Google Fonts y busca la fuente que prefieras. En este caso, vamos a utilizar Play Pen. Haz clic en el botón «Descargar» y obtendrás un archivo comprimido con varias versiones de la fuente. - Organizar las Fuentes en la Carpeta Assets
Extrae las fuentes y selecciona las tres que vas a utilizar: Bold, Regular, y Light. Colócalas en una nueva carpeta llamada Fonts dentro de la carpeta Assets de tu proyecto. - Configurar las Fuentes en el Proyecto
Abre el archivo de configuración donde se especifican las fuentes y ajusta los nombres de las fuentes según corresponda. Aquí es donde indicamos la ruta de las fuentes en el proyecto.
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';
let [fontsLoaded] = useFonts({
'PlayPen-Bold': require('./assets/fonts/PlayPen-Bold.ttf'),
'PlayPen-Regular': require('./assets/fonts/PlayPen-Regular.ttf'),
'PlayPen-Light': require('./assets/fonts/PlayPen-Light.ttf'),
});
Paso 6: Aplicar las Fuentes en la Interfaz de Usuario
Una vez que hayas configurado las fuentes, puedes aplicarlas en cualquier parte de la aplicación. Para ello, puedes utilizar la propiedad fontFamily en los componentes de texto.
<Text style={{ fontFamily: 'PlayPen-Bold', fontSize: 24 }}>Texto en negrita</Text>
<Text style={{ fontFamily: 'PlayPen-Regular', fontSize: 24 }}>Texto regular</Text>
<Text style={{ fontFamily: 'PlayPen-Light', fontSize: 24 }}>Texto ligero</Text>
Paso 7: Probar el Proyecto
Con todo configurado, es hora de probar que las fuentes se aplican correctamente. Ejecuta la aplicación en un emulador o en un dispositivo físico para verificar que las fuentes se cargan y se visualizan como esperas.
Paso 8: Respaldar los Cambios
Para finalizar, es recomendable hacer un commit de los cambios realizados en tu repositorio para asegurarte de que todo esté guardado correctamente. Puedes hacerlo ejecutando:
git add .
git commit -m "Se agregan fuentes personalizadas a la aplicación"
Conclusión
¡Y eso es todo! Has aprendido cómo integrar y configurar fuentes personalizadas en tu aplicación Expo. A partir de ahora, podrás utilizar cualquier fuente que desees en tu proyecto. En el próximo tutorial, exploraremos otros aspectos interesantes de Expo y el desarrollo de aplicaciones móviles.