CODEWITHSUNDEEP
javascriptreact-nativenavigation-drawerlibrariesreact-native-reanimated
Joey Pfoster
Joey Pfoster

Reputation: 1

Failed to initialize react-native-reanimated library

I imported '@react-navigation/drawer' and it gives me this error:

` ERROR Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

  1. Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
  2. Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes ERROR Invariant Violation: "main" has not been registered. This can happen if:

and I can't find a fix for it I have tried newer and older versions but it didn't work

this is my code:

import { StatusBar } from 'expo-status-bar';
import React, {useState, Component, useEffect} from "react";
import { StyleSheet, Text, View, Button, TouchableOpacity, TextInput, Image, SafeAreaView} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {createNativeStackNavigator } from "@react-navigation/native-stack";
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Menu, MenuProvider, MenuTrigger, MenuOptions, MenuOption, renderers} from 'react-native-popup-menu';
import { createDrawerNavigator } from '@react-navigation/drawer';
// import AppHeader from 'Header.js';
import LoginPage from './LoginPage.js';
import HomePage from './HomePage.js';
import RegisterPage from './RegisterPage.js';
import UserInfoPage from './UserInfoPage.js';

const Drawer = createDrawerNavigator();


export default function App({navigation}) {
  let startscreen = 'LoginPage';
  console.disableYellowBox = true;
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName={startscreen}>
        <Drawer.Screen name="LoginPage" component={LoginPage} />
        <Drawer.Screen name="HomePage" component={HomePage} />
        <Drawer.Screen name="RegisterPage" component={RegisterPage} />
        <Drawer.Screen name="UserInfoPage" component={UserInfoPage} />
      </Drawer.Navigator>
    </NavigationContainer>
    );
  }

so when i remove "import { createDrawerNavigator } from '@react-navigation/drawer';" the error disapears

also my package.json:

{
  "name": "fitness",
  "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": {
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "expo": "^48.0.0",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.7",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-popup-menu": "^0.16.1",
    "react-native-reanimated": "^2.11.0",
    "react-native-web": "~0.18.11"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "metro-react-native-babel-preset": "^0.76.3"
  },
  "private": true
}

My babel.config.js:

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

have tried newer and older versions but it didn't work, i just need it to work so i can move on :)

Upvotes: 0

Views: 835

Answers (1)

Joey Pfoster
Joey Pfoster

Reputation: 1

I found the issue expo whasn't clearing it right with:

npm start -- --reset-cache

Instead of that I used:

npm start -- -c

This worked for me :)

Upvotes: 0

Related Questions