[Android] Touchables in TouchThroughView do not work

[woodpav]

Version: 0ae415a

Steps to reproduce:

1. Put a Touchable in a TouchThroughView
2. Touch the Touchable
3. No interaction on Android, interaction on iOS

Workaround:

Put multiple TouchThroughViews in a View such that the area underneath the Touchable is the View.

[AndresAltomobile]

I'm having the same problem. It works on iOS. Does not work on Android. Could you share an example code of your workaround?

[simonhoss]

@AndresAltomobile can you maybe share a repository where it does not work?

[AndresAltomobile]

@simonhoss Repo: TouchThroughViewAndroidIssueDemo. Sorry for the late response. I created a small demo. I tried to make it as simple as possible. If you have any questions about the demo, please ask.

[AndresAltomobile]

Hi @simonhoss Any news about the issue?

[elios264]

@simonhoss I'm having the same problem, could you help us out?

[nojosu]

I'm struggling with this issue too. Have you guys found a solution for it? @woodpav @simonhoss

[simonhoss]

Im sorry for the delay. I have to finish some personal stuff. I try to find a solution asap.

[rocketsalander]

Hello @simonhoss, any news about this?

[simonhoss]

I think its related to #14

Can you please try the 1.2.0-beta.0 ?

[AndresAltomobile]

Hi @simonhoss I tried the 1.2.0-beta.0 version, but I'm still experiencing this problem on Android.

Do I need to add additional configuration or something?

I updated the Repo: TouchThroughViewAndroidIssueDemo to the 1.2.0-beta.0 version. Could you take a look?

[simonhoss]

The problem was that the TouchThroughView took the whole height but it should only take the space above.

Here is a small fix:

<TouchThroughWrapper
          style={{position: 'absolute', zIndex: 15, bottom: 0, top: 10}}>
          <Carousel
            ref={carouselRef}
            data={[1, 2, 3, 4, 5]}
            renderItem={({item}) => {
              return (
                <View style={{flex: 1, zIndex: 15}}>
                  <TouchThroughView
                    style={{
                      flex: 1,
                      zIndex: 15,
                    }}
                  />
                  <View style={{height: 300}}>
                    <Sheet />
                  </View>
                </View>
              );
            }}
            inactiveSlideScale={1}
            sliderWidth={width}
            itemWidth={width - 70}
            useScrollView={true}
            scrollEnabled={true}
          />

[AndresAltomobile]

@simonhoss , It worked, however, this only works with a fixed height. The component in this case <Sheet /> will change the height when user taps the component, so if it grows more than 300 and the user touches the part of <Sheet /> that is outside of <View style = {{height: 300}}> , the touches will go through the component and/or the <Sheet /> will not look good. That is why I wrap the component with <TouchThroughView /> and it works great on iOS but not on Android.

Do you have any other idea how I could make it work just like on iOS?

[simonhoss]

Inside your Sheet component you have a BottomSheet component. It seems that this does not resize correct based on the content. Maybe it uses an absolute style? But this has nothing todo with the TouchThroughView.