Source Problem in React Native

Question

Source Problem in React Native

Asked 4 years ago

Viewed 909 times

-1

I’m having a load problem with React On, I’ve installed both fonts for my project and it was working fine until I stopped working for a while because of another error. When I returned to try to resolve it these two messages appeared. I tried to resolve them by downloading again with the command npm install and it hasn’t. Could someone/could help me? Follow the mistakes:

fontFamily "Ubuntu_700Bold" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

Stack trace:
  node_modules\react-native\Libraries\YellowBox\YellowBox.js:63:8 in console.error
  node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error
  node_modules\expo\node_modules\expo-font\build\Font.js:29:16 in processFontFamily
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3683:38 in diffProperties
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3694:8 in diffProperties
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4109:29 in createInstance
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15835:12 in completeWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
  [native code]:null in renderRoot
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
  [native code]:null in runRootCallback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
  node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11484:17 in dispatchAction
  [native code]:null in dispatchAction
  node_modules\@expo-google-fonts\ubuntu\useFonts.js:20:4 in useEffect$argument_0
  node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
  node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates
  [native code]:null in callImmediates
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0
  [native code]:null in flushedQueue
  [native code]:null in invokeCallbackAndReturnFlushedQueue






fontFamily "Roboto_400Regular" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

Stack trace:
  node_modules\react-native\Libraries\YellowBox\YellowBox.js:63:8 in console.error
  node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error
  node_modules\expo\node_modules\expo-font\build\Font.js:29:16 in processFontFamily
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3683:38 in diffProperties
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3694:8 in diffProperties
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4109:29 in createInstance
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15835:12 in completeWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
  [native code]:null in renderRoot
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
  [native code]:null in runRootCallback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
  node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11484:17 in dispatchAction
  [native code]:null in dispatchAction
  node_modules\@expo-google-fonts\ubuntu\useFonts.js:20:4 in useEffect$argument_0
  node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
  node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates
  [native code]:null in callImmediates
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0
  [native code]:null in flushedQueue
  [native code]:null in invokeCallbackAndReturnFlushedQueue
  ...
ERROR
17:13
fontFamily "Roboto_500Medium" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

Stack trace:
  node_modules\react-native\Libraries\YellowBox\YellowBox.js:63:8 in console.error
  node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error
  node_modules\expo\node_modules\expo-font\build\Font.js:29:16 in processFontFamily
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3683:38 in diffProperties
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3694:8 in diffProperties
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4109:29 in createInstance
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15835:12 in completeWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
  [native code]:null in renderRoot
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
  [native code]:null in runRootCallback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
  node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11484:17 in dispatchAction
  [native code]:null in dispatchAction
  node_modules\@expo-google-fonts\ubuntu\useFonts.js:20:4 in useEffect$argument_0
  node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
  node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates
  [native code]:null in callImmediates
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0
  [native code]:null in flushedQueue
  [native code]:null in invokeCallbackAndReturnFlushedQueue
  ...

ERROR
17:13
fontFamily "feather" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

Stack trace:
  node_modules\react-native\Libraries\YellowBox\YellowBox.js:63:8 in console.error
  node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error
  node_modules\expo\node_modules\expo-font\build\Font.js:29:16 in processFontFamily
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3683:38 in diffProperties
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3557:6 in addNestedProperty
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3694:8 in diffProperties
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4109:29 in createInstance
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15835:12 in completeWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
  [native code]:null in renderRoot
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
  [native code]:null in runRootCallback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
  node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7799:17 in classComponentUpdater.enqueueSetState
  node_modules\react\cjs\react.development.js:325:31 in Component.prototype.setState
  node_modules\@expo\vector-icons\build\createIconSet.js:23:51 in Icon#componentDidMount
  node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch
  node_modules\regenerator-runtime\runtime.js:274:30 in invoke
  node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch
  node_modules\regenerator-runtime\runtime.js:135:28 in invoke
  node_modules\regenerator-runtime\runtime.js:145:19 in PromiseImpl.resolve.then$argument_0
  node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
  node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates
  [native code]:null in callImmediates
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0
  [native code]:null in flushedQueue
  [native code]:null in invokeCallbackAndReturnFlushedQueue

follows the code of the App:

import React from 'react';
import { AppLoading } from 'expo';
import { StatusBar } from 'react-native';

import { Roboto_400Regular, Roboto_500Medium } from '@expo-google-fonts/roboto';
import { Ubuntu_700Bold, useFonts } from '@expo-google-fonts/ubuntu';

import Routes from './routes';

export default function App () {
  const [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_500Medium,
    Ubuntu_700Bold
  });

  if(!fontsLoaded) {
    return <AppLoading />
  }
  return (
    <>
      <StatusBar barStyle = "dark-content" backgroundColor = "transparent" translucent/>
      <Routes />
    </>
  )
}

follows the code of the first view index Home:

import React from 'react';
import { Feather as Icon } from '@expo/vector-icons'
import { View, StyleSheet, Image, Text, ImageBackground, AsyncStorage } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
import { useNavigation } from '@react-navigation/native'
import Select from './Select';

interface Dados {
  uf: string,
  city: string
}
const Home = () => {
  const navigation = useNavigation();
  function handleNavigationToPoints() {
    const uf = String(AsyncStorage.getItem('uf'));
    const city = String(AsyncStorage.getItem('city'));
    const dados: Dados = {uf, city}

    navigation.navigate('Points', dados);
  }
  return (
    <ImageBackground source={require('../../assets/home-background.png')}
      style={styles.container}
      imageStyle={{ width: 274, height: 368 }}>
      <View style={styles.main}>
        <Image source={require('../../assets/logo.png')} />
        <Text style={styles.title}>
          Seu marketplace de coleta de resíduos
        </Text>
        <Text style={styles.description}>
          Ajudamos pessoas a encontrarem pontos de coleta
          de forma eficiente.
        </Text>
      </View>
      <View style={styles.footer}>
        <Select />
        <RectButton style={styles.button}
          onPress={handleNavigationToPoints}>
          <View style={styles.buttonIcon}>
            <Text>
              <Icon name="arrow-right"
                color="#FFF" size={24} />
            </Text>
          </View>
          <Text style={styles.buttonText}>Entrar</Text>
        </RectButton>
      </View>
    </ImageBackground>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 32,
  },

  main: {
    flex: 1,
    justifyContent: 'center',
  },

  title: {
    color: '#322153',
    fontSize: 32,
    fontFamily: 'Ubuntu_700Bold',
    maxWidth: 260,
    marginTop: 64,
  },

  description: {
    color: '#6C6C80',
    fontSize: 16,
    marginTop: 16,
    fontFamily: 'Roboto_400Regular',
    maxWidth: 260,
    lineHeight: 24,
  },

  footer: {},

  input: {
    height: 60,
    backgroundColor: '#FFF',
    borderRadius: 10,
    marginBottom: 8,
    paddingHorizontal: 24,
    fontSize: 16,
  },

  button: {
    backgroundColor: '#34CB79',
    height: 60,
    flexDirection: 'row',
    borderRadius: 10,
    overflow: 'hidden',
    alignItems: 'center',
    marginTop: 24,
  },

  buttonIcon: {
    height: 60,
    width: 60,
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
    justifyContent: 'center',
    alignItems: 'center'
  },

  buttonText: {
    flex: 1,
    justifyContent: 'center',
    textAlign: 'center',
    color: '#FFF',
    fontFamily: 'Roboto_500Medium',
    fontSize: 16,
  }
});
export default Home;

Follow the code of package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo-google-fonts/roboto": "^0.1.0",
    "@expo-google-fonts/ubuntu": "^0.1.0",
    "@react-native-community/masked-view": "0.1.6",
    "@react-navigation/native": "^5.5.1",
    "@react-navigation/stack": "^5.5.1",
    "axios": "^0.19.2",
    "expo": "~37.0.3",
    "expo-constants": "~9.0.0",
    "expo-font": "~8.1.0",
    "expo-location": "~8.1.0",
    "expo-mail-composer": "~8.1.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-emoji": "^1.8.0",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-maps": "0.26.1",
    "react-native-picker-select": "^7.0.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-svg": "11.0.1",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "@types/react": "~16.9.23",
    "@types/react-native": "~0.61.17",
    "babel-preset-expo": "~8.1.0",
    "typescript": "~3.8.3"
  },
  "private": true
}

How is package.json?

– Rafael Tavares

2020/07/01 at 02:06
I just added in the post ;)

– Rafael Franco

2020/07/02 at 16:25

2 answers

0

Try the commands:

rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c

I ran the specified commands to clear the cache, but to no avail.

In sequence:

Change the expo version in the package.json file to 36.0.1 and execute the npm install.
Change the expo version again to the previous one, 37.0.3 and perform npm install.

This last step solved.

Source: https://github.com/expo/expo/issues/6489

Thanks for helping me. D

– Rafael Franco

2020/07/30 at 01:35

Browser other questions tagged react react-native error-page

You are not signed in. Login or sign up in order to post.

by Maiquel • 9 points · Answer 1 · 2020-09-15T17:28:01+00:00

All I had to do was execute the command:

rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c