Cannot use react context value

Question

I am creating context as

import React, {createContext, useState, useEffect} from 'react';

const AuthContext = createContext();

export function AuthContextProvider({children}) {
  const [islogin, setislogin] = useState(false);
  const loguser = () => {

    setislogin(!islogin);
  };

  return (
    <AuthContext.Provider value={{islogin, setislogin, loguser}}>
      {children}
    </AuthContext.Provider>
  );
}
export default AuthContext;

but when I use the context as

import React, {useState, useEffect, useContext} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {DefaultTheme, Provider} from 'react-native-paper';

import Createaccount from './screen/create';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import Add from './screen/Add';
import Payment from './screen/payment';
import Login from './screen/login';
import Feed from './screen/Feed';
import AuthContext, {AuthContextProvider} from './context/AuthContext';

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#3498db',
    accent: '#f1c40f',
  },
};
const AuthStack = createStackNavigator();
const ApplicationTab = createMaterialBottomTabNavigator();

const AuthStackScreen = () => {
  return (
    <AuthStack.Navigator>
      <AuthStack.Screen name="Login" component={Login} />

      <AuthStack.Screen name="Signup" component={Createaccount} />
    </AuthStack.Navigator>
  );
};

const ApplicationScreen = () => {
  return (
    <ApplicationTab.Navigator>
      <ApplicationTab.Screen
        name="AddJob"
        component={Add}
        options={{
          tabBarIcon: 'mail',
        }}
      />
      <ApplicationTab.Screen
        name="Seejobs"
        component={Feed}
        options={{
          tabBarIcon: 'wallet',
        }}
      />
      <ApplicationTab.Screen
        name="Payment"
        component={Payment}
        options={{
          tabBarIcon: 'inbox',
        }}
      />
    </ApplicationTab.Navigator>
  );
};

function App() {
  //const [isloading, setisloading] = useState(true);
  const {islogin, setislogin, loguser} = useContext(AuthContext);
  console.log('value of islogin is');
  // useEffect(() => {
  //   setTimeout(() => {
  //     setisloading(!isloading);
  //   }, 1000);
  // }, []);
  
  return (
    <AuthContextProvider>
      <Provider theme={theme}>
        <NavigationContainer>
          {islogin ? <ApplicationScreen /> : <AuthStackScreen />}
        </NavigationContainer>
      </Provider>
    </AuthContextProvider>
  );
}

const styles = StyleSheet.create({
  bottom: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'black',
  },
});
export default App;

I get the error

TypeError: undefined is not an object (evaluating '_useContext.islogin')

This error is located at: in App in RCTView (at View.js:34) in View (at AppContainer.js:107) in RCTView (at View.js:34) in View (at AppContainer.js:134) in AppContainer (at renderApplication.js:40)

ERROR  TypeError: undefined is not an object (evaluating '_useContext.islogin')

This error is located at:
    in App
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)

Could someone please help me in understanding what's wrong here.

it seems that you have not exported AuthContext & also imported it as default instead of using named-import (like import { AuthContext } from ...) — Sina
– Sina, Commented Jul 6, 2021 at 10:21

Anku Singh · Accepted Answer · 2021-07-06 10:24:42Z

1

Here in your AppContainer.js file you are using both useContext hook and AuthContextProvider

const {islogin, setislogin, loguser} = useContext(AuthContext);

return (
<AuthContextProvider>
  <Provider theme={theme}>
    <NavigationContainer>
      {islogin ? <ApplicationScreen /> : <AuthStackScreen />}
    </NavigationContainer>
  </Provider>
</AuthContextProvider>);

You should use the useContext hook in children component of AppContainer or else move the AuthContextProvider to somewhere in parent component of the AppContainer.js

answered Jul 6, 2021 at 10:24

Anku Singh

9546 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot use react context value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related