scrollToBottom

[ssmlee04]

Is there a way to implement a scrollToTop method? I can scrollTo(0) to get to the bottom but could you advice how to get to the top? Thanks.

[aubsw]

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

Recent versions of RN have this built in. However, it doesn't seem to work with react-native-invertible-scroll-view. Anyone know why?

[ide]

The method call probably needs to be forwarded to the underlying ScrollView ref, but I'm not totally sure of that.

[aubsw]

Thanks for the tip. It took me a while to figure out what you meant, but I got it to work with a ListView on Android and iOS.

Here's an idea of how:

class SuperInvertedScroll extends Component {
  // ...
  scrollTo(options) {
    this._invertibleScrollViewRef.scrollTo(options);
  }

  // note how we have to go to ._scrollComponent to access scrollToEnd
  scrollToEnd(options) {
    this._invertibleScrollViewRef._scrollComponent.scrollToEnd(options);
  }
  renderScrollComponent(props) {
    return (
      <InvertibleScrollView
        {...props}
        {...this.props.invertibleScrollViewProps}
        ref={component => { this._invertibleScrollViewRef = component }}
      />
    );
  }

  render() {
    return (
        <ListView
          style={{flex:1}}
          {...this.props.listViewProps}
          dataSource={this.state.dataSource}
          renderScrollComponent={this.renderScrollComponent}
        />
    );
  }
}

And now anyone with a ref to an instance of SuperInvertedScroll can simply call refToSuperInvertedScrollInstance.scrollToEnd()!

[ide]

@aubreywahl That looks right, would you want to send a PR that adds a scrollToEnd method to InvertibleScrollView so that users of this component don't have to write _invertibleScrollViewRef._scrollComponent and can directly call _invertibleScrollViewRef.scrollToEnd()?

[aubsw]

Sure @ide I can try to whip something up this weekend

[nickcharles]

Not clear if this has been addressed (looks like it hasn't) but I believe this should work on my FlatList implementation of this component: https://github.com/nickcharles/react-native-invertible-flat-list

Admittedly I haven't actually tested it but I think it should work. If not, happy to work on it or accept PRs.

[behi1989]

Hi, How do I conditionally check the end of list? for example

if(this.ref.InvertibleScrollView.scrollTo(0) === 0) { 
     ...
     ... 
}

I need to check the end of the list But I didn't find a solution.