software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
8.85k stars 1.29k forks source link

Cannot read property 'isConfigured' of undefined #5664

Closed elkee2003 closed 7 months ago

elkee2003 commented 7 months ago

Description

I tried running my code and I got this error: npm start -- --reset-cache

Steps to reproduce

  1. npm start
  2. npm run android
  3. the error occurs

Snack or a link to a repository

https://github.com/elkee2003/Atua2024.git

Reanimated version

3.7.0

React Native version

0.73.4

Platforms

Android, Web

JavaScript runtime

JSC

Workflow

React Native

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

anatooly commented 7 months ago

@elkee2003 how you fix this?

elkee2003 commented 7 months ago

@elkee2003 how you fix this?

This error normally happens when you use drawer navigator. To solve this, you have to go to babel.config.js file. and paste this: plugins: [ "react-native-reanimated/plugin", ], The whole code will look like this: module.exports = { presets: ['module:@react-native/babel-preset'], plugins: [ "react-native-reanimated/plugin", ], }; After that run: npm start -- --reset-cache

Kenildev007 commented 6 months ago

thank you so much bro i was trying to solve this for more than 3 hours and you solution works immediately

Yahya-Naeem commented 6 months ago

I got this error as well but it is showing me this image is there any way I can Solve it ? ` //React imports import 'react-native-gesture-handler'; import { SafeAreaView, ScrollView, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; //navigation Import import OuterTabs from './navigations/outernavigator/Navigator.jsx';

//icons import import { EllipseIcon,TopEllipseIcon } from './assets/svgs/index.js';

//styles import import AppStyles from './styles/Styles.jsx'; import HomeNavigator from './navigations/homenavigator/Navigator.jsx';

function App () { return (

); }

export default App;

` import * as React from 'react'; import { createDrawerNavigator } from '@react-navigation/drawer'; import HomeScreen from '../../screens/home/HomeScreen.jsx'; import SettingsScreen from '../../screens/settings/SettingsScreen.jsx' ; import Login from '../../screens/login/Login.jsx'; const Drawer = createDrawerNavigator(); export default function HomeNavigator() { return (

); } `
razannael commented 6 months ago

Thanks, your solution ends 7 hours of hell.

Yahya-Naeem commented 6 months ago

What is it ?

On Tue, 19 Mar 2024 at 3:53 AM, Razan Tuhaimer @.***> wrote:

Thanks, your solution ends 7 hours of hell.

— Reply to this email directly, view it on GitHub https://github.com/software-mansion/react-native-reanimated/issues/5664#issuecomment-2005204677, or unsubscribe https://github.com/notifications/unsubscribe-auth/AY3HP2FG7NDBRBOZHHFZSPDYY5V7HAVCNFSM6AAAAABDHPM5MGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBVGIYDINRXG4 . You are receiving this because you commented.Message ID: @.*** com>

Naveenzerobugz commented 6 months ago

This error normally happens when you use drawer navigator. To solve this, you have to go to babel.config.js file. and paste this: plugins: [ "react-native-reanimated/plugin", ], The whole code will look like this: module.exports = { presets: ['module:@react-native/babel-preset'], plugins: [ "react-native-reanimated/plugin", ], }; After that run: npm start -- --reset-cache

i have tried this but not working for me

import 'react-native-gesture-handler'; import React from 'react'; import type {PropsWithChildren} from 'react';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; import HomeScreen from './src/pages/home'; import ProfileScreen from './src/pages/profile';

const Drawer = createDrawerNavigator(); function App(): React.JSX.Element { return (

); }

;

export default App;

pakagelog.json

"dependencies": { "@react-native-community/masked-view": "^0.1.11", "@react-navigation/drawer": "^6.6.15", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.9.26", "react": "18.2.0", "react-native": "0.73.6", "react-native-gesture-handler": "^2.15.0", "react-native-paper": "^5.12.3", "react-native-reanimated": "^3.8.1", "react-native-safe-area-context": "^4.9.0", "react-native-screens": "^3.29.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.73.21", "@react-native/eslint-config": "0.73.2", "@react-native/metro-config": "0.73.5", "@react-native/typescript-config": "0.73.1", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } }

SSHshadow222 commented 6 months ago

I got this error as well but it is showing me this image is there any way I can Solve it ? ` //React imports import 'react-native-gesture-handler'; import { SafeAreaView, ScrollView, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; //navigation Import import OuterTabs from './navigations/outernavigator/Navigator.jsx';

//icons import import { EllipseIcon,TopEllipseIcon } from './assets/svgs/index.js';

//styles import import AppStyles from './styles/Styles.jsx'; import HomeNavigator from './navigations/homenavigator/Navigator.jsx';

function App () { return ( <View style={{position:'absolute',top:-20,left:0}}>

        <HomeNavigator />

  </ScrollView>
</SafeAreaView>
</NavigationContainer>

); }

export default App;

` import * as React from 'react'; import { createDrawerNavigator } from '@react-navigation/drawer'; import HomeScreen from '../../screens/home/HomeScreen.jsx'; import SettingsScreen from '../../screens/settings/SettingsScreen.jsx' ; import Login from '../../screens/login/Login.jsx'; const Drawer = createDrawerNavigator(); export default function HomeNavigator() { return (

        <Drawer.Screen 
            name="Logout" 
            component={Login} 
        />
    </Drawer.Navigator>

); }

`

I had the exact same issue and solved it by updating the outdated dependencies in my project to their latest version. If you're using NPM, this guide might be helpful.

alexsvt2 commented 5 months ago

@Yahya-Naeem.

Did you solve your problem?

Because I'm facing the same errors 😅

Yahya-Naeem commented 5 months ago

Yes, It was because of reanimated version . Uninstall current and download

  1. version of reanimated , Hope it will help .

On Thu, Mar 28, 2024 at 10:05 AM Alexis López @.***> wrote:

@Yahya-Naeem https://github.com/Yahya-Naeem.

Did you solve your problem?

Because I'm facing the same errors 😅

— Reply to this email directly, view it on GitHub https://github.com/software-mansion/react-native-reanimated/issues/5664#issuecomment-2024401573, or unsubscribe https://github.com/notifications/unsubscribe-auth/AY3HP2GED7RJJ4JXYHGOX6TY2OQJ3AVCNFSM6AAAAABDHPM5MGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRUGQYDCNJXGM . You are receiving this because you were mentioned.Message ID: @.*** com>

Siddharth692k commented 5 months ago

@elkee2003 how you fix this?

This error normally happens when you use drawer navigator. To solve this, you have to go to babel.config.js file. and paste this: plugins: [ "react-native-reanimated/plugin", ], The whole code will look like this: module.exports = { presets: ['module:@react-native/babel-preset'], plugins: [ "react-native-reanimated/plugin", ], }; After that run: npm start -- --reset-cache

Thank God this worked for me. I've been trying to figure out what went wrong for two days straight. Couldn't come up with a remedy. Finally doing the above helped me.

Alonso9 commented 4 months ago

@elkee2003 how you fix this?

This error normally happens when you use drawer navigator. To solve this, you have to go to babel.config.js file. and paste this: plugins: [ "react-native-reanimated/plugin", ], The whole code will look like this: module.exports = { presets: ['module:@react-native/babel-preset'], plugins: [ "react-native-reanimated/plugin", ], }; After that run: npm start -- --reset-cache

Thanks

CarlosAlbertoTI commented 4 months ago

@elkee2003 how you fix this?

This error normally happens when you use drawer navigator. To solve this, you have to go to babel.config.js file. and paste this: plugins: [ "react-native-reanimated/plugin", ], The whole code will look like this: module.exports = { presets: ['module:@react-native/babel-preset'], plugins: [ "react-native-reanimated/plugin", ], }; After that run: npm start -- --reset-cache

I tried this and didn't work

This is my package.json dependecies:

dependencies": {
        "@mapbox/mapbox-sdk": "^0.13.2",
        "@microsoft/signalr": "^6.0.5",
        "@nozbe/watermelondb": "^0.27.1",
        "@react-native-async-storage/async-storage": "^1.17.0",
        "@react-native-clipboard/clipboard": "^1.11.1",
        "@react-native-community/geolocation": "^2.0.2",
        "@react-native-community/netinfo": "^11.3.1",
        "@react-native-firebase/app": "^18.7.3",
        "@react-native-firebase/database": "^18.8.0",
        "@react-native-firebase/messaging": "^18.7.3",
        "@react-native-picker/picker": "^2.4.4",
        "@react-navigation/bottom-tabs": "^6.0.9",
        "@react-navigation/drawer": "^6.6.15",
        "@react-navigation/native": "^6.0.6",
        "@react-navigation/native-stack": "^6.2.5",
        "@rnmapbox/maps": "^10.0.9-rc.0",
        "@sayem314/react-native-keep-awake": "^1.1.0",
        "@turf/helpers": "^6.5.0",
        "@turf/turf": "^6.5.0",
        "axios": "^0.25.0",
        "date-fns": "^2.28.0",
        "date-fns-tz": "^1.3.4",
        "i18next": "^21.6.14",
        "i18next-react-native-language-detector": "^1.0.2",
        "intl": "^1.2.5",
        "mapbox-gl": "^3.3.0",
        "react": "18.2.0",
        "react-i18next": "^11.16.1",
        "react-native": "0.73.4",
        "react-native-autocomplete-input": "^5.1.0",
        "react-native-background-actions": "^2.6.7",
        "react-native-blob-util": "^0.16.2",
        "react-native-bootsplash": "^4.7.1",
        "react-native-calendars": "^1.1291.0",
        "react-native-check-box": "^2.1.7",
        "react-native-embrace": "^3.16.0",
        "react-native-fs": "^2.19.0",
        "react-native-gesture-handler": "^2.15.0",
        "react-native-htmlview": "^0.16.0",
        "react-native-inset-shadow": "^1.0.3",
        "react-native-keyboard-aware-scroll-view": "^0.9.5",
        "react-native-linear-gradient": "^2.6.2",
        "react-native-locale-detector": "^1.0.1",
        "react-native-mask-input": "^1.2.0",
        "react-native-modal": "^13.0.1",
        "react-native-paper": "^4.11.2",
        "react-native-permissions": "^3.7.3",
        "react-native-picker-select": "^8.0.4",
        "react-native-reanimated": "^3.11.0",
        "react-native-render-html": "^6.3.4",
        "react-native-safe-area-context": "^3.3.2",
        "react-native-screens": "3.31.1",
        "react-native-simple-radio-button": "^2.7.4",
        "react-native-smooth-pincode-input": "^1.0.9",
        "react-native-svg": "^12.3.0",
        "react-native-svg-transformer": "^1.3.0",
        "react-native-swipeable": "^0.6.0",
        "react-native-xml2js": "^1.0.3",
        "react-native-zip-archive": "^6.0.8",
        "styled-components": "^5.3.3"
    },
    "devDependencies": {
        "@babel/core": "^7.16.5",
        "@babel/plugin-proposal-decorators": "^7.17.9",
        "@babel/runtime": "^7.16.5",
        "@commitlint/cli": "^17.4.0",
        "@commitlint/config-conventional": "^17.4.0",
        "@react-native-community/eslint-config": "^3.0.1",
        "@react-native/js-polyfills": "^0.74.83",
        "@react-native/metro-babel-transformer": "^0.74.83",
        "@react-native/metro-config": "^0.74.83",
        "@types/jest": "^27.4.1",
        "@types/react": "^17.0.39",
        "@types/react-native": "^0.67.1",
        "@types/react-test-renderer": "^17.0.1",
        "babel-jest": "^27.4.5",
        "eslint": "^8.5.0",
        "husky": "^8.0.0",
        "jest": "^27.4.5",
        "lint-staged": "^13.1.0",
        "metro-config": "^0.80.9",
        "metro-react-native-babel-preset": "^0.66.2",
        "metro-runtime": "^0.80.9",
        "pod-install": "0.1.38",
        "prettier": "^2.8.2",
        "react-test-renderer": "17.0.2",
        "typescript": "^4.6.2"
    },

and babel.config.js

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        ['@babel/plugin-proposal-decorators', {legacy: true}],
        ['react-native-reanimated/plugin'],
    ],
};
Booqka commented 1 week ago

I got this error as well but it is showing me this image is there any way I can Solve it ? ` //React imports import 'react-native-gesture-handler'; import { SafeAreaView, ScrollView, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; //navigation Import import OuterTabs from './navigations/outernavigator/Navigator.jsx';

//icons import import { EllipseIcon,TopEllipseIcon } from './assets/svgs/index.js';

//styles import import AppStyles from './styles/Styles.jsx'; import HomeNavigator from './navigations/homenavigator/Navigator.jsx';

function App () { return ( <View style={{position:'absolute',top:-20,left:0}}>

        <HomeNavigator />

  </ScrollView>
</SafeAreaView>
</NavigationContainer>

); }

export default App;

` import * as React from 'react'; import { createDrawerNavigator } from '@react-navigation/drawer'; import HomeScreen from '../../screens/home/HomeScreen.jsx'; import SettingsScreen from '../../screens/settings/SettingsScreen.jsx' ; import Login from '../../screens/login/Login.jsx'; const Drawer = createDrawerNavigator(); export default function HomeNavigator() { return (

        <Drawer.Screen 
            name="Logout" 
            component={Login} 
        />
    </Drawer.Navigator>

); }

`

That's weird, but i fixed that by removing code from installation guide from metro.config.js and remain code in babel.config.js