Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

react-native

People also ask

How do I scroll to the bottom of the page on Android?

Make sure the webpage is long enough so that the browser shows a scroll bar. Once there, to get to the bottom of the page, simply tap the top right corner on your device. In the screenshot below, I need to tap the area where the time is shown. The page will automatically scroll all the way down to the bottom.

What is scrollEventThrottle?

scrollEventThrottle If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is 0 , which results in the scroll event being sent only once each time the view is scrolled. Type. Default. number.

What is contentContainerStyle?

ScrollView contentContainerStyle defines the inner container of it, e.g items alignments, padding, etc. Follow this answer to receive notifications.

What's the difference between ScrollView and FlatList?

ScrollView renders all its react child components at once, but this has a performance downside. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off-screen to save memory and processing time.


For React Native 0.41 and later, you can do this with the built-in scrollToEnd method:

<ScrollView
    ref={ref => {this.scrollView = ref}}
    onContentSizeChange={() => this.scrollView.scrollToEnd({animated: true})}>
</ScrollView>

For anyone writing function component that can use hook,

import React, { useRef } from 'react';
import { ScrollView } from 'react-native';

const ScreenComponent = (props) => {
  const scrollViewRef = useRef();
  return (
    <ScrollView
      ref={scrollViewRef}
      onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })}
    />
  );
};

Use onContentSizeChange to keep track of the bottom Y of the scroll view (height)

https://facebook.github.io/react-native/docs/scrollview.html#oncontentsizechange

var _scrollToBottomY

<ScrollView
    onContentSizeChange={(contentWidth, contentHeight)=>{
    _scrollToBottomY = contentHeight;
    }}>
</ScrollView>

then use the ref name of the scroll view like

this.refs.scrollView.scrollTo(_scrollToBottomY);

Here is the simplest solution I could muster:

 <ListView
ref={ref => (this.listView = ref)}
onLayout={event => {
    this.listViewHeight = event.nativeEvent.layout.height;
}}
onContentSizeChange={() => {
    this.listView.scrollTo({
        y: this.listView.getMetrics().contentLength - this.listViewHeight
    });
}}
/>;