React Native Reanimated not initializing

Question

I've tried installing NativeWind V4 for expo router (SDK 50), following instructions in the documentation. But once I started the app I've received the following errors:

Error: [Reanimated] Native part of Reanimated doesn't seem to be initialized. 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., js engine: hermes

I have tried rebuilding, starting with a cleared cache, the issue persists. I've looked for solutions, but only found out-of-date resources, which have not helped in solving the issue. I have configured my babel config as follows:

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

My metro config:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./global.css" });

My current package list:

{
  "name": "project",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/native": "^6.0.2",
    "cva": "npm:class-variance-authority@^0.7.0",
    "expo": "~50.0.8",
    "expo-dev-client": "~3.3.9",
    "expo-font": "~11.10.3",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.7",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-web-browser": "~12.8.2",
    "nativewind": "4.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.4",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-web": "~0.19.6",
    "tailwind-merge": "^2.2.1",
    "react-native-reanimated": "~3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "jest": "^29.2.1",
    "jest-expo": "~50.0.2",
    "react-test-renderer": "18.2.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.1.3"
  },
  "private": true
}

Project itself is still very basic:

import FontAwesome from "@expo/vector-icons/FontAwesome";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";
import "../global.css";

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from "expo-router";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
    ...FontAwesome.font,
  });

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return <RootLayoutNav />;
}

function RootLayoutNav() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ headerShown: false }} />
    </Stack>
  );
}

import welcomeImage from "@/assets/images/BookBoo.webp";
import React from "react";
import { Image, Text, View } from "react-native";

const welcome_image = Image.resolveAssetSource(welcomeImage).uri;

const Page = () => {
  return (
    <View className="flex justify-center items-center py-20">
      <Image
        source={{ uri: welcome_image }}
        style={{ width: 300, height: 300 }}
        className=""
      />
      <Text className="font-bold text-3xl">Project Name</Text>
      <Text className="text-xl text-slate-500">My description</Text>
    </View>
  );
};

export default Page;

Answer 1

Per docs you need to add "nativewind/babel" to your plugins. Not to the preset.

Docs: https://www.nativewind.dev/quick-starts/expo

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