React-Native ViewPager goToPage Not Working

Question

import ViewPager from 'react-native-viewpager';
constructor(props){
        super(props);

        this._renderPage = this._renderPage.bind(this);
        this._renderRowSablon = this._renderRowSablon.bind(this);
        this.PageChange = this.PageChange.bind(this);
        this.count = 0;
        this.state = {
              count: 0,
              info : this.props.values,
              page: 0,
              pages:pages,
        }
 }
 PageChange(x){
        switch(x){
              case 'next':
                    if( this.state.count< (this.state.info.sayfa - 1) ){
                          this.viewpager.goToPage(this.state.count + 1);
                          this.setState({count: this.state.count+ 1});
                    }
              break;
        }
  }
render(){
            <View style={{flex:1}}>
               <ViewPager
                   ref={(viewpager) => {this.viewpager = viewpager}}
                   dataSource={this.state.dataSource}
                   renderPage={this._renderPage}
                   onChangePage={this._pageChange}
                    isLoop={false}
                   renderPageIndicator={false}
                   locked={true}
                   autoPlay={false}/>
             </View>
             <View style={{flex:1}}>
                 <TouchableHighlight onPress={() => { this.PageChange('next'); }}>
                 <Text>Next</Text>
                  </TouchableHighlight>
             </View>
}

When the setState function is cleared, page change is taking place. When the setState function is added (as above) setState works but the page change (gotoPage) does not work. Does not show error / warning What exactly is the problem?

It would be helpful if you could provide more information. Like more code, things you have tried, etc. Like, I would like to see your declaration of state in the constructor. Are you importing any classes? Where is the actual page you speak of. Is this android or ios? — Adam Patterson, Mar 14 '17 at 07:27
I say that, because I sense that your question is about to recieve a lot of downvotes due to the ambiguity of it. — Adam Patterson, Mar 14 '17 at 07:28
See this question about logging errors: http://stackoverflow.com/questions/30115372/how-to-do-logging-in-react-native — Adam Patterson, Mar 14 '17 at 07:32
I tried to make it a little clearer. The console does not show any information. Android — , Mar 14 '17 at 07:38

score 0 · Accepted Answer · edited May 23 '17 at 10:29

0

It seems that you are out of scope. When using arrow functions, the scope of 'this' becomes lexical.

Try changing <TouchableHighlight onPress={() => { this.PageChange('next'); }}>

to <TouchableHighlight onPress={this.PageChange('next')}>

See this question: React-Native: Cannot access state values or any methods declared from renderRow

edited May 23 '17 at 10:29

Community

1
1

answered Mar 14 '17 at 08:04

Adam Patterson

958
7
13

I think the problem will be resolved in this way. How do we just define this.ViewPager? The error shown is: undefined is not an object 'this.viewpager.goToPage' – Mar 14 '17 at 08:19
Check the answer out here: http://stackoverflow.com/questions/35663375/how-to-pass-a-component-reference-to-onpress-callback You would need to pass the `this` object to the function. And your PassChange function would need to look something like: `PageChange(x, this){` – Adam Patterson Mar 14 '17 at 08:27
1

Thanks Adam. The first problem was corrected. But I still have not solved the problem for viewPager. – Mar 14 '17 at 08:58
Well, you should need a return statement inside of your render function? Unless I am missing it. – Adam Patterson Mar 14 '17 at 09:05
@Yavuz Civelek, does the goToPage() function exist? You probably need to make it, I can't find it defined anywhere. Like: `function goToPage(url){ if(url != ""){ go to URL here } }` This stackoverflow question should guide you on how to get react native to open a url for you: http://stackoverflow.com/questions/35531679/react-native-open-links-in-browser – Adam Patterson Mar 14 '17 at 09:12
I just erased some parts to be able to ask shorter questions. :) – Mar 14 '17 at 09:18
Library: https://github.com/race604/react-native-viewpager GoToPage () is actually in this library. This is not a problem when manually running goToPage. I probably can not fully define the viewPager here. – Mar 14 '17 at 09:21
Ok, I have an idea. Create a variable after your render function, like: var self = this; Then, make a function under that: var handleClick = function(this){ self.PageChange(x, this); } Then change your PageChange function to PageChange(x, this) Then make your button: – Adam Patterson Mar 14 '17 at 10:04
"PageChange (x, this)" on this function generates 'this' error. Unexpected Token – Mar 14 '17 at 10:11
What happens if you make `` I incorrectly added the this keyword. (Sorry, confusing problem) – Adam Patterson Mar 14 '17 at 10:13
It's a frustrating problem. I guess we could not solve the problem exactly :) – Mar 14 '17 at 10:25

React-Native ViewPager goToPage Not Working

1 Answers1