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

shreygargofficial · 2024-11-25T11:25:45Z

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

The text was updated successfully, but these errors were encountered:

Fab-Diaz · 2024-11-26T13:28:24Z

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

migueldaipre · 2024-11-27T14:32:06Z

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 · 2024-11-27T14:33:18Z

@Fab-Diaz can you share your dependencies?

LeXuanKhanh · 2024-11-27T15:48:59Z

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 · 2024-11-27T21:22:31Z

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

Kudo · 2024-12-03T12:54:28Z

the https://github.com/shreygargofficial/vyayam/tree/upgrade returns 404. could you help to check the repro is valid?

shreygargofficial · 2024-12-03T12:57:22Z

the https://github.com/shreygargofficial/vyayam/tree/upgrade returns 404. could you help to check the repro is valid?

sorry, I made it private...If you want to check I can make it public

Kudo · 2024-12-04T09:05:45Z

sorry, I made it private...If you want to check I can make it public

@shreygargofficial yes please, we would like to investigate the issue. would be good if you could make the repro public.

Fab-Diaz · 2024-12-04T10:28:16Z

Another more extreme example between a modal and a page

edit: using Expo 52

Screen.Recording.2024-12-04.at.11.26.48.mov

LeXuanKhanh · 2024-12-04T10:36:02Z

Another more extreme example between a modal and a page

Screen.Recording.2024-12-04.at.11.26.48.mov

are you using expo as well ?

shreygargofficial · 2024-12-04T10:41:37Z

Another more extreme example between a modal and a page
Screen.Recording.2024-12-04.at.11.26.48.mov
are you using expo as well ?

Yes

shreygargofficial · 2024-12-04T10:46:27Z

sorry, I made it private...If you want to check I can make it public

@shreygargofficial yes please, we would like to investigate the issue. would be good if you could make the repro public.

Done..Now it is public

Kudo · 2024-12-04T11:34:53Z

Done..Now it is public

thanks @shreygargofficial. one thing i've noticed before digging is that you use old architecture on sdk 51 and newArchEnabled=true on sdk 52. that could have much difference between the old/new architecture. i guess i would try to turn on new arch on sdk 51 or disable new arch on sdk 52 to see if the performance is still valid.

shreygargofficial · 2024-12-04T11:41:29Z

Done..Now it is public

thanks @shreygargofficial. one thing i've noticed before digging is that you use old architecture on sdk 51 and newArchEnabled=true on sdk 52. that could have much difference between the old/new architecture. i guess i would try to turn on new arch on sdk 51 or disable new arch on sdk 52 to see if the performance is still valid.

I tried that but it was not working

Kudo · 2024-12-04T18:44:56Z

@shreygargofficial i can repro your issue.

it works fine on sdk 51, both new arch and old arch.
from sdk 52, the issue happens no matter on new arch or old arch.
mostly relate to keyboard. from your two videos, i cannot clearly see whether you touched at any textinput? could you help to clarify this? the jitter issue happens when i touch textinput (and keyboard appears)
the most trivial repro step for me is from login screen -> signup -> touch textinput -> back to login screen. as the video shown: Screen_recording_20241205_024251.webm

will try to narrow down the issue more and update if i find anything

shreygargofficial · 2024-12-04T19:06:45Z

Not only on keyboard or text input related things, it is occurring for floating buttons also which are positioned absolute, If you can refer the video attached above *Shrey Garg8871009875*

…

On Thu, Dec 5, 2024 at 00:15 Kudo Chien ***@***.***> wrote: @shreygargofficial <https://github.com/shreygargofficial> i can repro your issue. - it works fine on sdk 51, both new arch and old arch. - from sdk 52, the issue happens no matter on new arch or old arch. - mostly relate to keyboard. from your two videos, i cannot clearly see whether you touched at any textinput? could you help to clarify this? the jitter issue happens when i touch textinput (and keyboard appears) - the most trivial repro step for me is from login screen -> signup -> touch textinput -> back to login screen. as the video shown: Screen_recording_20241205_024251.webm <https://github.com/user-attachments/assets/6cb85857-ad43-46ef-835a-027e60abd400> will try to narrow down the issue more and update if i find anything — Reply to this email directly, view it on GitHub <#47926 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGDOABDD4GH27CB2X3OEWC32D5EUBAVCNFSM6AAAAABSNX4X7OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMJYGI3DANJQHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

Kudo · 2024-12-09T15:24:09Z

@shreygargofficial having #48171 and #48181 to fix KeyboardAvoidingView but not sure that would fix the your problem. i cannot exactly repro the other floating button cases, not sure if i missed anything.

the steps to try both #48171 and #48181 on your project

$ curl -fsSL https://gist.githubusercontent.com/Kudo/ffc4d7bcac965e3f647ca19543d2f139/raw/cc07fbfbb8bbffaf5fec175366154d0f5afa9e2c/patch.sh | bash
$ npx expo prebuild -p android --clean
$ npx expo run:android

hirbod · 2024-12-09T20:30:23Z

The navigation issue is caused by react native screens v4. software-mansion/react-native-screens#2550

There are multiple linked issues to this that are likely caused by the same root.

shreygargofficial · 2024-12-09T20:42:15Z

@shreygargofficial i can repro your issue.

it works fine on sdk 51, both new arch and old arch.

from sdk 52, the issue happens no matter on new arch or old arch.

mostly relate to keyboard. from your two videos, i cannot clearly see whether you touched at any textinput? could you help to clarify this? the jitter issue happens when i touch textinput (and keyboard appears)

the most trivial repro step for me is from login screen -> signup -> touch textinput -> back to login screen. as the video shown: Screen_recording_20241205_024251.webm

will try to narrow down the issue more and update if i find anything

No, I haven't touched the keyboard in the video secondly, in the first video the layout is like there is wrapper View with flex:1 then there are 4 child in that of flex 3, 3, 7, and 3 respectively. The First and third child of flex 3 and 7 is having a scrollView in that flexed View..

In the second video there is just a floating button with position absolute that cause issue while upgrading from older version to newer

Kudo · 2024-12-10T06:37:57Z

No, I haven't touched the keyboard in the video secondly, in the first video the layout is like there is wrapper View with flex:1 then there are 4 child in that of flex 3, 3, 7, and 3 respectively. The First and third child of flex 3 and 7 is having a scrollView in that flexed View..

In the second video there is just a floating button with position absolute that cause issue while upgrading from older version to newer

alright. would be good if you could record full videos from launching the app to the problems, so that we can know the all steps to repro. if the account's generated content is also relevant, would be good if you could share an account/password that could demonstrate the problems.

shreygargofficial · 2024-12-10T08:12:00Z

sure…Today around 1:00 Am IST i will post the video username: shrey password: 8871009875 * username should be all small *

…

On Tue, Dec 10, 2024 at 12:08 Kudo Chien ***@***.***> wrote: No, I haven't touched the keyboard in the video secondly, in the first video the layout is like there is wrapper View with flex:1 then there are 4 child in that of flex 3, 3, 7, and 3 respectively. The First and third child of flex 3 and 7 is having a scrollView in that flexed View.. In the second video there is just a floating button with position absolute that cause issue while upgrading from older version to newer alright. would be good if you could record full videos from launching the app to the problems, so that we can know the all steps to repro. if the account's generated content is also relevant, would be good if you could share an account/password that could demonstrate the problems. — Reply to this email directly, view it on GitHub <#47926 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGDOABHQFS6FZUH6CBYZNLT2E2D53AVCNFSM6AAAAABSNX4X7OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMZQGU3TCMJUGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

shreygargofficial · 2024-12-18T06:19:45Z

Any update ?

shreygargofficial added Debugger Issues related to React Native DevTools or legacy JavaScript/Hermes debugging Needs: Triage 🔍 labels Nov 25, 2024

robhogan removed the Debugger Issues related to React Native DevTools or legacy JavaScript/Hermes debugging label Nov 25, 2024

migueldaipre added Needs: Author Feedback and removed Needs: Triage 🔍 labels Nov 27, 2024

github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Nov 27, 2024

Kudo mentioned this issue Dec 8, 2024

fix KeyboardAvoidingView infinite updates on android #48171

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

shreygargofficial commented Nov 25, 2024

Fab-Diaz commented Nov 26, 2024 •

edited

Loading

migueldaipre commented Nov 27, 2024

migueldaipre commented Nov 27, 2024

LeXuanKhanh commented Nov 27, 2024

shreygargofficial commented Nov 27, 2024

Kudo commented Dec 3, 2024 •

edited

Loading

shreygargofficial commented Dec 3, 2024

Kudo commented Dec 4, 2024

Fab-Diaz commented Dec 4, 2024 •

edited

Loading

LeXuanKhanh commented Dec 4, 2024

shreygargofficial commented Dec 4, 2024

shreygargofficial commented Dec 4, 2024

Kudo commented Dec 4, 2024

shreygargofficial commented Dec 4, 2024

Kudo commented Dec 4, 2024

shreygargofficial commented Dec 4, 2024 via email

Kudo commented Dec 9, 2024

hirbod commented Dec 9, 2024 •

edited

Loading

shreygargofficial commented Dec 9, 2024

Kudo commented Dec 10, 2024

shreygargofficial commented Dec 10, 2024 via email •

edited

Loading

shreygargofficial commented Dec 18, 2024

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

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

Comments

shreygargofficial commented Nov 25, 2024

Description

Steps to reproduce

React Native Version

Output of npx react-native info

Screenshots and Videos

Fab-Diaz commented Nov 26, 2024 • edited Loading

migueldaipre commented Nov 27, 2024

migueldaipre commented Nov 27, 2024

LeXuanKhanh commented Nov 27, 2024

shreygargofficial commented Nov 27, 2024

Kudo commented Dec 3, 2024 • edited Loading

shreygargofficial commented Dec 3, 2024

Kudo commented Dec 4, 2024

Fab-Diaz commented Dec 4, 2024 • edited Loading

LeXuanKhanh commented Dec 4, 2024

shreygargofficial commented Dec 4, 2024

shreygargofficial commented Dec 4, 2024

Kudo commented Dec 4, 2024

shreygargofficial commented Dec 4, 2024

Kudo commented Dec 4, 2024

shreygargofficial commented Dec 4, 2024 via email

Kudo commented Dec 9, 2024

hirbod commented Dec 9, 2024 • edited Loading

shreygargofficial commented Dec 9, 2024

Kudo commented Dec 10, 2024

shreygargofficial commented Dec 10, 2024 via email • edited Loading

shreygargofficial commented Dec 18, 2024

Output of `npx react-native info`

Fab-Diaz commented Nov 26, 2024 •

edited

Loading

Kudo commented Dec 3, 2024 •

edited

Loading

Fab-Diaz commented Dec 4, 2024 •

edited

Loading

hirbod commented Dec 9, 2024 •

edited

Loading

shreygargofficial commented Dec 10, 2024 via email •

edited

Loading