I am returning render but problem persists

Question

Hi I am relatively new to React Native. Anyways my problem is that I am trying to change the font of my text, and want to ensure that when the fonts have loaded, only then do I want the Loading screen to end.

However, I am getting this error :

Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

This error is located at: in App (created by ExpoRoot) in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in DevAppContainer (at AppContainer.js:121) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)

This is my App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { render } from 'react-dom';
import { Button, StyleSheet, Text, View } from 'react-native';
import AppNavigator from './src/navigation/Navigator';
import * as Font from 'expo-font';
import {AppLoading} from 'expo-app-loading';

export default class App extends React.Component {
  state = {
    isFontLoaded : false
  }

  async componentDidMount(){
    await Font.loadAsync({
      "SemiBold" : require('./src/fonts/Montserrat-Regular.ttf'),
      "Medium" : require('./src/fonts/Montserrat-Medium.ttf'),
      "Regular" : require('./src/fonts/Montserrat-Regular.ttf')
    });
    this.setState({isFontLoaded:true})
  }

 render(){

   return (
     (this.state.isFontLoaded === true) ? (<AppNavigator/>):(AppLoading)
   // AppLoading
   );
 }

}

If there anything else you require please let me know.

Thanks in advance.

Is AppLoading a JSX element? If so, it should be wrapped with <AppLoading /> — choz
@choz I have tried this already at which I get the following error: — mohsan123
@choz Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of App. — mohsan123
Then check your expo-app-loading file, or at least post it here. — choz
expo-app-loading is a library, and what should I exactly look for? — mohsan123

Nooruddin Lakhani Nooruddin Lakhani · Accepted Answer · 2020-12-21T04:58:31

Import by the following way like

import AppLoading from 'expo-app-loading'; // this way

render(){

  if(!this.state.isFontLoaded){
    return <AppLoading />
  }

  return <AppNavigator />
}

I am returning render but problem persists

1 Answers