Nativebase: Can't access the ScrollView Component created in Content Component

[jakewtaylor]

Using a <Content /> component renders a ScrollView but I can't seem to access that ScrollView in order to call functions like scrollTo(0).

Maybe I'm missing something?

[himanshu-satija]

Content now renders KeyboardAwareScrollView instead of RN ScrollView. Use this instead of scrollTo(0). We'll soon add this to our docs.

[sankhadeeproy007]

please add ._scrollview to your ref.
@SupriyaKalghatgi needs to be documented.

[soukupl]

I just run to the issue when I needed to scroll the <Content> contents...

this._content._scrollview.scrollToPosition(0, 0, false); didn't work with error that _scrollview is undefined (but I can see it in the source code of <Content> component on git)...
this._content._root.scrollToPosition(0, 0, false); is working as expected...

[nobady90]

Hi @soukupl I hope you can help me..
I tried both this._content._scrollview.scrollToPosition(0, 0, false); and this._content._root.scrollToPosition(0, 0, false); but in my situation it always returns undefined.

I would like to use it inside the FAB:

[...]
 scrollTop() {
    this._content._scrollview.scrollToPosition(0, 0, true);
  }
  render() {
  return (
    <Container`` style={styles.container}>
    <Fab
      direction="up"
      position="bottomRight"
      style={{ backgroundColor: '#005f99' }}
    >
    <Button onPress={this.scrollTop()}>
      <Icon name="arrow-up" />
    </Button>
    </Fab>
    <GlobalHeader backScreen={'News'} />
    <Content padder ref={c => (this.component = c)}>
  [All my contents etc..]

Thank you so much!

[soukupl]

Hi @nobady90,
I don't remember why I did that, but since I moved my content loading logic to React's Context, I'm using this line of code to scroll back to top after content update...

setTimeout(() => { global.appContent._root.scrollToPosition(0, 0, false); }, 50);

And in my main App.js, I have this REF set on the main content wrapper:

<Content ref={c => { global.appContent = c; }}> ... </Content>

So... global.appContent is REF (stored in global space) to the main wrapper and I'm asking the <Content> component to scroll to 0,0 (without animation - false).

The <Content> is from native-base :)

[rkrules]

@soukupl That worked like charm ! Thanks so much. That's the simplest solution that worked and I tried quite a few things.