Horizontal swipe not working on Droid after update

[ajonno]

I just updated to 0.1.6 and now horizontal swipe isn't working on Android. (still works fine on iOS).

"react-native": "0.42.3",

The component inside the <Carousel>is very simple and looks like this:

const Page = (props) => (
 <View style={{
      flex: 1
  }}>
      <Text
        style={stylesCommon.textField}
      >
        {props.tip}
      </Text>
  </View>
);

Is anyone else seeing this ? Would we need to update a particular prop on Droid ? I looked but couldn't see anything specific.

[techrah]

Hi @ajonno. What version of RN were you using before? I currently have it working on 0.42.0. I will be updating to 0.42.3 soon at which point I'll be able to look into this further.

[Jose4gg]

+1

[techrah]

So the issue has to do with the renderArrows function which creates overlay views that do not allow the touches to go through to the underlying view that needs to receive them. I don't know why this is suddenly an issue with 0.1.6 since that function hasn't changed since its original implementation.

In any case, adding pointerEvents="box-none" to each of the two View components in the code as follows solves the issue:

  _renderArrows = () => {
    let { currentPage } = this.state;
    const { childrenLength } = this.state;
    if (currentPage < 1) {
      currentPage = childrenLength;
    }
    return (
      <View style={styles.arrows} pointerEvents="box-none">
        <View style={[styles.arrowsContainer, this.props.arrowsContainerStyle]} pointerEvents="box-none">
          <TouchableOpacity onPress={() => this.animateToPage(this._normalizePageNumber(currentPage - 1))} style={this.props.arrowstyle}><Text>{this.props.leftArrowText ? this.props.leftArrowText : 'Left'}</Text></TouchableOpacity>
          <TouchableOpacity onPress={() => this.animateToPage(this._normalizePageNumber(currentPage + 1))} style={this.props.arrowstyle}><Text>{this.props.rightArrowText ? this.props.rightArrowText : 'Right'}</Text></TouchableOpacity>
        </View>
      </View>
    );
  }

I will work on submitting a fix.

[techrah]

@ajonno @Jose4gg Please try installing the following fix to see if this solves your issue:

npm install https://github.com/ryanhomer/react-native-looped-carousel/tarball/bugfixes

If all's well, I'll merge in the changes.

[ajonno]

thanks for quick response Ryan. unf. that didnt work on Android - as i was trying to swipe (right to left) to go to the next card, the card i was on just "stuttered" ie. like it was trying to scroll but was unable.

[leoaccorsi]

@ryanhomer this fix worked for me

[techrah]

@ajonno Well, I'm not quite sure what's going on for your situation but since my changes were a little behind master and I've rebased and also made a few more changes, could you try again? You may need to force a reinstallation (uninstall/install). Thanks.

[techrah]

@ajonno I'm going to go ahead an merge in PR #93 since it contains other fixes as well. Nonetheless, we can continue to work on your issue.

[ajonno]

Ok no worries much appreciated. I guess it's just a matter now of you being able to reproduce the problem?

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Ryan Homer [email protected] Sent: Thursday, May 11, 2017 2:30:36 AM To: appintheair/react-native-looped-carousel Cc: Angus Johnston; Mention Subject: Re: [appintheair/react-native-looped-carousel] Horizontal swipe not working on Droid after update (#92)

@ajonnohttps://github.com/ajonno I'm going to go ahead an merge in PR #93https://github.com/appintheair/react-native-looped-carousel/pull/93 since it contains other fixes as well. Nonetheless, we can continue to work on your issue.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/appintheair/react-native-looped-carousel/issues/92#issuecomment-300538734, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AC3bVY8DvhPiJ7b3bOfCDgv4o8QKHd8bks5r4eYsgaJpZM4NUv27.