React-native: Flatlist not supported for RTL

[DanGDroid]

• [x] I have reviewed the documentation
• [x] I have searched existing issues
• [x] I am using the latest React Native version

<Flatlist> horizontal true component does not work properly on Rtl devices, it renders the items again and jumps to head of list. impossible to use

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 8.2.1
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.7.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
react: 16.3.2 => 16.3.2
react-native: 0.55.0 => 0.55.0

Steps to Reproduce

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
  I18nManager
} from 'react-native';

const getList = () => {
  let list = []
  for (i=0;i<100;i++)
    list.push({title:i,backgroundColor:getRandomColor()})
  return list
}

export default class AutoLinkDemo extends Component {
  constructor(props){
    super(props)
    this.state={
      data:getList()
    }
  }
  render() {
    return (
      <View style={styles.container}>
      <Text style={{fontWeight:'bold',fontSize:60}}>{`is RTL? ${I18nManager.isRTL}`}</Text>
      <View style={styles.list}>
        <FlatList 
          data={this.state.data}
          contentContainerStyle={{alignItems:'center', justifyContent:'center'}}
          renderItem={({ item }) => this.renderCardItem(item)}
          keyExtractor={(item, index) => index}
          horizontal
        />
      </View>
      </View>
    )
  }
  renderCardItem(item){
    return(
      <View style={[styles.cardItem,{backgroundColor:item.backgroundColor}]}>
        <Text style={{fontWeight:'bold',fontSize:40}}>{item.title}</Text>
      </View>
    )
  }
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    alignItems:'center', justifyContent:'center',
  },
  list: {
    height:250,
    backgroundColor: 'yellow',
    alignItems:'center', justifyContent:'center',
  },
  cardItem:{
    height:200,
    width:250,
    alignItems:'center',
    justifyContent:'center',
    margin:5,
  },
});

AppRegistry.registerComponent('AutoLinkDemo', () => AutoLinkDemo);

Expected Behavior

<Flat list should adopt to relevant direction asI18nManager.isRtl` returns

Actual Behavior

<Flatlist> horizontal true component does not work properly on Rtl devices, it renders the items again and jumps to head of list. impossible to use

if i add attribute legacyImplementation={true} it works fine but as said in documents i doent know what traits of Flatlist i loose.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[DanGDroid]

not fixed yet on RN 0.56
is this issue being handled by some one?

[DanGDroid]

not fixed on RN 0.57

[tarouboy]

still experiencing this error (RN 0.55.4).
have to disable RTL if using horizontal flatlist / scrollview.

If the list data / content doesn't update, it works fine.
Otherwise everytime the inner content updated, the list jump back to the top,
and onEndReached event will keep firing as well.

Using legacyImplementation={true} helps. But you can't use scrollTo, onViewableItemsChanged or other interactive functions, because it will generate errors.

Can someone look into this issue, please?

[DanGDroid]

@shergin @javache @hramos @sahrens
still not fixed,
can some one please handle this bug for the sake of millions users that use RTL languages

[hramos]

@DanGDroid let me know if there's a pull request we can take a look at.

[adirzoari]

same issue. any solution?

[DanGDroid]

no solution but to do it your own, i implemented a lazy loader of ScrollView but does not have all the benefits of a virtualised list

[sahrens]

What about disableVirtualization={true}? Don't have much time to look at this now - would love a PR :)

[adirzoari]

@sahrens I tried now, it's not working. it's still from left to right.

[FadiAboMsalam]

any update on this ?? still facing this only in RTL react-native version 0.57.3

[FadiAboMsalam]

is there any plan to fix the horizontal flatlist for RTL ?

[sahrens]

We have an internal task tracking this: T42861459

[FadiAboMsalam]

@sahrens would please let me know what is the status of this internal task is there going to be any solution soon ?

[hramos]

While we are tracking this internally, this issue is still up for grabs. If anyone from the community is interested in providing a pull request, please go ahead.

[sammy-SC]

Before this issue is resolved a quick workaround for now is to set initialNumToRender to number of items to be rendered.

[YazeedAsaad]

anyone found a solution to this yet ? as @sammy-SC said i tried initialNumToRender but it causes huge performance issues with a large list

[ajithes111]

+1

[ENategh]

adding inverted={true} just worked for me:
<FlatList inverted={true} horizontal={true} />

[BeshoyEkram]

+1

[matinzd]

There is another problem with scrollToItem! It works perfectly on iOS but it will get lost in android!

[amusbahisa]

+1

[mm7mod]

What about disableVirtualization={true}? Don't have much time to look at this now - would love a PR :)

the only solution that worked for me, but in the react-native documentation it says :

Deprecated. Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes.

not sure if there should be a better solution for this

[DanGDroid]

What about disableVirtualization={true}? Don't have much time to look at this now - would love a PR :)

the only solution that worked for me, but in the react-native documentation it says :

Deprecated. Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes.

not sure if there should be a better solution for this

this is only a work-arount
we should expect a buildin solution.

[blazk0]

Having the same issue here, its open since 2018 ..

[MoeMamdouh]

What about disableVirtualization={true}? Don't have much time to look at this now - would love a PR :)

yes working, but loose the performance

[MoeMamdouh]

this library helped me in this issue
https://github.com/Flipkart/recyclerlistview

[FatemeMirzaeii]

It's 2020!
any updates on this issue?

[dagan-arbox]

2020 is a bad year, but may be this will get a fix?!

[mehthabux]

Any luck ?

[arasrezaei]

Please fix this issue it's really anoying!

[mm7mod]

30 years later : hey react native the issue still exits any luck , it has been open for 30 years now