react-native-view-overflow: onPress cannot work outside the ViewOverflow area.

image

<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>

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 28
  • Comments: 34

Most upvoted comments

zIndex?

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

@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.

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

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

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.

image

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.

@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

@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 No, onPress does not work in overflowed area with this library.