[Expo] Bare new project - getting main has not been registered and TypeError: modalComponent is not an Object. (evaluating ''modal' in modalComponent')

[VT-nkumar]

Created a bare expo project and try to implement the way documentation. I am getting error.

App.js

---

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { ModalProvider, createModalStack } from 'react-native-modalfy';
import { ErrorModal } from './src/components/Modals';
const modalConfig = { ErrorModal }
const defaultOptions = { backdropOpacity: 0.6 }

const stack = createModalStack(modalConfig, defaultOptions);

export default function App() {
  return (
    <ModalProvider stack={stack}>
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    </ModalProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Modal.js

---

import React from 'react'
import { Button, Text, View } from 'react-native'

const ErrorModal = ({ modal: { closeModal, params } }) => (
    <View>
        <Text>An error occured!</Text>
        <Text>{params.message}</Text>
        <Button onPress={closeModal} title="OK" />
    </View>
)

export default ErrorModal

---

Error in Console

TypeError: modalComponent is not an Object. (evaluating ''modal' in modalComponent')
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:203:6 in guardedLoadModule
at http://10.10.10.246:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:128582:3 in global code

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError

[VT-nkumar]

If instead of const modalConfig = { ErrorModal }, if I do const modalConfig = { } then there is no error. Is there anything missing in documentation or is there anything I missed it

[VT-nkumar]

Package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "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": {
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-modalfy": "^3.3.1",
    "react-native-web": "0.17.7",
    "react-navigation": "^4.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

[CharlesMangwa]

Hi @VT-nkumar! By the looks of it, the way you export/import the ErrorModal component seems to be the issue. I've updated the documentation to be clearer as well. Does it work after updating the import as such:

import ErrorModal from './components/modals/ErrorModal'

[VT-nkumar]

Hi @VT-nkumar! By the looks of it, the way you export/import the ErrorModal component seems to be the issue. I've updated the documentation to be clearer as well. Does it work after updating the import as such:

import ErrorModal from './components/modals/ErrorModal'

Yes, now it is working without any error. Thanks for help and updating documentation