Inverting a FlatList

Question

I'm currently working on a react native app for android, and have access to the new FlatList. It has some very needed features. However, my listview is inverted using the react-native-invertable-scroll-view. This does not seem to work properly with FlatList. The scrolling is not properly reversed.

Does anyone know how to invert a FlatList? Or perhaps how to load a Flatlist, and then force a scroll to the bottom without the user noticing it? My own attempts to force a scroll down are often delayed.

Answer 1

This now comes out of the box in FlatList!

Just use:

<FlatList   inverted   data=...   renderItem=... /> 

This causes the first item to appear at the bottom of the list, and the list starts at the bottom, showing the first item.

If you need the last item to show at the bottom, just reverse the array that you are providing in the data prop.

Answer 2

render() { const messages = this.props.messages.reverse();  return (   <FlatList     renderItem={this._renderItem}     data={ messages }     keyExtractor={this._keyExtractor}     style={{  transform: [{ scaleY: -1 }] }}   /> ); }  _keyExtractor = (item, index) => item.id+''+index;  _renderItem = ({item}) => ( <View style={{ transform: [{ scaleY: -1 }]}}>   <ChatItem /> </View>) 

Enjoy it)