Invariant Violation: "main" has not been registred on first project with expo

Question

I'm trying to start learning React Native, Expo and using Tailwind, but I'm facing problems and I can't find solutions, one of which is the error:

Invariant Violation: "main" has not been registered. This can happen if

but I registered my component

app.tsx

import "@/styles/global.css"

import { StatusBar } from 'expo-status-bar';
import { HelloWorld } from '@/app/chama';

export default function App() {
  return (
    <>
      <HelloWorld/>
      <StatusBar style="auto" />
    </>
  );
}

my src/app/chama.tsx

import { Text, View } from "react-native"
import { registerRootComponent } from "expo";

export function HelloWorld() {
    return <View style={{ flex:1, justifyContent: "center", alignItems:"center"}}>
        <Text></Text>
    </View>
}

registerRootComponent(HelloWorld);

my tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

my package.json:

{
  "name": "hello-world",
  "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"
  },
  "dependencies": {
    "expo": "~50.0.13",
    "expo-status-bar": "~1.11.1",
    "nativewind": "4.0.1",
    "react": "18.2.0",
    "react-native": "0.73.5",
    "react-native-reanimated": "^3.8.1",
    "tailwindcss": "^3.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "typescript": "^5.1.3"
  },
  "private": true
}

babel

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

I have no idea how to solve this, could anyone help me?

Answer 1

Here are the things I see from your code:

1. remove registerRootComponent(HelloWorld); from chama.tsx file.

2. create a index.js at the root directory in your project.

3. Add this in index.js:

   import { registerRootComponent } from "expo";

   import Root from "./App";

   registerRootComponent(Root);

4. Update your package.json:

   { "name": "hello-world", "version": "1.0.0", "main": "index.js", ...