-
Notifications
You must be signed in to change notification settings - Fork 359
Closed
Labels
bugSomething isn't workingSomething isn't working
Description
Current behavior
When rendering a FlashList with 731 items (365 before + 1 current + 365 after) and setting initialScrollIndex={365}, the current item is blank/white for one frame on the initial render, and then it appears correctly.
The items around it render normally.
This only happens on Android; iOS works fine.
android.mov
Expected behavior
The item at initialScrollIndex should render correctly from the very first frame, without a white flicker.
import React from "react";
import { Text, View } from "react-native";
import { useHeaderHeight } from "@react-navigation/elements";
import { Calendar } from "@/components/ui/Calendar";
import { SoftBlurBackground } from "@/components/SoftBlurBackground";
import { FadeGradient } from "@/components/FadeGradient";
import { useUnistyles } from "react-native-unistyles";
import { FlashList } from "@shopify/flash-list";
export default function CalendarScreen() {
const { theme, rt } = useUnistyles();
return (
<>
<FlashList
horizontal
data={Array.from({ length: 731 }, (_, i) => ({ id: String(i) }))}
keyExtractor={(it) => it.id}
snapToInterval={rt.screen.width / 3}
decelerationRate={"fast"}
renderItem={({ index }) => (
<View
style={{
borderWidth: 1,
width: rt.screen.width / 3, // or width (Dimensions.get("window")
height: 120,
backgroundColor: "pink",
}}
>
<Text>Index {index}</Text>
</View>
)}
initialScrollIndex={365}
/>
</>
);
}
Platform:
- iOS
- Android
Environment
React Native: 0.79.5
@shopify/flash-list: ^2.0.3
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working
Type
Fields
Give feedbackNo fields configured for issues without a type.