scrollToIndex is not working in RTL FlatList React-Native

Question

I have Horizontal FlatList & now I changed phone language to Arabic (RTL). scrollToIndex() is not working in RTL, without RTL it's working fine as expected. Any suggestions?

FlatList

<FlatList
    style={myStyles.flatListStyle}
    horizontal={true}
    data={this.props.dataForFlatList}
    renderItem={this.renderItem}
    ref={(ref) => { this.flatListRef = ref; }}
    keyExtractor={item => item.id.toString()} />

renderItem function on Press() am passing item id

this.flatListRef.scrollToIndex({ animated: true, index: id }); // Working fine without RTL - NOT WORKING WITH RTL

Thanks in advance.

Cloud you please provide a demo on e.g. https://snack.expo.io/? — Tim, Nov 19 '19 at 08:13

score 2 · Answer 1 · answered Mar 28 '22 at 06:53

Found this solution.

flatListRef.current.scrollToIndex({
          index: I18nManager.isRTL && Platform.OS === "ios" ? list.length - 1 - index : index,
        });

For some reason ios scrolls to the opposite value in RTL localization. That is, when choosing the latter to the first. When choosing the penultimate to the second and so on.

score 0 · Answer 2 · answered Nov 19 '19 at 09:01

0

If you are scrolling outside of the render window you need to specifying the getItemLayout props

answered Nov 19 '19 at 09:01

Hayk Shakhbazyan

242
2
15

I am clicking on item Inside FlatList, not scrolling outside. Please read the question again. – Srihari Nov 21 '19 at 07:07
Could you provide updated code with `getItemLayout` ? It should work with`onClick` event – Hayk Shakhbazyan Nov 21 '19 at 09:34
@Srihari Did you found a solution ? – Hayk Shakhbazyan Dec 10 '19 at 12:31
No, I guess its issue with FlatList library. Facebook dev team have to fix that. – Srihari Jan 02 '20 at 05:32

scrollToIndex is not working in RTL FlatList React-Native

2 Answers2