Enable reanimated/rn feature flags to allow accurate scroll events tracking #79
Conversation
|
Apparently this will require native update and also effectively turns off the iOS prebuilds for the project. I hope the flag will be enabled in the next RN release though |
| } from "@/components/CurrentlyLive"; | ||
|
|
||
| const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as FlatList; | ||
| const AnimatedFlatList = Animated.FlatList; |
There was a problem hiding this comment.
Seems like just the change to this file fixes the sticky header jumping (using react-native FlatList), without having to change app.config.ts and package.json
There was a problem hiding this comment.
That change will definitely not fix the issue, its more like this one optimized it (but its still happening randomly): c4509a4
There was a problem hiding this comment.
unfortunately both of these updates are necessary. The changes from c4509a4 while offload the JS thread communication they still don't impact the UI updates from being applied on time. I updated the PR description with some links so you can learn more why these changes are necessary
There was a problem hiding this comment.
Yes. That's exactly it. When you process events using reanimated on native thread you don't want any throttling (that's what 1 corresponds to). Throttling was a mechanism to avoid overloading JS thread with events
There was a problem hiding this comment.
So by just adding scrollEventThrottle={1} we can achieve the same with createAnimatedComponent
There was a problem hiding this comment.
It also swaps out the renderScrollComponent for reanimated one, but this isn't necessary unless you want to animated some of the flatlist style props
This PR fixes an issue with the sticky day selector jumping intermittently when scrolling past the top position of the selector.
One change is to use
Animated.FlatListcomponent as opposed to creating one usingAnimated.createAnimatedComponent. The version that reanimated exports has the throttling defaults set properly such that it avoids event throttling.In addition, we enable feature flags in react native and reanimated that results in the direct ui thread updates from being delayed. Read more here: https://docs.swmansion.com/react-native-reanimated/docs/guides/feature-flags/#disable_commit_pausing_mechanism