title: How to properly import/export components in React Native?
body: <p>I'm trying to export initial component, but all the time I'm getting <code>Invariant Violation</code> error:</p>
  
  <p>Is there any better way to export my HMAPP component and import it inside App.js?</p>
  
  <p>Error image:
  <a href="https://i.stack.imgur.com/jGOEH.png" rel="nofollow noreferrer">Error screen</a></p>
  
  <p>Here is my App.js:</p>
  
  <pre><code>import HMAPP from './app/HMAPP';
  
  export default HMAPP;
  </code></pre>
  
  <p>Here is my HMAPP component: </p>
  
  <pre><code> import { Provider } from 'react-redux';
  import { persistStore } from 'redux-persist';
  import { Navigation } from 'react-native-navigation';
  import Mapbox from '@mapbox/react-native-mapbox-gl';
  
  import { registerScreens } from './screens';
  import store from './store/configureStore';
  import { appInit, getInitialScreen } from './appInit';
  import { handleErrorObject } from './lib/handleError';
  
  Mapbox.setAccessToken('pkaeda324234');
  
  const persistor = persistStore(
      store,
      null,
      () =&gt; {
          registerScreens(store, Provider);
  
          appInit(store)
              .then(() =&gt; {
                  const initialScreen = getInitialScreen(store.getState());
  
                  Navigation.startSingleScreenApp({
                      screen: {
                          screen: initialScreen,
                      },
                      passProps: {
                          persistor,
                      },
                      drawer: {
                          left: {
                              screen: 'DrawerMenuScreen',
                          },
                      },
                      appStyle: {
                          orientation: 'portrait',
                      },
                  });
              })
              .catch((error) =&gt; {
                  handleErrorObject('Error initializing app', error);
              });
      },
  );
  </code></pre>