androidreact-nativeexporeact-navigation

Mismatch between Javascript part and native part of reanimated (3.16.1 vs 3.10.0)

Current behavior

Before changes, i've got a stack navigation working, however when trying to implement drawers instead of just stack, i've got a the following error :

 ERROR  ReanimatedError: [Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.16.1 vs 3.10.0).
    See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-javascript-part-and-native-part-of-reanimated` for more details., js engine: hermes

Platform

Packages

Environment

package version
@react-navigation/native ^6.1.18
@react-navigation/bottom-tabs not in use
@react-navigation/drawer ^6.7.2
@react-navigation/material-top-tabs not in use
@react-navigation/stack ^6.4.1
@react-navigation/native-stack not in use
react-native-safe-area-context ^4.14.0
react-native-screens ^3.35.0
react-native-gesture-handler ^2.20.2
react-native-reanimated ^3.16.1
react-native-tab-view not in use
react-native-pager-view not in use
react-native 0.74.5
expo ~51.0.28
node v20.18.0
npm or yarn 10.8.2

Executing the app via running npx expo start --tunnel Phone :

Expected behavior

Just trying to get the drawers working following : https://reactnavigation.org/docs/drawer-based-navigation/

One workaround that i have is to downgrade some components by installing the latest expo and fixing dependencies :

However it's not ideal because it means that I don't have the latest versions of each packages.

Reproduction

Here is the smallest example that i can make : github.com/nicolas-goyon/reanimated_drawer_issue

Steps to reproduce :

- npm i

- npx start expo --tunnel

- scan the qr code with a phone with expo (preferably the closest to what i've described)

Relevent files and code

Menu.js

The file that cause issues is src/components/Menu.js with the following code :

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Login, Notifications, PlaceCreation, Places, Profil, ProfilEdit,Register, Requests,Reservations,Reserve } from '../screens';

const Drawer = createDrawerNavigator();


export default function Menu() {
    return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Register">    
          <Drawer.Screen name="Login" component={Login} />
          <Drawer.Screen name="Register" component={Register} />                  
        </Drawer.Navigator>
      </NavigationContainer>
    );
}

When changing the react-navigation/drawer to a react-navigation/stack cause no issues.

Package.json

The package.json is also causing the issue mainly because of the packages versions.

{
  "name": "iwa",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "start:tunnel": "expo start --tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-community/datetimepicker": "^8.2.0",
    "@react-navigation/drawer": "^6.7.2",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/stack": "^6.4.1",
    "@reduxjs/toolkit": "^2.3.0",
    "axios": "^1.7.7",
    "expo": "~51.0.28",
    "expo-image-picker": "~15.0.7",
    "expo-status-bar": "~1.12.1",
    "iwa": "file:",
    "moment": "^2.30.1",
    "react": "18.2.0",
    "react-native": "0.74.5",
    "react-native-calendars": "^1.1307.0",
    "react-native-config": "^1.5.3",
    "react-native-date-picker": "^5.0.7",
    "react-native-dotenv": "^3.4.11",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-reanimated": "^3.16.1",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^3.35.0",
    "react-redux": "^9.1.2",
    "redux": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0"
  },
  "private": true
}
Solution

  • Had the same problem, running:

    npx expo start -c

    Solved it for me.

    Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting/#mismatch-between-javascript-code-version-and-reanimated-babel-plugin-version