Why is useContext returning null in a component even though its parent tag is marked as the Provider?

user_2395829 0
Viewed 3873

I have been trying to get the user state to be accessible in my child react component using react-hooks and react-context for the last few hours and I can't figure it out. In several other related questions posted on this site, useContext was returning null/undefined because the component in which it was used wasn't enclosed by a tag that was marked as the Provider.

Here, I've done this, but it's still not working. When I log the value of useContext(AuthContext), it returns null, but when I log the object that's assigned to AuthContext.Provider, it shows the user data. Help would be greatly appreciated.

App.js

import * as React from 'react';
import { Text, Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// import firebase
import firebase from './firebase.js';

console.log(firebase)
const db = firebase.database();

var isSignedIn = true;
var testing = true

import AuthNavigator from './src/navigation/AuthNavigator'

export default function App() {
  return <AuthNavigator />
}

AuthNavigator.js

import firebase from './../../firebase.js';
// import auth from '@react-native-firebase/auth'
import SignInStack from './SignInStack'
import SignOutStack from './SignOutStack'
import TestScreen from './TestScreen'

export const AuthContext = createContext(null)

export default function AuthNavigator() {
    const [initializing, setInitializing] = useState(true)
    const [user, setUser] = useState(null)
  
    // Handle user state changes
    function onAuthStateChanged(result) {
      setUser(result)
      console.log(result);
      if (initializing) setInitializing(false)
    }
  
    useEffect(() => {
      const authSubscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged)
  console.log("getting here...")
      // unsubscribe on unmount
      return authSubscriber
    }, [])
  
    if (initializing) {
      return null
    }
  console.log('Hello World')
  console.log(user)
    return !user ? (
      <AuthContext.Provider value={user}>
        <SignInStack />
      </AuthContext.Provider>
    ) : (
    <AuthContext.Provider value={user}>
      <TestScreen/>
      </AuthContext.Provider>
    )
  }

TestScreen.js

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { useContext } from 'react'
import { AuthContext } from './../navigation/authnavigator.js'

export default function TestScreen() {
    console.log(useContext(AuthContext))
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Likes You</Text>
    </View>
  );
}
react-context react-native react-hooks reactjs
2 Answers
    return !user ? (
      <AuthContext.Provider value={user}>
        <SignInStack />
      </AuthContext.Provider>
    ) : (
    <AuthContext.Provider value={user}>
      <TestScreen/>
      </AuthContext.Provider>
    )
  }

This part seems problematic to me because you are create two separate AuthContext.Providers.

You should do something like

    return
      <AuthContext.Provider value={user}>
        { !user? <SignInStack />:
      <TestScreen/>}
      </AuthContext.Provider>

instead. Or you might want to rework some basic login strategie from you own code.

user_98329470

It appears that you are not calling useContext from the React namespace.

Update your code to this -

React.useContext(AuthContext)

Instead of this -

useContext(AuthContext)

For good measure, please change this as well.

export const AuthContext = React.createContext(null)
user_31580990
Related