Is it possible to keep a ScrollView scrolled to the bottom?

Question

For a chat-like app, I want to keep a ScrollView component scrolled to the bottom, because newest messages appear under the older ones. Can we adjust the scroll

Answer 1

You can invert the scroll/list view using the react-native-invertible-scroll-view module, then simply call ref.scrollTo(0) to scroll to bottom.

Install the module:

npm install --save react-native-invertible-scroll-view

Then import the component:

import InvertibleScrollView from 'react-native-invertible-scroll-view';

Then use the following JSX instead of a ScrollView:

 { this.scrollView = ref; }}
    onContentSizeChange={() => {
        this.scrollView.scrollTo({y: 0, animated: true});
    }}
>
    { /* content */ }

This works because react-native-invertible-scroll-view flips the entire view's content. Note that the view's children will also render in the opposite order to a normal view - the first child will appear at the bottom.