CODEWITHSUNDEEP
react-native
Vishal Goyal
Vishal Goyal

Reputation: 21

how to make flatlist component of react-native scroll to bottom when its first rendered?

I am trying to build a Chat Application using react-native and using flatlist to display the messages. And i want my list to stay at bottom always can anyone plzz suggest me a solution.

Upvotes: 1

Views: 5803

Answers (4)

serene
serene

Reputation: 1646

Here, you can do this -

const  messageData  = this.props.convo
    return (
      <View style={{ flex: 1 }}>

            <FlatList 
              inverted={-1}
              style={styles.list}
              extraData={this.props}
              data={messageData}
              keyExtractor = {(item) => {
                return item.id;
              }}
              renderItem=   
              {this.renderItem}           
              />

after that, you will get an inverted list which will have the topmost elements in the list, so for fixing this you can add reverse() in your flatlist data or in your reducer. Like this- data={messageData.reverse()} or in reducer return { ...state, chats: action.payload.reverse() }

Upvotes: 0

Jigar
Jigar

Reputation: 1374

the simplest way to do this is to use inverted props in the flatlist this allow us to render list up-side-down

for more ref. vidit https://facebook.github.io/react-native/docs/flatlist#inverted

Upvotes: 0

QuokMoon
QuokMoon

Reputation: 4425

You can give a refto FlatList and access certain flatList properties that can scroll at particular position. Here below resolution should work.

setTimeout(() => this.refs.flatList.scrollToEnd(), 200)

ScrollToEnd React native

Upvotes: -1

Fabricioraphael
Fabricioraphael

Reputation: 195

Basically you need to use scrollToEnd on flatList..

First: create a flatList reference with:

ref={ (ref) => { this.myFlatListRef = ref } }

Second: add onContentSizeChange listener on flatList

onContentSizeChange={ () => { this.myFlatListRef.scrollToEnd({animated:true}) } }

Third: add onLayout listener on flatList for scroll to bottom when keyboard is showed.

onLayout={ () => { this.myFlatListRef.scrollToEnd({animated:true}) } }

eg:

<FlatList
    ref={ (ref) => { this.myFlatListRef = ref } }
    onContentSizeChange={ () => { this.myFlatListRef.scrollToEnd({animated:true}) } }
    onLayout={ () => { this.myFlatListRef.scrollToEnd({animated:true}) } }
    data={this.state.messages}
    renderItem={ ({item}) => <Item data={item} /> }
    />

Upvotes: 10

Related Questions