search

jpudysz / react-native-unistyles

Level up your React Native StyleSheet
https://unistyl.es
MIT License
1.54k stars 42 forks source link

Poor performance on android after update from 2.8.3 to 2.8.4 #268

Closed sergey-shablenko closed 2 months ago

sergey-shablenko commented 2 months ago

Description

Not sure what exactly is going on, but after update from 2.8.3 to 2.8.4 I get really poor performance on android after triggering Blur event in the inputs, and it gets progressively worse with each Blur trigger and does not go away for some time. I assume it is related to animated insets and keyboard.

I have quite a few animated things in the app, doing animations and handling layout changes with react-native-reanimated, is it possible your animation conflicts with any of those libraries?

"@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.11.0", "react-native-reanimated": "^3.15.0", "react-native-safe-area-context": "^4.10.9", "react-native-screens": "^3.34.0", "@shopify/flash-list": "^1.7.1"

Here is a log I get in logcat with 2.8.4 after doing single blur

2024-08-26 14:46:18.624 20298-20298 InsetsController        app.identifier                   I  controlAnimationUncheckedInner: Added types=ime, animType=0, host=app.identifier/com.identifier.MainActivity, from=android.view.InsetsController.controlAnimationUnchecked:1449 android.view.InsetsController.applyAnimation:2005 android.view.InsetsController.applyAnimation:1968
2024-08-26 14:46:18.630 20298-20330 ViewRootIm...nActivity] app.identifier                   I  Resizing android.view.ViewRootImpl@65023d4: frame = [0,0][1080,2400] reportDraw = false forceLayout = false syncSeqId = -1
2024-08-26 14:46:18.633 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d4515890 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1271 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.634 20298-20298 InsetsController        app.identifier                   I  onStateChanged: host=app.identifier/com.identifier.MainActivity, from=android.view.ViewRootImpl$ViewRootHandler.handleMessageImpl:7209, state=InsetsState: {mDisplayFrame=Rect(0, 0 - 1080, 2400), mDisplayCutout=DisplayCutout{insets=Rect(0, 80 - 0, 0) waterfall=Insets{left=0, top=0, right=0, bottom=0} boundingRect={Bounds=[Rect(0, 0 - 0, 0), Rect(510, 0 - 570, 80), Rect(0, 0 - 0, 0), Rect(0, 0 - 0, 0)]} cutoutPathParserInfo={CutoutPathParserInfo{displayWidth=1080 displayHeight=2400 physicalDisplayWidth=1080 physicalDisplayHeight=2400 density={3.0} cutoutSpec={M 0,0 H -10 V 26.66666666666667 H 10 V 0 H 0 Z @dp} rotation={0} scale={1.0} physicalPixelDisplaySizeRatio={1.0}}}}, mRoundedCorners=RoundedCorners{[RoundedCorner{position=TopLeft, radius=90, center=Point(90, 90)}, RoundedCorner{position=TopRight, radius=90, center=Point(990, 90)}, RoundedCorner{position=BottomRight, radius=90, center=Point(990, 2310)}, RoundedCorner{position=BottomLeft, radius=90, center=Point(90, 2310)}]}  mRoundedCornerFrame=Rect(0, 0 - 1080, 2400), mPrivacyIndicatorBounds=PrivacyIndicatorBounds {static bounds=Rect(948, 0 - 1080, 80) rotation=0}, mDisplayShape=DisplayShape{ spec=-311912193 displayWidth=1080 displayHeight=2400 physicalPixelDisplaySizeRatio=1.0 rotation=0 offsetX=0 offsetY=0 scale=1.0}, mSources= { InsetsSource: {a12b0001 mType=navigationBars mFrame=[0,2355][1080,2400] mVisible=true mFlags=[SUPPRESS_SCRIM]}, InsetsSource: {a12b0004 mType=systemGestures mFrame=[0,0][90,2400] mVisible=true mFlags=[]}, InsetsSource: {a12b0005 mType=mandatorySystemGestures mFrame=[0,2304][1080,2400] mVisible=true mFlags=[]}, InsetsSource: {a12b0006 mType=tappableElement mFrame=[0,0][0,0] mVisible=true mFlags=[]}, InsetsSource: {a12b0024 mType=systemGestures mFrame=[990,0][1080,2400] mVisible=true mFlags=[]}, InsetsSource: {dc400000 mType=statusBars mFrame=[0,0][1080,80] mVisible=true mFlags=[]}, InsetsSource: {dc400005 mType=mandatorySystemGestures mFrame=[0,0][1080,116] mVisible=true mFlags=[]}, InsetsSource: {dc400006 mType=tappableElement mFrame=[0,0][1080,80] mVisible=true mFlags=[]}, InsetsSource: {3 mType=ime mFrame=[0,1670][1080,2400] mVisible=true mFlags=[]}, InsetsSource: {27 mType=displayCutout mFrame=[0,0][1080,80] mVisible=true mFlags=[]} }
2024-08-26 14:46:18.635 20298-20298 ViewRootIm...nActivity] app.identifier                   I  handleResized, msg = 4 frames=ClientWindowFrames{frame=[0,0][1080,2400] display=[0,0][1080,2400] parentFrame=[0,0][0,0]} forceNextWindowRelayout=false displayId=0 dragResizing=false compatScale=1.0 frameChanged=false attachedFrameChanged=false configChanged=false displayChanged=false compatScaleChanged=false
2024-08-26 14:46:18.644 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d453c350 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1272 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.660 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d3c26a70 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1273 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.675 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d453cfb0 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1274 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.692 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d453b2d0 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1275 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.708 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d45113d0 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1276 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.725 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d453a3b0 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1277 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.741 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d451cd70 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1278 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.758 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d451b8d0 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1279 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.775 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d4529630 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1280 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.792 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d453ca30 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1281 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.808 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d453f8f0 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1282 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.825 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d453d110 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1283 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.841 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d450ebf0 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1284 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.858 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d453b9b0 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1285 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.875 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d4540290 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1286 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.892 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d4519d50 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1287 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.909 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d453e190 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1288 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.925 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d450d750 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1289 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.942 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d4514290 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1290 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.959 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d453bf30 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1291 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.975 20298-20591 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d451add0 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1292 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.991 20298-20298 InsetsController        app.identifier                   I  cancelAnimation: types=ime, animType=0, host=app.identifier/com.identifier.MainActivity, from=android.view.InsetsController.notifyFinished:1748 android.view.InsetsAnimationControlImpl.applyChangeInsets:312 android.view.InsetsController.lambda$new$3:918
2024-08-26 14:46:18.991 20298-20298 ImeTracker              app.identifier                   I  app.identifier:4b6be91b: onShown
2024-08-26 14:46:18.994 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d451ea50 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1293 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:18.994 20298-20592 ViewRootIm...nActivity] app.identifier                   I  mWNT: t=0xb4000078d4539750 mBlastBufferQueue=0xb4000078c3c2db30 fn= 1293 mRenderHdrSdrRatio=1.0 caller= android.view.SyncRtSurfaceTransactionApplier.applyTransaction:96 android.view.SyncRtSurfaceTransactionApplier.lambda$scheduleApply$0:69 android.view.SyncRtSurfaceTransactionApplier.$r8$lambda$SgowXC58rj3PR958kHUfRgLZmvE:0
2024-08-26 14:46:19.488 20298-21251 TrafficStats            app.identifier                   D  tagSocket(165) with statsTag=0x90000, statsUid=-1

Steps to reproduce

not really sure

Snack or a link to a repository (optional)

No response

Unistyles version

2.8.4

React Native version

0.73.6

Platforms

Android

Engine

Hermes

Architecture

Fabric (new)

jpudysz commented 2 months ago

Thats super weird 🤔

What about 2.9.1 (latest version)?

Any chance to get a reproducer? Will be hard to help without the code (apart from comparing what did change it the code between these versions).

sergey-shablenko commented 2 months ago

@jpudysz sorry, it will take quite some time for me to create a reproducer, I do not have it at the moment as a compromise, is it possible to opt out of unintended animations? e.g I do not use insets provided by unistyles at all, would like to but there are other libraries that default to react-native-safe-area-context, so for the sake of consistency I also use that

Initially I wanted to bump from 2.7.3 to 2.9.1 had performance issue described above and started investigation appears to work fine on 2.8.3

Maybe this hints you anything I have a ScreenContainer component that is basically a Screen wrapper, it has animated header and listens to screen layout changes, using react-native-reanimated Animated insets cause a lot of re-renders, despite me having throttles on layout events, it looked like it was interfering with something on native side rather than js side

sssajjad007 commented 2 months ago

I have a similar problem, when the keyboard is opened, use style causes rerender, when the keyboard is closed, rerender happens again. When I replace createStyleSheet with StyleSheet.create and remove useStyles, the rerender doesn't happen I can make a repo for it if that helps. i using last version

jpudysz commented 2 months ago

Yeah, that's true and that's how it works.

Unistyles reports keyboard position for bottom inset. It's not perfect as re-render happens.

It will be completely resolved in 3.0 where no style will cause re-render, but until this time we need to figure something out.

At this point the options are limited, removing re-render will be a breaking change, so we need to either patch a package or add a config to disable this behavior.

jpudysz commented 2 months ago

Can you guys show me how it looks like? If thats commercial project, please share it via discord

ustuncem commented 1 month ago

When using react-native-keyboard-controller package, even if the animatedInsets is set to false every screen that uses the useStyles hook is re-rendered. When I remove the hook it works fine. Here is an example:

https://github.com/user-attachments/assets/c9eab627-85a0-4a49-8fc0-c74083af526a

They are also using native code to notify when the keyboard is opened. I think both libraries are manipulating something common. I am on the Change Password screen but its re-rendering every screen that is rendered previously and that is using the useStyles hook. I only put a console.log to the Home screen

jpudysz commented 1 month ago

@ustuncem It was resolved with 2.10.0

sssajjad007 commented 1 month ago

@ustuncem check this https://github.com/jpudysz/react-native-unistyles/issues/275

ustuncem commented 1 month ago

Ah, thank you so much. I apologize for not searching thoroughly through closed issues. Sorry for re-opening.

jpudysz commented 1 month ago

No worries, enjoy!