Closed elkee2003 closed 7 months ago
@elkee2003 how you fix this?
@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 you so much bro i was trying to solve this for more than 3 hours and you solution works immediately
I got this error as well but it is showing me this 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 (
Thanks, your solution ends 7 hours of hell.
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>
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" } }
I got this error as well but it is showing me this 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.
@Yahya-Naeem.
Did you solve your problem?
Because I'm facing the same errors 😅
Yes, It was because of reanimated version . Uninstall current and download
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>
@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.
@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
@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'],
],
};
I got this error as well but it is showing me this 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
Description
I tried running my code and I got this error: npm start -- --reset-cache
Steps to reproduce
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