TypeError: _ReanimatedModule.default.createNode is not a function (it is undefined)

Question

I am unable to resolve this, error

my index.jsx file:

import react from "react";
import { View, Text, Dimensions } from "react-native";
import Coin from "../../../assets/data/crypto.json";
import CoinDetailedHeader from "./comnponents/CoinDetailedHeader";
import { AntDesign } from "@expo/vector-icons";
import {
  ChartDot,
  ChartPath,
  ChartPathProvider,
} from "@rainbow-me/animated-charts";

import styles from "./styles";

const CoinDetailedScreen = () => {
  const {
    image: { small },
    name,
    symbol,
    prices,
    market_data: {
      market_cap_rank,
      current_price,
      price_change_percentage_24h,
    },
  } = Coin;
  const percentageColor =
    price_change_percentage_24h < 0 ? "#ea3943" : "#16c784";
  const screenWidth = Dimensions.get("window").width;
  return (
    <View style={{ paddingHorizontal: 10 }}>
      <ChartPathProvider
        data={{
          points: prices.map((price) => ({ x: price[0], y: price[1] })),
          smoothingStrategy: "bezier",
        }}
      >
        <CoinDetailedHeader
          image={small}
          symbol={symbol}
          market_cap_rank={market_cap_rank}
        />
        <View style={styles.priceContainer}>
          <View>
            <Text style={styles.name}> {name} </Text>
            <Text style={styles.currentPrice}> ${current_price.usd} </Text>
          </View>
          <View
            style={{
              backgroundColor: percentageColor,
              paddingHorizontal: 3,
              paddingVertical: 8,
              borderRadius: 5,
              flexDirection: "row",
            }}
          >
            <AntDesign
              name={price_change_percentage_24h < 0 ? "caretdown" : "caretup"}
              size={12}
              color={"white"}
              style={{ alignSelf: "center", marginRight: 5 }}
            />
            <Text style={styles.priceChange}>
              {price_change_percentage_24h.toFixed(2)}%
            </Text>
          </View>
        </View>
        <ChartPath
          height={screenWidth / 2}
          stroke="yellow"
          width={screenWidth}
        />
        <ChartDot style={{ backgroundColor: "blue" }} />
      </ChartPathProvider>
    </View>
  );
};

export default CoinDetailedScreen;

babel.config.js:

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

package.json

{
  "name": "stockmarketapp",
  "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": {
    "@rainbow-me/animated-charts": "^1.0.0-alpha.6",
    "expo": "^49.0.0",
    "expo-status-bar": "^1.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-reanimated": "~3.3.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "expo-module-scripts": "^3.1.0"
  },
  "private": true
}

Exact Error from Terminal

ERROR  TypeError: _ReanimatedModule.default.createNode is not a function (it is undefined), js engine: hermes
 ERROR  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 also clear cache when i start expo app but doesnt work, How do I resolve this?

I tried to upload different versions of expo, react, react-dom, react-native-reanimated to find which versions suitable for my app, but i didnt figure out.

Answer 1

As far as I understand, the version of '@rainbow-me/animated-charts' is no longer supported. Even after replacing it version with the appropriate '@react-native-reanimated', I encountered version conflicts between Expo and React Native. Consequently, I switched to using 'react-native-wagmi-charts': '^2.3.0'. However, I'm facing issues with '@react-native-gesture-handler' library. I adjusted my usage like this:

<GestureHandlerRootView>
    <LineChart.Provider
      data={prices.map(([timestamp, value]) => ({ timestamp, value }))}
    >
      <LineChart>
        <LineChart.Path />
        <LineChart.CursorCrosshair />
      </LineChart>
      <LineChart.PriceText />
      <LineChart.DatetimeText />
    </LineChart.Provider>
  </GestureHandlerRootView>

Problem Solved!