Reset / scrollTo for ParallaxScroll

[donovantc]

Hi again @z4o4z,

Are there any plans to make any methods available, similar to ScrollView, such as .scrollTo. Therefore it would be possible to maintain a reference to ParallaxScroll component and then execute the scrollTo method.

I am mostly interested in this, so that I can reset the ParallaxScroll to the top programatically without the user having to scroll back to the top. Any ideas?

Cheers,

[z4o4z]

Hi @donovantc!
You can use new propsinnerRef to get a reference to the scrollable component and use .scrollTo on this ref.

Example:

render() {
   // some code ...
  return (
    <ParallaxScroll
      {...props}
      innerRef={(ref) => (this.parallaxScroll = ref)}
    >
      {children}
    </ParallaxScroll>
  )
}

someMethod() {
  this.parallaxScroll.scrollTo({ x: 0, y: 0, animated: true });
}

Note innerRefavailable in 1.3.0

[donovantc]

Hi @z4o4z!

Cool addition, just what I was looking for. But I seem to run into an error. I have updated to 1.3.0 and added the ref prop, like so:

innerRef={(el) => (this.parallaxScroll = el)}

But upon initialising the component, I receive the following error in the console:

If I remove the innerRef prop, it works as before.

Any idea? I briefly checked your commit and on line 178 of the src/index.js you pass ref._component. Perhaps _component is not the correct component?

Thanks for the quick responses btw and let me know if you want me to check something on my side.

[z4o4z]

@donovantc looks really strange, which version of React and RN do you use?

[donovantc]

I did a bit of digging and I found that at some point it tries to access ref._component but ref is undefined.

This might be due to my RN version which is 0.44 but at the moment, but unfortunately upgrading is not an option.

So, if I extend the check in your ref function to:

if (typeof this.props.innerRef === 'function' && ref && ref._component)

it works as expected.

What do you think about this? I don't think the extra checks will hurt. If you want, I could do a PR?

[z4o4z]

@donovantc thanks for your research! PR will be greate!

[z4o4z]

@donovantc v1.3.1 available in the npm