React-native: How can i scrollTo Bottom

[wangzhe1995]

ScrollView how can i scroll to the bottom

[ide]

Compute the y offset from the content size and viewport size, and call scrollTo.

[wangzhe1995]

but i can i get viewport size and content size ?

[ide]

Look in the source code to learn how the UIManager.measureX methods are used. You can measure the scroll view and its content view. If you are using a ListView you will need to write your own ListView that measures the height of every single row to compute the content size.

[bridgetdeasy]

Where do you call the scrollTo method?

[ide]

@bdeezz, something like:

render() {
  return <ScrollView ref="scrollView" />;
}

onSomeEvent() {
  this.refs.scrollView.scrollTo(0); // will scroll to the top at y-position 0
}

[Obooman]

@wangzhe1995 Scroll to bottom of ScrollView in React Native see this .

[winterbe]

I came up with this solution.

[yzsolo]

there is a component for listView to scroll to top, hope it is uesful to someone: scrolltotop

[rbndg]

One way is to perform a transform on the ScrollView and the inner elements.
This allows you to to use the scrollTo(0) function

<View ref="container"
  style={{transform: [{rotate: '180deg'}] }} >
>
<ScrollView/>
</View>

[fritx]

Try this out: https://github.com/fritx/react-native-auto-scroll
Works fine with both iOS and Android (with adjustResize config'd).

// android/app/src/main/AndroidManifest.xml
       <activity
          android:name=".MainActivity"
          android:label="@string/app_name"
 +        android:windowSoftInputMode="adjustResize"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

[VladPolynko]

Try this:

 <ScrollView ref="scrollView"
             onContentSizeChange={(width,height) => this.refs.scrollView.scrollTo({y:height})}>
 </ScrollView>

[septemptus]

@VladPolynko this seems to work fine for me on Android, but on iOS it scrolls below the ScrollView content (as if there was no lower boundary for the ScrollView) (RN 0.38.0)

[mkdotcom]

Same issue than @septemptus

[stevenyap]

Same issue as @septemptus
ScrollView in iOS has no lower boundary and gives a bigger height.
My shortcut is to give a manual offset for iOS-only.

[mstmustisnt]

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

[jwebcat]

scrolltoend method still scrolls past the end of the ScrollView on IOS.

• ReactNative v0.47.2

[nickgrealy]

This solved it for me...
https://stackoverflow.com/questions/29310553/is-it-possible-to-keep-a-scrollview-scrolled-to-the-bottom

[sturmenta]

onSomeEvent = () => {
this.scrollView.scrollTo({ x: 0});
}

This worksssss