React native flatlist invert order

Question

I'm making an app using react native which has a chat feature. My FlatList is inverted, and everything is smooth as expected, except the order of messages, I want my chat (live every other chat) to show me the last messages, not the older ones.

Screenshot of App layout with inverted messages

here is my render's code:

<View style={styles.messages}>
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <FlatList
                ref={(c) => { this.flatList = c }}
                data = {this.props.messages}
                keyExtractor={item => item.id}
                renderItem = {({item}) => 
                  <MessageRow img={item.img}  
                  msg = {item.attributes} 
                  my_user_id={this.props.my_user_id}/>
                }
                inverted
              />  
     </TouchableWithoutFeedback>
</View>

Answer 1

You can try to set the props inverted of FlatList to be true

<View style={styles.messages}>
 <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <FlatList
            ref={(c) => { this.flatList = c }}
            data = {this.props.messages}
            keyExtractor={item => item.id}
            inverted={true}
            renderItem = {({item}) => 
              <MessageRow img={item.img}  
                msg = {item.attributes} 
                my_user_id={this.props.my_user_id}
              />
            }
            inverted
          />  
 </TouchableWithoutFeedback>
</View>

FYI, I have experience error in rendering after update messages if using messages.reverse() for the data.

Ref: https://facebook.github.io/react-native/docs/flatlist#inverted