Hold Position of ScrollView when adding data

Question

I am trying to make it so whenever something new is rendered into a scroll view, the scroll view will stay put and not bump up and down. Right now if a new component is rendered in, the scrollview appears to be reset to 0.

Is there a way to stop this behavior, and hold position?

Right now for the scrollview I am using:

handleScrollt(event){
    this.scroll = event.nativeEvent.contentOffset.y
  }

handleSizet(width, height){
  if (this.scroll) {
    const position = this.scroll + height - this.height
    this.refs.sv.scrollTo({x: 0, y: position, animated: false})
  }
  this.height = height
}



  <ScrollView
      ref="sv"

       scrollEventThrottle={16}

       onScroll={this.handleScrollt.bind(this)}
  onContentSizeChange={this.handleSizet.bind(this)}

The issue with this is the scrollview will render briefly, before then scrolling to the correct offset. So it seems like theres a brief splash of the top of the screen

score 0 · Answer 1 · answered Oct 13 '19 at 18:44

you have to define a height for the scrollview.

If the scrollview is supposed to cover an entire View you can get the view's height by:

<View style={styles.contactView} onLayout={(event) => { 
  var contactViewY = event.nativeEvent.layout.y;
  this.setState({contactViewY: contactViewY})
}}>

and then give it to the scrollview

<ScrollView style={[styles.contactScroller, {height: this.state.contactViewY}]}>

Bear in mind that the onLayout method is called immediately once the layout has been calculated, so if the view's height changes later, this two lines of code alone won't update it.

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You should try maintainVisibleContentPosition.

Example:

<ScrollView
    {...props}
    maintainVisibleContentPosition={{
      minIndexForVisible: 0,
    }}
/>

From the docs:

maintainVisibleContentPosition

When set, the scroll view will adjust the scroll position so that the first child that is currently visible and at or beyond minIndexForVisible will not change position. This is useful for lists that are loading content in both directions, e.g. a chat thread, where new messages coming in might otherwise cause the scroll position to jump. A value of 0 is common, but other values such as 1 can be used to skip loading spinners or other content that should not maintain position.

Hold Position of ScrollView when adding data

2 Answers2