CODEWITHSUNDEEP
reactjsreact-native
Ahad Wasim
Ahad Wasim

Reputation: 1

Position screen on last item in FlatList on Application Load

I am currently building a chat application in React Native and I am trying to position the screen onto the last message when the messagelist is loaded. The component that this view is built with is FlatList and I know it provides us with the scrollToIndex and ScrollToEnd functionality right out of the box but that does not seem to work well when calling it inside of componentDidMount. In addition to that, the scrolling functionality seems to be another hurdle to just get it working.

I also tried using initialScrollIndex property and passed in the last index as the prop. It actually seems to work for a split second but the screen then snaps back to the first index. I am not sure why that is. Here is my code below:

  <ScreenWrapper>
    <FlatList
      style={{
        width: WIDTH,
        marginLeft: -20,
      }}
      data={messages}
      initialScrollIndex={messages.length - 1}
      renderItem={this.renderItem}
      keyExtractor={item => item.id}
      getItemLayout={this.itemLayout}
    />
  </ScreenWrapper>

Upvotes: 0

Views: 3014

Answers (1)

Rajat Gupta
Rajat Gupta

Reputation: 1954

  • Use flatlist scrollToIndex function .call that function in componentDidMount using ref.

<ScreenWrapper>
    <FlatList
    ref={"flatlist}
      style={{
        width: WIDTH,
        marginLeft: -20,
      }}
      data={messages}
      renderItem={this.renderItem}
      keyExtractor={item => item.id}
      getItemLayout={this.itemLayout}
    />
  </ScreenWrapper>

componentDidMount= ()=>{
   this.refs["flatlist"].scrollToIndex(message.length-1)
}

Upvotes: 1

Related Questions