[RTL] Flash-list shows blank space on scroll when numColumns => 2

[isubhann]

Current behaviour:

I have added 2 columns Flash-list in my application. Everything is working great accept there are few issues on RTL mode. The first row is having only one column thus single ad is shown while the same data is working perfect in LTR mode.

Expected Behaviour:

Each row should contain 2 ads in each of their column and on scroll there shouldn't be any blank space issue

Platforms:

Both Android & iOS

My code:

<FlashList {...flatlistProps} key={listType} // @ts-ignore data={searchItems} estimatedItemSize={flashItemSize} // In 2 column case this is calculated through adding card container width and paddings which is 248 estimatedListSize={{ height: flatlistHeight, width }} // This setting will remove the white jerk when loading end or change the view type contentContainerStyle={Alignment.PHmedium} ListEmptyComponent={emptySearchList} alwaysBounceVertical={false} keyExtractor={flatlistKey} // (item: ISearchAdItemsCard, index: number) =>${item?.id}_${index}, []) ItemSeparatorComponent={itemSeparator} renderItem={renderItem} refreshControl={refreshControl} onEndReached={nextPageCall} onEndReachedThreshold={2} ListFooterComponent={<Spinner style={spinnerStyle} animating={fetching} />} />

Here is what my render Item component looks like.

<AdCard {...item} key={swiperKey} swiperKey={swiperKey} swipeAble imgContainer={styles.gridImage} cardStyle={styles.gridCardStyle} textContainer={styles.textContainer} swiperWidth={(width - 25) / 2 - 25 / 2} // width is screen width />

[isubhann]

To resolve the issue where the first row has only one card when in RTL mode, you can add an empty element as the first element in the data array. This will ensure that the first row always has two elements. e.g. My data prop will be like

data={isRTL ? [{}, ...searchItems] : searchItems}
Through this I will render an empty fragment in my render Item when index will be equal to 0

This did resolve the first row single ad issue but on scroll up & down produce a blank space which is not present in LTR mode

[marwand]

Please try using disableAutoLayout={isRTL} on your flash list

[isubhann]

@marwand your suggestion pretty much resolve the issue but disabling auto layout seems to disable itemSeparatorComponent as well. I have tried other solutions like adding margin to my renderItem component or adding separator of my own by wrapping renderItem component in a View and adding another view below my card component containing padding and other style props but no progress

[marwand]

What is your separator component? I don't see anything in the pictures but whitespace between the cards. Are you using the separator component to render whitespace between the cards?

[isubhann]

@marwand Yes I am utilising itemSeparatorComponent to add space between cards and here is the code for that
const itemSeparator = useCallback(() => <View style={{ marginBottom: 20 }} />, [])

[marwand]

Try adding the margin to the renderItem component. Worked for me.

[HasanElfalt]

is there any solution for this problem ?

[HasanElfalt]

it worked with me when I am using disableAutoLayout={I18nManager.isRTL} and flashListContainer takes width in percentage (for me it is important to use just width because i am using a horizontal flashList

[isubhann]

For me it worked when I set disableAutoLayout={I18nManager.isRTL}, estimatedListSize undefined in case numOfColumns is 2 and recalculated the estimatedItemSize by including separator height in it as well. Marking this issue as closed 🎉