Warning: Functions are not valid as a React child. Erro

I am receiving the error: Warning: Functions are not valid as a React child.

I am writing a React Native application with Expo.

App.js

import React from "react";
import { NavigationContainer, DarkTheme } from "@react-navigation/native";
import { Text, View, SafeAreaView, StatusBar } from "react-native";

import firebase from "./config/firebase";

import BottomNav from "./routing/BottomNav";
import HomeStack from "./routing/HomeStack";

import AuthState from "./context/auth/authState";

const App = () => {
  const check = firebase.auth().onAuthStateChanged((usr) => {
    if (usr) return <BottomNav />;
    else return <HomeStack />;
  });
  return (
    <AuthState>
      <NavigationContainer theme={DarkTheme}>
        <StatusBar barStyle="light-content" />
        {check}
      </NavigationContainer>
    </AuthState>
  );
};

export default App;



hey @razzakammar_nano,

looks like this error is coming from this function because you are trying to pass it in like this {check} .

it would be better to do the check then send the output to state then use something like this …


 <NavigationContainer theme={DarkTheme}>
    <StatusBar barStyle="light-content" />
    {usr  ?  <BottomNav /> : <HomeStack /> }
 </NavigationContainer>

1 Like

Thank you very much! It worked!

1 Like