CODEWITHSUNDEEP
react-nativeexpotailwind-cssnativewind
Ming
Ming

Reputation: 1612

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

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?

Upvotes: 1

Views: 1408

Answers (1)

nativedev
nativedev

Reputation: 220

Here are the modifications I suggest for your code:

  1. Remove registerRootComponent(HelloWorld); from the chama.tsx file.
  2. Create an index.js file in the root directory of your project.
  3. Add the following code to index.js:

Index.js

import { registerRootComponent } from "expo"; 
import Root from "./App";
registerRootComponent(Root);
  1. Update your package.json as follows:

package.json

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

Upvotes: 0

Related Questions