Repository navigation
Components translated into view are not tappable on Android #26219
Description
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
- Create a View that is wider than the screen
- Use
{transform: [{translateX: #}]}to show parts of the view that were rendered off screen - 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.
Activity
badarshahzad commentedon Aug 28, 2019
Hi @lehresman, I have tested your code. I want to answer your problem but I have qusetion.
transform: [{translateX: -200}]?If you remove the
transform: [{translateX: -200}]and gave theflex:1in 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
innerContainera style property width,height or flex which I think can be given. If you don't want to give width,height or flex toinnnerContainerthen at least give it to parent. I noticedouterContaineralso doesn't have any property which may be causing a issue for 2nd button.lehresman commentedon Aug 28, 2019
@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
translateXon Android.Thanks for the tip on giving
innerContainerheight, width, or flex. I will try that shortly and report back here.badarshahzad commentedon Aug 28, 2019
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 commentedon Aug 28, 2019
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 commentedon Aug 28, 2019
Dude customize it fork the library make changes in component and import it into your project 👍.
badarshahzad commentedon Aug 28, 2019
Have a look https://github.com/phil-r/react-native-looped-carousel
lehresman commentedon Aug 28, 2019
@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 commentedon Aug 28, 2019
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: -200instead oftranslateXand it has the same effect. Anything outside the original view frame is not tappable on Android.stale commentedon Nov 26, 2019
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 commentedon Dec 3, 2019
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.