Context API using useContext in React Native is showing a TypeError

Question

I'm attempting to use the modern Context API within React-Native, but I'm getting the following error:

TypeError: TypeError: undefined is not an object (evaluating 'Context._context')

my createDataContext.js:

import React, { useReducer } from 'react'

export default (reducer, actions, defaultValue) => {
    const Context = React.createContext()

    const Provider = ({ children }) => {
        const [state, dispatch] = useReducer(reducer, defaultValue)

        const boundActions = {}
        for (let key in actions) {
            boundActions[key] = actions[key](dispatch)
        }

        return (
            <Context.Provider value={{ state, ...boundActions }}>
                {children}
            </Context.Provider>
        )
    }

    return { Context, Provider }
}

My context.js:

import { AsyncStorage } from 'react-native'
import createDataContext from './createDataContext'

import { 
    LOGIN_FIRST_STEP, 
    LOGIN_SECOND_STEP,
    AUTH_MODAL, 
    SIGNIN_MODAL,
    SIGNUP_MODAL,
} from '../constants'

const INITIAL_STATE = {
    email: '',
    firstName: '',
    lastName: '',
    password: '',
    cardNumber: '',
    expiration: '', 
    CVV: '',
    billingAddress: '',
    authOpen: false,
    signupOpen: false,
    signinOpen: false,
}

const reducer = (state = INITIAL_STATE, { type, payload }) => {
    switch (type) {
        case LOGIN_FIRST_STEP: 
            const { email, firstName, lastName, password } = payload
            return {
                ...state,
                email,
                firstName,
                lastName,
                password,
            }
        case LOGIN_SECOND_STEP: 
            const { cardNumber, expiration, CVV, billingAddress } = payload
            return {
                ...state,
                email,
                cardNumber,
                expiration,
                CVV,
                billingAddress,
            }
        case AUTH_MODAL:
            return {
                ...state,
                authOpen: true,
                signupOpen: false,
                signinOpen: false,
            }
        case SIGNUP_MODAL:
            return {
                ...state,
                authOpen: false,
                signupOpen: true,
                signinOpen: false,
            }
        case SIGNIN_MODAL:
            return {
                ...state,
                authOpen: false,
                signupOpen: false,
                signinOpen: true,
            }
        default:
            return state
    }
}

const login = dispatch => values => {
    dispatch({ type: LOGIN_FIRST_STEP, payload: values })
}

const login2 = dispatch => values => {
    dispatch({ type: LOGIN_SECOND_STEP, payload: values })
}

const auth = disaptch => () => {
    dipatch({ type: AUTH_MODAL })
}

const signin = disaptch => () => {
    dipatch({ type: SIGNIN_MODAL })
}

const signup = disaptch => () => {
    dipatch({ type: SIGNUP_MODAL })
}

export const { Provider, Context } = createDataContext(
    reducer,
    { login, login2, auth, signin, signup },
    { authOpen: false , signinOpen: false, signupOpen: false }
)

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": {
    "@apollo/react-hooks": "^3.1.1",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",
    "apollo-link": "^1.2.13",
    "apollo-link-error": "^1.1.12",
    "apollo-link-http": "^1.5.16",
    "apollo-link-state": "^0.4.2",
    "apollo-link-ws": "^1.0.19",
    "apollo-utilities": "^1.3.2",
    "expo": "^34.0.1",
    "formik": "^1.5.8",
    "graphql": "^14.5.6",
    "graphql-tag": "^2.10.1",
    "react": "16.8.3",
    "react-apollo": "^3.1.1",
    "react-dom": "^16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-maps": "~0.24.0",
    "react-native-reanimated": "~1.1.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^4.0.6",
    "react-navigation-stack": "^1.8.0",
    "react-navigation-tabs": "^2.5.4",
    "subscriptions-transport-ws": "^0.9.16",
    "yup": "^0.27.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^6.0.0"
  },
  "private": true
}

And finally app.js:

export default App = () => {
  return (
      <ApolloProvider client={client}>
          <ApolloHooksProvider client={client}>
            <ContextProvider>
              <Root />
            </ContextProvider>
          </ApolloHooksProvider> 
      </ApolloProvider>
  )
}

When I attempt to use by importing Context and using the useContext hook:

const {
    state,
    authModal
} = useContext(Context)

the aforementioned error shows. I've tried removing the react-native package and re-installing it with the latest version. I've tried deleting the node modules, clearing the cache, and re-installing them, but none seem to solve the issue.

I also have the createDataContext from Stephen Girder's video course, and run into the same issue. but the mistake i made was not wrapping the root App or the parent component with the Provider.... after using the Provider it worked. — Mohamed Iqzas
– Mohamed Iqzas, Commented Oct 13, 2021 at 6:50
@MohamedIqzas I wrap the root app with Provider, still get that error :( — Robin
– Robin, Commented Feb 7, 2022 at 18:56

Tallia · Accepted Answer · 2019-10-09 04:02:27Z

11

I had the same error and it's because I was importing Context like this:

import {Context} from '...'

INSTEAD OF

import Context from '..'

answered Oct 9, 2019 at 4:02

Tallia

1441 silver badge4 bronze badges

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

2 Comments

Rebecca Campbell Over a year ago

Mine was the exact opposite: I was not using curly braces when I should have been. Thanks!

0xD1x0n Over a year ago

didn't fix it for me

Kendra · Accepted Answer · 2021-08-16 23:23:13Z

4

For me, it was as simple as... I forgot to add the Provider to my main (App.js) file.

answered Aug 16, 2021 at 23:23

Kendra

1812 silver badges2 bronze badges

Comments

CodeForest · Accepted Answer · 2022-08-19 04:48:50Z

0

Try this:
Suppose you have a DataContext.js
--
import React, {createContext} from 'react';

export const DataContext = createContext();

export default function DataProvider({children}) {
    return (
        <DataContext.Provider>
            {children}
        </DataContext.Provider>
    );
};

Then, try to import them like this: 
--
import your provider without curly braces And your context within curly braces;
--
import DataProvider  from "./src/context/DataContext";
import {DataContext}  from "./src/context/DataContext";

Or: 
import DataProvider , {DataContext}  from "./src/context/DataContext";

edited Aug 19, 2022 at 4:48

answered Aug 18, 2022 at 19:38

CodeForest

364 bronze badges

Collectives™ on Stack Overflow

Context API using useContext in React Native is showing a TypeError

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related