How to hook viewpager swipe event up to update state react-native android?

Question

My js is abit rusty and im abit confused about how to update the state after a swipe event in my react-native android app. Im trying to hookup this ViewPager based on the official ViewPager and i just want to get the pagenum to update when the slider slides to that page. Any help on how?

The slider itself works, but im confused about how to update state based on events or callbacks. What i really wish to do is update the background color styling of the parent view after each page slide.

Welcome Page

import {IndicatorViewPager, PagerDotIndicator} from 'rn-viewpager';

var AboutPage1 = require('../about/AboutPage1');
var AboutPage2 = require('../about/AboutPage2');

class WelcomeScreen extends Component {

    state = {
        pagenum: 0
    };

  render() {
        <View >
            // the parent view i wish to change bgcolor
            <View style={{flex:1}}>
                // this is the viewpager
                <IndicatorViewPager
                        indicator={this._renderDotIndicator()}
                        onPageScroll={this.onPageScroll}
                        onPageSelected={this.onPageSelected}
                        onPageScrollStateChanged={this.onPageScrollStateChanged}
                        ref={viewPager => { this.viewPager = viewPager;
                }}>
                    // some components in this first view
                    <View onPress={this.onPageSelected.bind(this,this.pagenum)}>
                        // some components
                    </View>
      //  these are just views wrapping pages that are themselves views
                    <View onPress={this.onPageSelected.bind(this,this.pagenum)}>
                        <AboutPage1 onPress={this.onPageSelected.bind(this, this.pagenum)}/>
                        <Text>{'count' + this.state.pagenum}</Text>
                    </View>
                    <View>
                        <AboutPage2 onPress={this.onPageSelected.bind(this, this.pagenum)}/>
                        <Text>{'count' + this.state.pagenum}</Text>
                    </View>
                </IndicatorViewPager>
            </View>
        </View>
    );
}

    _renderDotIndicator() {
        return (
            <PagerDotIndicator
                pageCount={5}
            />
        );
    }


 // callback that is called when viewpager page is finished selection
 onPageSelected(e) {
     console.log('state is: '+this.state)
     this.SetState({pagenum: this.state.pagenum+1});
    console.log('state is: '+this.state)
 }

}

About Page

  <View>
        <Text>Welcome to My App</Text>
  </View>

Error error: 'undefined is not an object when evaluating this.state.pagecount

Answer 1

You should bind this keyword.Like this:

 <IndicatorViewPager
                        indicator={this._renderDotIndicator()}
                        onPageScroll={this.onPageScroll.bind(this)}
                        onPageSelected={this.onPageSelected.bind(this)}
                        onPageScrollStateChanged={this.onPageScrollStateChanged.bind(this)}
                        ref={viewPager => { this.viewPager = viewPager;
                }}>
...

  </IndicatorViewPager>