React Native - FlatList adds an unwanted View

19 views Asked by At

I am using the FlatList component to render a horizontal slider of 5 items, per partial code below:

const EACH_WIDTH = 100;

const Slider = ({
    //...
}) => {
    const getItemLayout = (data, index) => ({
      length: EACH_WIDTH,
      offset: EACH_WIDTH * index,
      index,
    });

    return (
        <FlatList
            data={items}
            getItemLayout={getItemLayout}
            horizontal
            keyExtractor={keyExtractor}
            renderItem={renderItem}
            initialNumToRender={initialNumToRender}
            maxToRenderPerBatch={4}
            windowSize={6}
        />
    );
};

export default Slider;

Once rendered, I noticed that in addition to the 5 rendered items, there is always a sixth View component that is rendered in the end.

As you can see from the screenshot of my debugger, this is problematic as it adds an unnecessary space to my slider component.

enter image description here

This additional View component either takes the preset EACH_WIDTH of 100 or a multiple of it.

More importantly, if I change the windowSize prop to {7} instead of the current {6}, then the issue is solved(View component no longer rendered). Similarly, if I keep everything as is, and remove the getItemLayout prop, the issue is also solved.

Do you know why does it behave as such? I am hoping to understand any underlying cause, instead of just playing around with the windowSize prop value for a fix each time.

Thank you,

0

There are 0 answers