[FlatList] Horizontal FlatList can't scroll to rest of content when RTL is true for localization

Description

Localizing for a Right-to-Left language, Farsi, causes ListViews to reverse in a way that the scrollview can’t scroll to the rest of the content. Here is a GIF of its behaviour -

Reproduction

An ordinary horizontal Listview will suffice. See mine below.

<ListView
          dataSource={this.dataSource}
          renderRow={this._renderRow.bind(this)}
          contentContainerStyle={styles.scrollViewStyle}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          automaticallyAdjustContentInsets={true}
          removeClippedSubviews={true}
          enableEmptySections={true}
  />

const styles = {
scrollViewStyle: {
        justifyContent: 'flex-end',
        flexDirection: 'row',
        alignItems: 'center',
    }
}

https://gist.github.com/annelorraineuy/7998b0275ba2b255366a288bb87aca7a

Solution

Provide support for how to fix Listview when in RTL for localization.

Additional Information

• React Native version: 0.39.2
• Platform: Android (did not test on iOS)
• Development Operating System: MacOS
• Dev tools: Webstorm IDE and Chrome debugging.

Probably noteworthy to also say I’ve tried using https://github.com/exponent/react-native-invertible-scroll-view but I still can’t scroll to the rest of the content. It only looks reversed but the behaviour is the same.

Will appreciate any leads or advice : (

[skmail]

I came up with this approach on small datasets, any issues with it?

I18nManager.allowRTL(true);
I18nManager.forceRTL(true);

const FlatListProps = (data = []) => {
    const props = {
        style: {},
        data: data
    };

    if (I18nManager.isRTL && Platform.OS === 'android') {
        props.style.flexDirection = 'row-reverse';
        props.data = props.data.reverse()
        props.inverted = true
    }

    return props
}

<FlatList
     horizontal={true}
     keyExtractor={(item, index) => index}
     renderItem={this.renderItem}
     {...FlatListProps(this.props.data)} />

[DanGDroid]

for large data(over 30 items) ListView nor FlatList do not function with RTL