How to load a ScrollView from the bottom

August 2, 2022

I have the following ScrollView. I would like it to initially load content from the bottom, showing the last elements first so that you first scroll from bottom upwards :

<ScrollView
  vertical
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}>
  {chatMsgs.map(ChatMsg => (
    <ChatMsg key={Math.random()} />
  ))}
</ScrollView>

How can I go about implementing this scenario?

I have tried display: 'flex', flexDirection: 'column', alignItems: 'flex-end', but to no success. I did not expect it to work anyway.

Thank you all in advance.

>Solution :

You can use contentOffset props and set arbitrary y value.

 <ScrollView
  vertical
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
  contentOffset={{x: 0, y: 9999}} />
  ))}>
  {chatMsgs.map(ChatMsg => (
    <ChatMsg key={Math.random()} />
  ))}
</ScrollView>