I'm trying to build a horizontal Flatlist that supports RTL. Still, for some reason, the flatlist horizontal expansion direction is opposite to the data render direction (if my words make any sense). Here is my implementation:
I didn't provide the ScrollIndicator. Yes its bugged also, but I think it's a minor issue that can be fixed if the flatlist is fixed
<FlatList
data={
I18nManager.isRTL
? [...recentTransactions].reverse()
: recentTransactions
}
horizontal
snapToInterval={CARD_WIDTH}
showsHorizontalScrollIndicator={false}
keyExtractor={item => String(item.id)}
contentContainerStyle={{
paddingRight: px(59),
}}
renderItem={({item}) => (
<RecentTransaction
name={item.beneficiaryName}
transactionNumber={item.beneficiaryAccount}
amount={item.amount}
status={item.status}
date={item.transactionDate}
onPress={() => {
navigate(item.id);
}}
/>
)}
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {x: scrollX}}}],
{useNativeDriver: false},
)}
scrollEventThrottle={16}
/>
i read suggestions to reverse my transactions or use inverted falg in react native but none of them working for me so far. can someone help me detect the issue?