Facing Issue : Warning: React.createElement: type is invalid -- expected a string

Question

I'm using useReducer, Context and Provider in my app but I'm facing this issue please anyone faced this issue so please let me know the solution for it

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined, You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:20., in _default (at withExpoRoot.js:20) in RootErrorBoundary (at withExpoRoot.js:19) in ExpoRootComponent (at renderApplication.js:35) in RCTView (at View.js:45) in View (at AppContainer.js:98) in RCTView (at View.js:45) in View (at AppContainer.js:115) in AppContainer (at renderApplication.js:34) - node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error - node_modules\expo\build\environment\muteWarnings.fx.js:26:24 in error - node_modules\react\cjs\react.development.js:188:36 in warningWithoutStack - node_modules\react\cjs\react.development.js:603:32 in warning - node_modules\react\cjs\react.development.js:1730:14 in createElementWithValidation * App.js:20:5 in _default - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:9473:27 in renderWithHooks - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11994:6 in mountIndeterminateComponent - ... 18 more stack frames from framework internals

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined, You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:20., in _default (at withExpoRoot.js:20) in RootErrorBoundary (at withExpoRoot.js:19) in ExpoRootComponent (at renderApplication.js:35) in RCTView (at View.js:45) in View (at AppContainer.js:98) in RCTView (at View.js:45) in View (at AppContainer.js:115) in AppContainer (at renderApplication.js:34) - node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error - node_modules\expo\build\environment\muteWarnings.fx.js:26:24 in error - node_modules\react\cjs\react.development.js:188:36 in warningWithoutStack - node_modules\react\cjs\react.development.js:603:32 in warning - node_modules\react\cjs\react.development.js:1730:14 in createElementWithValidation * App.js:20:5 in _default - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:9473:27 in renderWithHooks - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11994:6 in mountIndeterminateComponent - ... 21 more stack frames from framework internals

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of _default. - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:5716:10 in createFiberFromTypeAndProps - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:5744:4 in createFiberFromElement - ... 22 more stack frames from framework internals

Warning: %s: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary - node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error - node_modules\expo\build\environment\muteWarnings.fx.js:26:24 in error - ... 28 more stack frames from framework internals

App.js

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IndexScreen from './src/screens/IndexScreen';
import { Provider } from './src/context/BlogContext';

const navigator = createStackNavigator({
  Index: IndexScreen
}, {
  initialRouteName: 'Index',
  defaultNavigationOptions: {
    title: 'Blogs'
  }
});

const App = createAppContainer(navigator);

export default () => {
  return (
    <Provider>
      <App />
    </Provider>
  );
};

BlogContext.js

import React, { useReducer } from 'react';

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

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

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

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

         return(Context, Provider);

    };

Answer 1

You have an issue regarding BlogContext. You are not using it correctly. You export it as default a function while in App.js, you use a named import.

BlogContext should be like this:

import React, { useReducer } from 'react';

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

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

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

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

         //return an object with two keys
         return {Context, Provider};

    };

and App.js should use that accordingly:

import blogContext from './src/context/BlogContext';
/**
 ...code ... 
**/
//here you create your provider by calling the function imported from BlogContext
//with the expected arguments
const { Provider } = blogContext(reducer, actions, initialState)

/**

**/

export default () => {
  return (
    <Provider>
      <App />
    </Provider>
  );
};