Blank screen when scrolling fast

[shop-fluencer]

Hello,

WhatsApp.Video.2022-05-25.at.22.41.27.mp4

Why I get blank screen when scrolling fast ?

Code:
Main

const RecyclerlistView = () => {
  const [ss, setSS] = useState(true);
  const [datas, setDatas] = useState(productListWithCategoryMock);

  const handleEnd = () => {
    console.log('S')
    setDatas(prev => [...prev, ...productListWithCategoryMock2]);
  };

  const data = React.useMemo(() => {
    return new DataProvider((r1, r2) => {
      return r1 !== r2;
    }, index => {
      return 'index' + index;
    });
  }, []);

  const dataprovider = React.useMemo(() => {
    return data.cloneWithRows(datas);
  }, [data, datas]);

  const layoutProvider = new LayoutProvider((i) => {
    return dataprovider.getDataForIndex(i).type;
  }, (type, dim) => {
    switch(type) {
      case 'CATEGORY':
        dim.height = 50;
        dim.width = width;
      break;
      case 'PRODUCT':
        dim.height = 235;
        dim.width = width / 2 - 0.0005
      break;
      default:
        dim.height = 0;
        dim.width = 0;
      break;
    }
  });

  const handlePress = () => {
    VibrateLight();
    setSS(!ss);
  };

  const rowRenderer = (type: any, data: any) => {
    return <MemoList type={type} data={data} />
  };

  return (
    <View style={{flex: 1}}>
      { datas.length > 0 &&
      <RecyclerListView 
        dataProvider={dataprovider}
        layoutProvider={layoutProvider}
        rowRenderer={rowRenderer}
        style={{flex: 1}}
        onEndReached={handleEnd}
        scrollViewProps={{showsVerticalScrollIndicator: false}}
      />
      }
    </View>
  )
}

Memo List

const Item2 = memo(({ name }: IRlvRenderProductProps) => (
  <Text style={s.category_title}>{ name }</Text>
), isEqual2)

const Item = memo(({ id, name, price, photos, onLongPress }: IRlvRenderProductProps) => (
  console.log(Math.random()),
  <Pressable onPress={() => onLongPress({ id, name })} delayLongPress={80} style={{padding: 8, paddingVertical: 12, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderRadius: 8, margin: 10}}>
    <ImageSlider photos={photos} />
    <Text style={s.name} numberOfLines={1}>{ name }</Text>
    <Text style={s.price}>{price}€</Text>
  </Pressable>
), isEqual)

const MemoList = ({ type, data }: ) => {
  if(type === 'CATEGORY') {
    const { name } = data.item;
    return (
      <Item2
       name={name}
      />
    )
  } else {
    const { id, photos, name, price } = data.item;
  return (
    <Item
      id={id}
      name={name}
      photos={photos}
      price={price}
    />
  )
  }
}

[siddharth-kt]

Try updating yout renderAheadOffset prop on recyclerListView to 1000 or 2000.

[rassemdev]

renderAheadOffset

Although It fixes the problem, but i think it is a bug. What if some list exceeded 2000 pixel! Then it will show blank again.