Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

469
Vistas
React Native Expo: las fuentes personalizadas no se cargan junto con las fuentes de Google

Estoy tratando de cargar las fuentes descargadas junto con las fuentes de Google usando Font.loadAsync pero me da un error:

 Unable to resolve module ../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf from /Users/bilal/Work/datumbrain/erp-app/src/utils/useFonts.js: None of these files exist: * SFUIText-Bold.ttf * assets/fonts/sf-ui-text/SFUIText-Bold.ttf/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.svg|.native.svg|.svg)

Aquí está mi código en App.js :

 import { useCallback, useEffect, useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Provider } from 'react-redux'; import colors from './src/constants/colors'; import AppNavigator from './src/navigation/AppNavigator'; import { store } from './src/redux/store'; import * as SplashScreen from 'expo-splash-screen'; import * as Font from 'expo-font'; import { FiraSans_300Light, FiraSans_400Regular, FiraSans_500Medium, } from '@expo-google-fonts/fira-sans'; import { useFonts } from './src/utils/useFonts'; const App = () => { const [appIsReady, setAppIsReady] = useState(false); const prepare = async () => { try { const customFonts = await useFonts(); await SplashScreen.preventAutoHideAsync(); await Font.loadAsync({ 'Fira Sans 300': FiraSans_300Light, 'Fira Sans 400': FiraSans_400Regular, 'Fira Sans 500': FiraSans_500Medium, ...customFonts, }); } catch (e) { console.warn(e); } finally { setAppIsReady(true); console.log('Loaded fonts...'); } }; const onLayoutRootView = useCallback(async () => { if (appIsReady) { await SplashScreen.hideAsync(); } }, [appIsReady]); useEffect(() => { prepare(); }, []); useEffect(() => { onLayoutRootView(); }, [onLayoutRootView]); if (!appIsReady) { return null; } return ( <Provider store={store} style={styles.container}> <AppNavigator /> </Provider> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.light, alignItems: 'center', justifyContent: 'center', }, }); export default App;

y useFonts.js :

 import * as Font from 'expo-font'; export const useFonts = async () => { await Font.loadAsync({ SF: require('../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf'), }); };
about 4 years ago · Santiago Gelvez
2 Respuestas
Responde la pregunta

0

Por favor, asegúrese de que la ruta aquí sea correcta.

 SF: require('../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf')

Para Font.loadAsync , me parece perfecto. Como extra, puede usar useFont hook para que su manejo se vea mejor. (Utiliza Font.loadAsync debajo)

about 4 years ago · Santiago Gelvez Denunciar

0

  1. Verifique la ruta del archivo, este error ocurre cuando la ruta no es válida.
  2. Su función useFonts no devuelve nada, por lo que no necesita propagación en prepare() . Si se llama, las fuentes se cargarán de todos modos.
about 4 years ago · Santiago Gelvez Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda