Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Enable reanimated/rn feature flags to allow accurate scroll events tracking #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 4, 2025
Merged

Enable reanimated/rn feature flags to allow accurate scroll events tracking #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32741a7
Enable reanimated/rn feature flags to allow accurate scroll events tr…
kmagiera Oct 2, 2025
d5fd301
Revert unwanted change
kmagiera Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion app.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,17 @@ const config: ExpoConfig = {
owner: EAS_APP_OWNER,
plugins: [
"expo-asset",
"expo-build-properties",
[
"expo-build-properties",
{
android: {
reactNativeReleaseLevel: "experimental",
},
ios: {
reactNativeReleaseLevel: "experimental",
},
},
],
"expo-web-browser",
"expo-router",
[
Expand Down
5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,5 +87,10 @@
"[email protected]": "patches/[email protected]",
"[email protected]": "patches/[email protected]",
"@expo/[email protected]": "patches/@expo%[email protected]"
},
"reanimated": {
"staticFeatureFlags": {
"DISABLE_COMMIT_PAUSING_MECHANISM": true
}
}
}
2 changes: 1 addition & 1 deletion src/app/(tabs)/(calendar)/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
type CurrentlyLiveSession,
} from "@/components/CurrentlyLive";

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as FlatList;
const AnimatedFlatList = Animated.FlatList;
Copy link
Contributor

@sync sync Oct 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@hirbod hirbod Oct 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That change will definitely not fix the issue, its more like this one optimized it (but its still happening randomly): c4509a4

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@hirbod hirbod Oct 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kmagiera can you elaborate on "has the throttling defaults set properly"? The only thing I see is that it sets scrollEventThrottle to 1 instead of 50 (and only if not overwritten).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So by just adding scrollEventThrottle={1} we can achieve the same with createAnimatedComponent

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah makes sense.


const HEADER_SCROLL_OFFSET = isLiquidGlassAvailable() ? 110 : 90;

Expand Down