Closed sergey-shablenko closed 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).
@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
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
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.
Can you guys show me how it looks like? If thats commercial project, please share it via discord
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
@ustuncem It was resolved with 2.10.0
@ustuncem check this https://github.com/jpudysz/react-native-unistyles/issues/275
Ah, thank you so much. I apologize for not searching thoroughly through closed issues. Sorry for re-opening.
No worries, enjoy!
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
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)