title: Native base Root not works and Element type is invalid error
body: <p>I have tried to upgrade a React Native App, in which the Root component from Native base was not supported and throws the error as
  <strong>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.</strong></p>
  <p><strong>Check the render method of <code>App</code></strong></p>
  <p><code>App.js</code></p>
  <pre><code>import &quot;react-native-gesture-handler&quot;;
  import React from 'react';
  import {StatusBar, Platform} from 'react-native';
  import {Root} from 'native-base';
  
  import {Provider} from 'react-redux';
  import {PersistGate} from 'redux-persist/integration/react';
  
  import Routes from './src/routes';
  
  import {store, persistor} from './src/store';
  
  
  export default class App extends React.Component {
    constructor(props) {
      super(props);
    }
    componentDidMount() {
      console.log('App Called');
    }
  
    render() {
      return (
        &lt;&gt;
          &lt;Root&gt;
            {Platform.OS === 'ios' &amp;&amp; &lt;StatusBar barStyle=&quot;dark-content&quot; /&gt;}
            &lt;Provider store={store}&gt;
              &lt;PersistGate persistor={persistor}&gt;
                &lt;Routes /&gt;
              &lt;/PersistGate&gt;
            &lt;/Provider&gt;
          &lt;/Root&gt;
        &lt;/&gt;
      );
    }
  }
  </code></pre>
  <p>the <code>store/index.js</code> file</p>
  <pre><code>import AsyncStorage from '@react-native-community/async-storage';
  import {createStore, applyMiddleware, compose} from 'redux';
  import {persistStore, persistReducer} from 'redux-persist';
  import thunk from 'redux-thunk';
  
  import rootReducer from './reducers';
  
  const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
  };
  
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  
  export const store = createStore(
    persistedReducer,
    composeEnhancers(applyMiddleware(thunk)),
  );
  
  export const persistor = persistStore(store);
  </code></pre>
  <p>and <code>Package.json</code></p>
  <pre><code>{
    &quot;name&quot;: &quot;test&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;android&quot;: &quot;react-native run-android&quot;,
      &quot;ios&quot;: &quot;react-native run-ios&quot;,
      &quot;start&quot;: &quot;react-native start&quot;,
      &quot;test&quot;: &quot;jest&quot;,
      &quot;lint&quot;: &quot;eslint .&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@react-native-community/async-storage&quot;: &quot;^1.12.1&quot;,
      &quot;@react-native-community/datetimepicker&quot;: &quot;^5.0.1&quot;,
      &quot;@react-native-community/masked-view&quot;: &quot;^0.1.11&quot;,
      &quot;@react-native-community/netinfo&quot;: &quot;^7.1.6&quot;,
      &quot;axios&quot;: &quot;^0.24.0&quot;,
      &quot;lodash&quot;: &quot;^4.17.21&quot;,
      &quot;moment&quot;: &quot;^2.29.1&quot;,
      &quot;native-base&quot;: &quot;^3.2.2&quot;,
      &quot;obj2fd&quot;: &quot;^1.0.6&quot;,
      &quot;prop-types&quot;: &quot;^15.7.2&quot;,
      &quot;react&quot;: &quot;17.0.2&quot;,
      &quot;react-native&quot;: &quot;0.66.4&quot;,
      &quot;react-native-document-picker&quot;: &quot;^7.1.2&quot;,
      &quot;react-native-dropdown-picker&quot;: &quot;^5.2.3&quot;,
      &quot;react-native-elements&quot;: &quot;^3.4.2&quot;,
      &quot;react-native-fix-image&quot;: &quot;^2.1.0&quot;,
      &quot;react-native-fs&quot;: &quot;^2.18.0&quot;,
      &quot;react-native-gesture-handler&quot;: &quot;^2.1.0&quot;,
      &quot;react-native-image-picker&quot;: &quot;^4.6.0&quot;,
      &quot;react-native-image-resizer&quot;: &quot;^1.4.5&quot;,
      &quot;react-native-image-zoom-viewer&quot;: &quot;^3.0.1&quot;,
      &quot;react-native-keyboard-aware-scrollview&quot;: &quot;^2.1.0&quot;,
      &quot;react-native-modal&quot;: &quot;^13.0.0&quot;,
      &quot;react-native-modal-datetime-picker&quot;: &quot;^13.0.0&quot;,
      &quot;react-native-reanimated&quot;: &quot;2.2.4&quot;,
      &quot;react-native-restart&quot;: &quot;^0.0.22&quot;,
      &quot;react-native-safe-area-context&quot;: &quot;^3.3.2&quot;,
      &quot;react-native-screens&quot;: &quot;^3.10.1&quot;,
      &quot;react-native-svg&quot;: &quot;^12.1.1&quot;,
      &quot;react-native-vector-icons&quot;: &quot;^9.0.0&quot;,
      &quot;react-native-view-shot&quot;: &quot;^3.1.2&quot;,
      &quot;react-navigation&quot;: &quot;^4.4.4&quot;,
      &quot;react-navigation-stack&quot;: &quot;^2.10.4&quot;,
      &quot;react-navigation-tabs&quot;: &quot;^2.11.1&quot;,
      &quot;react-redux&quot;: &quot;^7.2.6&quot;,
      &quot;redux&quot;: &quot;^4.1.2&quot;,
      &quot;redux-devtools-extension&quot;: &quot;^2.13.9&quot;,
      &quot;redux-persist&quot;: &quot;^6.0.0&quot;,
      &quot;redux-promise&quot;: &quot;^0.6.0&quot;,
      &quot;redux-thunk&quot;: &quot;^2.4.1&quot;,
      &quot;rn-fetch-blob&quot;: &quot;^0.12.0&quot;,
      &quot;simple-react-validator&quot;: &quot;^1.6.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.9&quot;,
      &quot;@babel/runtime&quot;: &quot;^7.12.5&quot;,
      &quot;@react-native-community/eslint-config&quot;: &quot;^2.0.0&quot;,
      &quot;babel-jest&quot;: &quot;^26.6.3&quot;,
      &quot;eslint&quot;: &quot;7.14.0&quot;,
      &quot;jest&quot;: &quot;^26.6.3&quot;,
      &quot;metro-react-native-babel-preset&quot;: &quot;^0.66.2&quot;,
      &quot;react-devtools&quot;: &quot;^4.21.0&quot;,
      &quot;react-test-renderer&quot;: &quot;17.0.2&quot;
    },
    &quot;jest&quot;: {
      &quot;preset&quot;: &quot;react-native&quot;
    }
  }
  </code></pre>
  <p>and the file <code>routes.js</code></p>
  <pre><code>import {createAppContainer} from 'react-navigation';
  import {createStackNavigator} from 'react-navigation-stack';
  
  import * as screens from '../screens';
  import AppNavigation from '../screens/app/stack';
  
  
  const InitNavigator = createStackNavigator(
    {
      Splash: {
        screen: screens.Splash,
        navigationOptions: {
          headerShown: false,
        },
      },
      SignIn: {
        screen: screens.SignIn,
        navigationOptions: {
          headerShown: false,
        },
      },
      ForgotPassword: {
        screen: screens.ForgotPassword,
        navigationOptions: {
          headerShown: false,
        },
      },
      OTPVerification: {
        screen: screens.OTPVerification,
        navigationOptions: {
          headerShown: false,
        },
      },
      AppNavigation: {
        screen: AppNavigation,
        navigationOptions: {
          headerShown: false,
        },
      },
    },
    {
      navigationOptions: {
        headerShown: false,
      },
      initialRouteName: 'Splash',
    },
  );
  
  export default createAppContainer(InitNavigator);
  </code></pre>
  <p>When i just removed the Root in App.js, the Splash Screen only loaded. remaining screens are not loaded and throws the same <strong>Element type</strong> error.</p>
  <p><code>screens/index.js</code></p>
  <pre><code>export {default as Splash} from '../screens/splash';
  export * from '../screens/auth';
  export * from '../screens/app';
  </code></pre>
  <p>next <code>auth/index.js</code></p>
  <pre><code>export {default as SignIn} from './signIn';
  export {default as ForgotPassword} from './forgotPassword';
  export {default as OTPVerification} from './otpVerification';
  </code></pre>
  <p>the <code>SignIn</code> page</p>
  <pre><code>import React, {useState} from 'react';
  import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
  } from 'react-native';
  import PropsType from 'prop-types';
  import {connect} from 'react-redux';
  import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scrollview';
  import SimpleReactValidator from 'simple-react-validator';
  
  import {Img} from '../../../common';
  import Loader from '../../../common/Loader/Loader';
  import styles from '../../../globalStyle';
  import AxiosInstance from '../../../helper/axios.interceptor';
  import * as theme from '../../../theme';
  import * as globalHelper from '../../../helper/globalHelper';
  
  import {setAuth} from '../../../store/auth/auth.action';
  import LoginForm from './components/LoginForm';
  
  const {height} = Dimensions.get('screen');
  
  const propsType = {
    authAction: PropsType.func,
  };
  
  let request = {type: 'mobile'};
  const validator = new SimpleReactValidator();
  
  const SignIn = ({navigation, authAction}) =&gt; {
    const [errors, setErrors] = useState({});
  
    const [state, setState] = useState({loader: false}),
      updateState = (key, value) =&gt; {
        setState((preState) =&gt; ({
          ...preState,
          [key]: value,
        }));
      },
      openLoader = (val) =&gt; {
        updateState('loader', val);
      };
    const submit = async () =&gt; {
      try {
        openLoader(true);
        let body = {
          type: 'mobile',
          userName: request.userName,
          password: request.password,
        };
        console.log(&quot;body&quot;,body)
        const response = await AxiosInstance.post('auth/login', body);
        console.log('loginresponse...', response);
        if (response.status) {
          await globalHelper.setAsyncStore('user', response);
          await globalHelper.setAsyncStore('userpermission', response.data.permissionJson);
          authAction(response);
          navigation.replace('AppNavigation');
        }
        openLoader(false);
      } catch (err) {
        openLoader(false);
        console.log(&quot;login error&quot;,err);
      }
    };
    //
    const ForgotPassword = () =&gt; (
      &lt;TouchableOpacity
        onPress={() =&gt; {
          validator.hideMessages();
          setErrors('');
          navigation.push('ForgotPassword');
        }}&gt;
        &lt;Text style={[localStyle.forgotText]}&gt;Forgot Password?&lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    );
  
    return (
      &lt;&gt;
        &lt;KeyboardAwareScrollView&gt;
          &lt;View style={[styles.flexCenter, {height}]}&gt;
            &lt;Img
              src={require('../../../assets/logo/logoNew.png')}
              style={{width: 237,height:250,marginBottom:-20}}
              resizeMode=&quot;contain&quot;
            /&gt;
            &lt;View style={localStyle.authButton}&gt;
              &lt;LoginForm
                validator={validator}
                onTextChanging={(data) =&gt; {
                  request = {...request, ...data};
                }}
                onSubmit={() =&gt; {
                  submit();
                }}
                errors={errors}
                setErrors={setErrors}
              /&gt;
            &lt;/View&gt;
            &lt;View style={[styles.flexCenter]}&gt;
              &lt;ForgotPassword /&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/KeyboardAwareScrollView&gt;
        {state.loader &amp;&amp; &lt;Loader /&gt;}
      &lt;/&gt;
    );
  };
  const {color} = theme;
  
  const localStyle = StyleSheet.create({
    authButton: {
      width: '80%',
      borderRadius: 5,
    },
    forgotText: {
      marginTop: 20,
      color: color.hashTextColor,
    },
  });
  
  SignIn.propsType = propsType;
  
  const mapDispatchToProps = {
    authAction: setAuth,
  };
  
  export default connect(null, mapDispatchToProps)(SignIn);
  </code></pre>
  <p>and finally <code>Splash</code> page</p>
  <pre><code>import React, {useEffect} from 'react';
  import {View, PermissionsAndroid} from 'react-native';
  import {Toast} from 'native-base';
  import {connect} from 'react-redux';
  import PropsType from 'prop-types';
  import NetInfo from '@react-native-community/netinfo';
  import RNRestart from 'react-native-restart';
  
  import {Img} from '../../common';
  
  import * as globalHelper from '../../helper/globalHelper';
  import styles from '../../globalStyle';
  
  import {setAuth} from '../../store/auth/auth.action';
  
  const propsType = {
    authAction: PropsType.func,
  };
  const defaultProps = {
    authAction: () =&gt; {},
  };
  const Splash = ({navigation, authAction}) =&gt; {
    const getNetworkIssues = () =&gt; {
      NetInfo.addEventListener(async nState =&gt; {
        if (!nState.isConnected) {
          await Toast.show({
            text: 'Please connect Network',
            // duration: 100000,
            buttonText: 'Reload',
            onClose: reason =&gt; {
              if (reason === 'user' &amp;&amp; nState.isConnected) {
                RNRestart.Restart();
              }
            },
          });
        }
      });
    };
  
    const goInit = async () =&gt; {
      try {
        getNetworkIssues();
        await PermissionsAndroid.requestMultiple([
          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
        ]);
        const user = await globalHelper.getAsyncStore('user');
        if (user) {
          authAction(JSON.parse(user));
          navigation.replace('AppNavigation');
        } else {
          setTimeout(() =&gt; {
            navigation.navigate('SignIn');
          }, 1500);
        }
      } catch (err) {
        console.log(err);
      }
    };
  
    useEffect(() =&gt; {
      goInit();
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
  
    return (
      &lt;View style={[styles.flexCenter, {height: '100%'}]}&gt;
        &lt;Img
          src={require('../../assets/logo/logoNew.png')}
          style={{wdith: 237, height: 250}}
        /&gt;
      &lt;/View&gt;
    );
  };
  
  Splash.propsType = propsType;
  Splash.defaultProps = defaultProps;
  
  const mapDispatchtoProps = {
    authAction: setAuth,
  };
  
  export default connect(null, mapDispatchtoProps)(Splash);
  </code></pre>
  <p>Also i have tried <strong>withNavigation</strong> added with <code>connect</code> from <code>react-navigation</code>. It wasn't worked. and the <code>export default</code> keyword was properly used but still i have faced the error. Unable to find any root cause. Advance thanks those who are helping with this issue.</p>