TouchableHighlight inside Viewpager taking page-change event as click in react-native ios

Question

We have used view pager (react-native-community/react-native-viewpager) in our app, and there are 3 sections of each and every page , all 3 sections are clickable, for making it clickable we are using TouchableHighlight.

So whenever I'm changing my page by swiping. If my touch for sliding is inside TouchableHighlight in IOS it is taking it as click else in android it is working fine.

score 1 · Accepted Answer · answered Dec 06 '19 at 10:41

Posting this for help for other users like me.

Answer from developer of this library.

Hey, you can use onPageScrollStateChanged method, to block button interaction.

switch(pageScrollState){
   case "idle": enableButton();
   default: disableButton(); 
}

or I have used this approach.

    this.state = {
            shouldEnableClick: true,
        };

    pageScroll = (event) => {
        draggingValue = event.nativeEvent.offset
        isNotStill = (draggingValue == 0 || draggingValue == 1) ? true : false
        {Platform.OS == 'ios' && this.changeValue(isNotStill)}
    }

    changeValue(isNotStill) {
        if (this.state.shouldEnableClick !== isNotStill) {
            this.setState({ shouldEnableClick: isNotStill })
        }
    }

and in component I am using it like

let enableCLick = this.state.shouldEnableClick
let clickAction = () => this.myAction()

<TouchableHighlight
      onPress={enableCLick && clickAction}/>

TouchableHighlight inside Viewpager taking page-change event as click in react-native ios

1 Answers1