Not rendering items when horizontal

[gabrielbarbosanascimento]

Current behavior

I'm implementing a horizontal ruler, so the user can set they height. But the initial render is empty (of the ruler steps). If I scroll slow, it stills, but when I scroll fast, they finally appear

<FlashList
          ref={ref}
          horizontal
          estimatedItemSize={STEP_SIZE}
          estimatedListSize={{ height: STEP_SIZE * 2, width: WIDTH }}
          bounces={false}
          keyExtractor={(item) => `${item}`}
          removeClippedSubviews={true}
          contentContainerStyle={{
            paddingLeft: WIDTH / 2 - 10,
            paddingRight: WIDTH / 2
          }}
          showsHorizontalScrollIndicator={false}
          data={values}
          onScroll={(e) => {
            onScroll(e.nativeEvent.contentOffset.x);
          }}
          onMomentumScrollEnd={(e) =>
            scrollToNearbyPosition(e.nativeEvent.contentOffset.x)
          }
          renderItem={({ index }) => (
            <View style={styles.step_container}>
              <View style={index % 5 === 0 ? styles.step : styles.step_small} />
            </View>
          )}
        />

Expected behavior

This doesn't happen when its vertically. I double checked the sizes (they are all fixed values)

To Reproduce

I recorded a video of this behavior

Screen_Recording_20230207_170855_Expo.Go_1.mp4

Environment

"@shopify/flash-list": "1.3.1"
"expo": "~47.0.7",

[frankbaele]

I had a similar issue with the horizontal mode of flashlist. Figured out that the initial length of my array was 0. This was my quick fix-> only render the flashlist if there are items. Hope this helps you out.

  if (values.length == 0) {
    return (
      <View>
        <Text>{'test'}</Text>
      </View>
    );
  }
  return <FlashList data={values} horizontal={true} />;

[gabrielbarbosanascimento]

@frankbaele I just tested it, your workaround is working like a charm. Thank you!

[mduc-dev]

I had a similar issue with the horizontal mode of flashlist. Figured out that the initial length of my array was 0. This was my quick fix-> only render the flashlist if there are items. Hope this helps you out.

  if (values.length == 0) {
    return (
      <View>
        <Text>{'test'}</Text>
      </View>
    );
  }
  return <FlashList data={values} horizontal={true} />;

i have same issue here and i try it, but don't work for me

[mduc-dev]

Does anyone have another solution?

[fortmarek]

Hey,

This is a specific variant of this issue where the initial height is 0 and then non-zero. I will close this a duplicate, for now, we recommend using the suggested workaround.