title: Context API using useContext in React Native is showing a TypeError
body: <p>I'm attempting to use the modern Context API within React-Native, but I'm getting the following error:</p>
  
  <blockquote>
    <p>TypeError: TypeError: undefined is not an object (evaluating
    'Context._context')</p>
  </blockquote>
  
  <p>my createDataContext.js:</p>
  
  <pre><code>import React, { useReducer } from 'react'
  
  export default (reducer, actions, defaultValue) =&gt; {
      const Context = React.createContext()
  
      const Provider = ({ children }) =&gt; {
          const [state, dispatch] = useReducer(reducer, defaultValue)
  
          const boundActions = {}
          for (let key in actions) {
              boundActions[key] = actions[key](dispatch)
          }
  
          return (
              &lt;Context.Provider value={{ state, ...boundActions }}&gt;
                  {children}
              &lt;/Context.Provider&gt;
          )
      }
  
      return { Context, Provider }
  }
  </code></pre>
  
  <p>My context.js:</p>
  
  <pre><code>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 }) =&gt; {
      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 =&gt; values =&gt; {
      dispatch({ type: LOGIN_FIRST_STEP, payload: values })
  }
  
  const login2 = dispatch =&gt; values =&gt; {
      dispatch({ type: LOGIN_SECOND_STEP, payload: values })
  }
  
  const auth = disaptch =&gt; () =&gt; {
      dipatch({ type: AUTH_MODAL })
  }
  
  const signin = disaptch =&gt; () =&gt; {
      dipatch({ type: SIGNIN_MODAL })
  }
  
  const signup = disaptch =&gt; () =&gt; {
      dipatch({ type: SIGNUP_MODAL })
  }
  
  export const { Provider, Context } = createDataContext(
      reducer,
      { login, login2, auth, signin, signup },
      { authOpen: false , signinOpen: false, signupOpen: false }
  )
  </code></pre>
  
  <p>package.json:</p>
  
  <pre><code>{
    "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
  }
  </code></pre>
  
  <p>And finally app.js:</p>
  
  <pre><code>export default App = () =&gt; {
    return (
        &lt;ApolloProvider client={client}&gt;
            &lt;ApolloHooksProvider client={client}&gt;
              &lt;ContextProvider&gt;
                &lt;Root /&gt;
              &lt;/ContextProvider&gt;
            &lt;/ApolloHooksProvider&gt; 
        &lt;/ApolloProvider&gt;
    )
  }
  </code></pre>
  
  <p>When I attempt to use by importing <code>Context</code> and using the <code>useContext</code> hook:</p>
  
  <pre><code>const {
      state,
      authModal
  } = useContext(Context)
  </code></pre>
  
  <p>the aforementioned error shows.  I've tried removing the <code>react-native</code> 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. </p>