Components translated into view are not tappable on Android

[lehresman]

React Native version:

  React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
      Memory: 86.03 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.6.0 - ~/.ndenv/versions/12.6/bin/node
      Yarn: 1.17.3 - ~/.ndenv/versions/12.6/bin/yarn
      npm: 6.10.2 - ~/.ndenv/versions/12.6/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 19, 23, 25, 26, 28
        Build Tools: 28.0.3
        System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      react-native: https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz => 0.59.8 

Steps To Reproduce

1. Create a View that is wider than the screen
2. Use {transform: [{translateX: #}]} to show parts of the view that were rendered off screen
3. Notice that on Android, nothing that was translated into view is tappable/touchable.

Describe what you expected to happen:

I expected consistent behavior between Android and iOS -- mainly, the parts that were translated into view should be tappable on Android.

Snack, code example, screenshot, or link to a repository:

Here is an example I created using an Expo Snack, but I don't believe it is an Expo-related issue: https://snack.expo.io/@lehresman/android-translation-example

Notice the button on the 2nd page (the green one) isn't tappable on Android, but works fine on iOS.

[badarshahzad]

Hi @lehresman, I have tested your code. I want to answer your problem but I have qusetion.

• Can you tell me why you gave the transform: [{translateX: -200}]?

If you remove the transform: [{translateX: -200}] and gave the flex:1 in page style then both button views are working. Have look on the code.

I have concluded that the view wasn't at its correct position. You didn't give the innerContainer a style property width,height or flex which I think can be given. If you don't want to give width,height or flex to innnerContainer then at least give it to parent. I noticed outerContainer also doesn't have any property which may be causing a issue for 2nd button.

[lehresman]

@badarshahzad My use case is that I'm creating a carousel-like component where users can swipe between pages. I simplified the example here to show the problem is with translateX on Android.

Thanks for the tip on giving innerContainer height, width, or flex. I will try that shortly and report back here.

[badarshahzad]

Welcome 👋 if you are going to make yours then have a look on this how they created a component. It is very good library https://github.com/archriss/react-native-snap-carousel.

[lehresman]

react-native-snap-carousel is very very good. my unique use case is I needed infinite scrolling in both directions, and that library doesn't work well with that. :(

[badarshahzad]

Dude customize it fork the library make changes in component and import it into your project 👍.

[badarshahzad]

react-native-snap-carousel is very very good. my unique use case is I needed infinite scrolling in both directions, and that library doesn't work well with that. :(

Have a look https://github.com/phil-r/react-native-looped-carousel

[lehresman]

@badarshahzad I have looked at all of these, but sadly none of them work well when you dynamically add pages to the left side. Thanks for the tips though.

[lehresman]

Ok, I've tried what you suggested about setting the width/height/flex on innerContainer and outerContainer. None of that made a difference. I also tried using left: -200 instead of translateX and it has the same effect. Anything outside the original view frame is not tappable on Android.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.