Upgrading React native from 0.74 to 0.76 in existing project creates Jittering effect

[shreygargofficial]

Description

I was using expo sdk 51.0.28 and RN 0.74.5 after upgrading it to latest expo and RN, I am facing lot of jittering effect in app

Earlier package.json

{ "name": "vyayam", "version": "1.0.0", "main": "expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/vector-icons": "^14.0.4", "@hookform/resolvers": "^3.9.0", "@react-native-async-storage/async-storage": "^1.23.1", "@react-native-community/datetimepicker": "^8.2.0", "@react-native-community/slider": "4.5.2", "@react-native-picker/picker": "^2.8.1", "@react-navigation/bottom-tabs": "^6.6.1", "@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.11.0", "@reduxjs/toolkit": "^2.2.8", "axios": "^1.7.7", "expo": "~51.0.28", "expo-font": "~12.0.10", "expo-linear-gradient": "^13.0.2", "expo-linking": "~6.3.1", "expo-secure-store": "^13.0.2", "expo-splash-screen": "~0.27.6", "expo-status-bar": "~1.12.1", "lottie-react-native": "6.7.0", "react": "18.2.0", "react-hook-form": "^7.53.0", "react-native": "0.74.5", "react-native-chart-kit": "^6.12.0", "react-native-gesture-handler": "~2.16.1", "react-native-htmlview": "^0.17.0", "react-native-paper": "^5.12.5", "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.5", "react-native-screens": "3.31.1", "react-native-svg": "^15.8.0", "react-native-webview": "13.8.6", "react-redux": "^9.1.2", "redux-persist": "^6.0.0", "redux-thunk": "^3.1.0", "yup": "^1.4.0" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true }

After Upgrade to latest one

{ "name": "vyayam", "version": "1.0.0", "main": "expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/vector-icons": "^14.0.2", "@hookform/resolvers": "^3.9.0", "@react-native-async-storage/async-storage": "1.23.1", "@react-native-community/datetimepicker": "8.2.0", "@react-native-community/slider": "4.5.5", "@react-native-picker/picker": "2.9.0", "@react-navigation/bottom-tabs": "^6.6.1", "@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.11.0", "@reduxjs/toolkit": "^2.2.8", "axios": "^1.7.7", "expo": "~52.0.11", "expo-font": "~13.0.1", "expo-linear-gradient": "~14.0.1", "expo-linking": "~7.0.3", "expo-secure-store": "~14.0.0", "expo-splash-screen": "~0.29.13", "expo-status-bar": "~2.0.0", "lottie-react-native": "7.1.0", "react": "18.3.1", "react-hook-form": "^7.53.0", "react-native": "0.76.3", "react-native-chart-kit": "^6.12.0", "react-native-gesture-handler": "~2.20.2", "react-native-htmlview": "^0.17.0", "react-native-paper": "^5.12.5", "react-native-reanimated": "~3.16.1", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.1.0", "react-native-svg": "15.8.0", "react-native-webview": "13.12.2", "react-redux": "^9.1.2", "redux-persist": "^6.0.0", "redux-thunk": "^3.1.0", "yup": "^1.4.0" }, "devDependencies": { "@babel/core": "^7.25.2" }, "private": true }

ScreenRecording_11-25-2024.15-20-27_1.MP4

ScreenRecording_11-25-2024.15-30-28_1.MP4

Steps to reproduce

https://github.com/shreygargofficial/vyayam/tree/upgrade

clone it do npm i then npm start

React Native Version

0.76.3

Output of npx react-native info

⚠️ react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include:


  "devDependencies": {
    "@react-native-community/cli": "latest",
  }

Screenshots and Videos

[Fab-Diaz]

Agreed, I'm facing the same issue when going from one screen to another. Seems to be android only

[migueldaipre]

Hey @shreygargofficial, thanks for opening this issue.

This doesn't seem to be a issue with the react-native core. We need a stand-alone reproducer (react-native core only)

[migueldaipre]

@Fab-Diaz can you share your dependencies?

[LeXuanKhanh]

I have the same issue when creating a new project with the latest Expo 52. Whenever I click / hold the button or navigate to a new screen, it will cause flickering. Would it still count as an issue in react-native core ?

Screen.Recording.2024-11-27.at.22.45.34.mov

[shreygargofficial]

I have the same issue when creating a new project with the latest Expo 52. Whenever I click / hold the button or navigate to a new screen, it will cause flickering. Would it still count as an issue in react-native core ?

Screen.Recording.2024-11-27.at.22.45.34.mov

Exactly Mine issue is all about why it is behaving like this