Skip to content

FlashList on Android: item at initialScrollIndex flickers white for one frame on initial render #1887

@andreavrr

Description

@andreavrr

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

⚠️ Additional observation: If the FlashList is rendered in the first tab of the dashboard (shown immediately when the app opens), the issue does not occur. But if the same list is placed in a different tab, the flicker does appear.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions