CODEWITHSUNDEEP
javascriptiosreact-nativereact-native-pages
jimmyruby
jimmyruby

Reputation: 73

react-native-pages scrollToPage is not a function

I'm using react-native-pages to allow the user to swipe between screens, but I need to also swipe between screens programmatically.

I've tried using the scrollToPage method, 1. but I'm not sure how to properly implement it and 2. I am getting an error that says it is not a function.

I'm defining a reference like this:

this.pages = React.createRef();

Then in the renderer:

<Pages indicatorColor={'green'} indicatorOpacity={0.3} indicatorPosition={"bottom"} ref={ref => { this.pages = ref; }} >

Then calling: this.pages.scollToPage(2) in a method after rendering

Any advice on how to get this to work would be great

Upvotes: 0

Views: 341

Answers (2)

Jack Martin
Jack Martin

Reputation: 126

Just Like This

  1. define your ref(also you can set it in your constructor() function)
  2. link the ref with your Pages Tag (ref={this.refblablabla})
  3. in your current class, you can do whatever you want when you need the ref.(do not forget the ref.current is object you want not the ref its self)

if you need a snap of code, just let me know.

Upvotes: 1

hong developer
hong developer

Reputation: 13926

Definition of the scrollToPage function.

scrollToPage(page, animated = true) {
    let { horizontal } = this.props;
    let { [horizontal? 'width' : 'height']: base } = this.state;

    if (animated) {
      this.scrollState = 1;
    }

    if (this.mounted && this.scroll) {
      this.scroll.scrollTo({
        [horizontal? 'x' : 'y']: page * base,
        animated,
      });
    }
  }

Upvotes: 0

Related Questions