onPress cannot work outside the ViewOverflow area.

[xiaweiss]

<View style={{height: 200, backgroundColor: 'white'}}>
  <ViewOverflow style={{width: 200, height: 100, backgroundColor: 'pink'}}>
    <View style={{width: 100, height: 100, position: 'absolute', left: 100, bottom: -50, backgroundColor: 'yellow'}}>
      <TouchableHighlight onPress={() => { console.log(1) }}>
        <View style={{backgroundColor: 'skyblue', height: '100%'}} />
      </TouchableHighlight>
    </View>
  </ViewOverflow>
</View>

[felippepuhle]

zIndex?

[gabrielbull]

zIndex does not work

[alejandropinson]

@gabrielbull Did you managed to solve this?

[gabrielbull]

@alejandropinson No, onPress does not work in overflowed area with this library.

[alejandropinson]

@gabrielbull Did you find another workaround with another library, Im creating a dropdown and I need the overflow functionality :/, Thanks anyways! :)

[gabrielbull]

@alejandropinson You can start looking for a solution here: https://stackoverflow.com/questions/27010172/clipped-button-doesnt-receive-touch-input and fix this library with a PR ;-)

[alejandropinson]

Found this https://stackoverflow.com/questions/27727981/android-passing-touch-events-of-a-child-view-drawn-outside-of-view-clip-bounds, I tried to implement the first answer but the app crashes, I'm also quite ignorant in android native development. If anyone could give it a try...

@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                return ((ViewGroup) getParent()).dispatchTouchEvent(event);
            case MotionEvent.ACTION_UP:
                int childCount = ((ViewGroup) getParent()).getChildCount();
                int x = (int) event.getX();
                int y = (int) event.getY();
                for (int i = 0; i < childCount; i++) {
                    final View child = ((ViewGroup) getParent()).getChildAt(i);
                    if (childContains(child, x)) {
                        new Handler(Looper.getMainLooper()).postDelayed(new Runnable() {
                            @Override
                            public void run() {
                                child.callOnClick();
                            }
                        }, 100);
                        return true;
                    }
                }
                break;
        }

        return ((ViewGroup) getParent()).dispatchTouchEvent(event);
    }

    int[] loc = new int[2];
    private boolean childContains(View child, final int x) {
        child.getLocationOnScreen(loc);
        int x1_child = loc[0];
        int x2_child = x1_child + child.getWidth();
        int x0 = x;
        boolean isInside = x0 >= x1_child && x0 < x2_child;

        return isInside;
    }

[jpbretanha]

Any news about that issue?

[xiaweiss]

@jpbretanha You can add press listener on father components, then calculate the area of click events, so you will know which child would be clicked

[yeomann]

any example? @xiaweiss a lot of people are struggling, I tried some java code with onTouchEvent(MotionEvent event) but was unsuccessful

ref: https://github.com/entria/react-native-view-overflow/issues/32

[Saksham96]

We can use images or icons for view overflow whenever possible as this seems to work fine for me.

[IAmMarcellus]

@Saksham96 Could you give an example of what you mean? I'm a little bit confused as to how you used an icon for view overflow.

[Xifeat]

I've the same trouble, didn't find any answer

[kevinNejad]

@Xifeat whar rn version you are using. as far as I remeber they have fixed the android overflow issue in the latest rn version. So you shoudnt need to use react-native-view-overflow anymore. https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#android-specific-changes-2

[Xifeat]

@kevinNejad I updated All my library and react native 0.57.5 but it's stil not working. I followed this tutorial https://itnext.io/react-native-tab-bar-is-customizable-c3c37dcf711f

With this branch : https://github.com/alex-melnyk/Tabber/tree/overflow_fixed But when I press my console.log is never written when I use overflow

[ciriac]

@kevinNejad @Xifeat It looks like react-native only added support foroverflow: visible.

Click events on this view are still not working.

[tasosxak]

I have the same problem. Any news about this issue?

react-native --version
react-native-cli: 1.2.0
react-native: 0.57.4

I use TouchableOpacity & Animated.View classes from react-native.

[filipef101]

@tasosxak It simply is not possible on android. try do do it some other way.

[dmitryshelomanov]

+1

[kevinNejad]

@filipef101 what's wrong with you ? someone else is having the same problem. I will work if you know how to fix it. You just need to get your hand dirty with a bit of native code. chill out! Although I don't encourage " +1 " comments.

[filipef101]

It is not possible, it's something android doesnt do

[kevinNejad]

@filipef101 tbh, I attempted to use this library a while ago but it as far as I remember the click event was working. at the end, I had to write a native component and bridge it into RN. Its true that it's sth that RN android does not support atm. but it will be possible to implement it in native and use the component in RN. However, it may not be a good idea to do for big scale project.

[Liqiankun]

Same issue! Anyone solved it ?

[xiaweiss]

Add a TouchableWithoutFeedback wraped all child components(the grey square), then when you touch in the grey area, in the "onPress" function you can calculate the touch point position.

if the x and y of postion is right, do something

react-native verison 0.58 supported "overflow:visiable", you might don't need this repo.

[yairopro]

Hi @xiaweiss The solution you gave is still a workaround. The problem is not solved yet, and the issue should be opened I think. Furthermore the workaround doesn't solve for a case like mine where I need the parent view (the TouchableWithoutFeedback in your exemple) to not take place, pushing down views below it, where the button in absolute is placed.

Using the workaround you told will have the following result.

[MayoudP]

Does anyone found a descent trick for Android ? This one is a serious issue ! 😓None of the tricks said above works. Since It's kind a trick setup.

<View>
    <SomeStuff/>
    <SomeOtherStuff style={{position:absolute, bottom:-50, height:100}}/>
</View>

Half of the SomeOtherStuff component will be clickable, the one on the top, (on the screen inside the parent view), the part with negative bottom, half of the component, "outside" the parent one is not .

[lhong375]

@xiaweiss just try the TouchableWithoutFeedback, it doesn't work on Android. it actually make the whole view not responding to touch at all. I think this is still a valid use case that RN not supporting, would be great if we can re-open this.

[skantus]

TouchableWithoutFeedback

TouchableWithoutFeedback is working for me when I using View.Animated as children.

[qalqi]

PR https://github.com/facebook/react-native/pull/26374 should fix this.

[Rhomennik]

+1

[Patrick-Sawyer]

In my case i solved this by doing the following, wont work in all cases. As I wanted my component at the top of the screen, I positioned it absolute, top 0, then gave everything else a top margin of the height of the parent View of the component.

[ghost]

My issue is solved by using this peackge.... import {TouchableOpacity, ScrollView} from 'react-native-gesture-handler';

[jonassahin01]

This is a pretty old thread but the issue is still prevalent to this day, after tinkering around to find a fixable solution, I ended up landing on the zIndex: value, styling prop, now this isn't an ideal solution, but for now, if anyone encounters this issue, this is a viable solution for some.

[Xydon]

The only solution i have found is to place the object absolutely with the root view and placing the corresponding tag at just before the root view tag ends, also to make it responsive, i have normalised the position with respect to screen sizes, though it works but is not the best solution to consider.

[izaanjahangir]

My issue is solved by using this peackge.... import {TouchableOpacity, ScrollView} from 'react-native-gesture-handler';

Thanks, this worked