React Native Android: An absolute positioned, TouchableOpacity outside of the bounds of its parent is not clickable

[travisho-ensu]

If I place a TouchableOpacity outside the bounds of its parent (using absolute positioning) only the portions of the TouchableOpacity which are inside the bounds of the parent are clickable. I think this is a bug because this can only be reproduced in Android, not iOS.
React Native version: 35.0.0

Steps To Reproduce

Here's a minimal code sample:
<View style={{height: 60, width: '100%', zIndex: 1}}> <TouchableOpacity onPress={() => console.log('pressed')} style={{position: 'absolute', zIndex: 2, backgroundColor: 'yellow', width: 100, height: 50, top: 70}} /> </View>

[daisylb]

I'm having the same problem, but I've come across #26374 which I think should fix it if/when it's merged?

[tarasvakulka]

Hi, may be somebody know when this PR #26374 will be merged ?

[harshitaahuja]

This is still reproducible on version 0.61.5. any fixes?

[lucassardois]

We really need this issue to be fixed.

[vonkanehoffen]

I'm still seeing this bug in 0.61.5 on Android. A fix would be amazing.

[LeonDong199509]

I got this bug too. This PR #26374 doesn't work for me. Anyone can help?

[sriram-kailasam]

A temporary workaround is to import TouchableOpacity from react-native-gesture-handler. That's how I got it working after a wasted day of messing with position: 'absolute'.

[prateekchachra]

@sriram-kailasam Not working

I tried using the same.

[igorrfc]

Render the absolute positioned touchable component as the last child worked for me. Also, I've enveloped the entire component into a fragment. Example:

const Screen = () => (
  <>
    <ScreenContent />
    <TouchableOpacity style={{position: 'absolute'}} />
  </>

)

[Egizas]

please merge, this issue is driving me nuts

[nexorianus]

I also had the bug when using a wrapper element positioned absolute:

<View style={{position: 'absolute', height: 0, justifyContent: 'space-between'}}>
  <TouchableOpacity ... />
  <TouchableOpacity ... />
</View>

This results in Toucheables not beeing clickable. expanding the wrapping View to the height of the Touchables, makes them clickable again, but kills interaction with elements behind the wrapper.

The only way I could fix this is giving the absolute positioning to the children, similar to @igorrfc :

<>
  <TouchableOpacity style={{position: 'absolute', left: 0}} ... />
  <TouchableOpacity style={{position: 'absolute', right: 0}} ... />
</>

[Shuo-Mr]

Has this problem been solved? I also have this problem. When my view is absolutely positioned, it is not in the scope of the parent view, and all internal interaction events will not take effect.

[jong-hui]

0.63's Pressable have same problem

[arvindell]

Having the same issue with Pressables. The proposed workarounds didn't work for me. What else can I do?

[youssame]

Render the absolute positioned touchable component as the last child worked for me. Also, I've enveloped the entire component into a fragment. Example:

const Screen = () => (
  <>
    <ScreenContent />
    <TouchableOpacity style={{position: 'absolute'}} />
  </>

)

👍

[abhirna36]

What's the latest update from the issue ?

[Svarto]

same problem

[JB-CHAUVIN]

Same problem...

[mikkelwf]

Same issue here with Pressable

[MrToxy]

Same issue with View.
RN version "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz".

[summerkiflain]

Its a shame that one of the most important design feature doesn't work properly with touchables in overflown area, the issue and the related PR is lingering on for over an year, I hope someone gives it another look and solve the biggest hassle for design implementation, if its working fine in iOS it should replicate the behavior in android too.

[kutsan]

@PrimulaX It works, thanks!

[Desintegrator]

@PrimulaX thanks! also works with TouchableWithoutFeedback

[Aurangempire]

Render the absolute positioned touchable component as the last child worked for me. Also, I've enveloped the entire component into a fragment. Example:

const Screen = () => (
  <>
    <ScreenContent />
    <TouchableOpacity style={{position: 'absolute'}} />
  </>

)

Saved my Day 👯‍♂️

[JsThiago]

Any update? Touch is passing throught absolute View...

[michaelkleinhenz]

This issue prevents the use of the custom header feature on react-navigation with headers set to position: absolute. As you can't add the element last because the layouting is done internally, it just does not work. The only way to do this is turning off the react-navigation custom header feature and create a header locally in every screen implementation.

[mayurbaldha]

👀

[molimat]

How can we organize the 2 years anniversary party of this issue, guys? Who brings beer?

[hlspablo]

Meanwhile the version 0.65 is being launched to add more and more bugs.. it's so sad that a beautiful tech like React Native is taking this direction, the fundamentals don't work as expected and no one gives a shit.

[alimertcakar]

How can we organize the 2 years anniversary party of this issue, guys? Who brings beer?

Will there be cake?

[Desintegrator]

How can we organize the 2 years anniversary party of this issue, guys? Who brings beer?

Will there be cake?

after next 2 years

[safaiyeh]

Theres a massive effort going on the have eyes on all these fixes: https://github.com/facebook/react-native/projects/17#card-65759870 to track the statuses

[wajeshubham]

I was implementing custom dynamic toaster using context to use it globally and wasn't able to access touchable opacity due to absolute positioning but i realized i was rendering my Toaster component before my main Stack Navigator which was bringing my toaster below navigation layer so i rendered it after stack navigator and it worked

BEFORE:

 <ToasterContext.Provider value={{toasts:this.state.toastState, showToaster: this.showToaster,closeToaster: this.closeToaster }}>
      <Provider store={store.store}>
        <PersistGate loading={null} persistor={store.persistor}>
         {toastState.length > 0 
            && toastState.length <= 3 
            && toastState.map((t, i) => {
                return(
                  <DynamicToast i={i} key={i} t={t} position={"bottom"} duration={4000} closeToaster={this.closeToaster} />
                )
              }
            )} 
          <NetworkConnectionModal/>
          <AppContainer /> // I was rendering before my AppContainer
        </PersistGate>
      </Provider>
 </ToasterContext.Provider>

AFTER: (Resolved my problem)

 <ToasterContext.Provider value={{toasts:this.state.toastState, showToaster: this.showToaster,closeToaster: this.closeToaster }}>
      <Provider store={store.store}>
        <PersistGate loading={null} persistor={store.persistor}>
          <NetworkConnectionModal/>
          <AppContainer />
          {toastState.length > 0 
            && toastState.length <= 3 
            && toastState.map((t, i) => {
                return(
                  <DynamicToast i={i} key={i} t={t} position={"bottom"} duration={4000} closeToaster={this.closeToaster} />
                )
              }
            )} 
        </PersistGate>
      </Provider>
 </ToasterContext.Provider>

[kodozorro]

I found this solution, and to be honest; it wasn't obvious at all for me.

Wrap your main container and button into React.fragment, and everything will be pressed and tapped. I hope so =)

Example:

<>
   <TouchableOpacity style={styles.hideKeyboard} onPressIn={() => {}} hitSlop={smallElementsHitSlop}>
        <Icon />
   </TouchableOpacity>
   <View style={styles.mainContainer}>
     
   </View>
</>


mainContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: theme.aligned(FOOTER_HEIGHT),
    paddingHorizontal: 16,
    backgroundColor: 'white',
  },
hideKeyboard: {
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: theme.aligned(30),
    bottom: 38,
    right: 2,
    width: 32,
    height: 32,
    backgroundColor: 'white',
  },

[andriikovall]

How can this issue be even closed if it is not fixed yet?
RN 0.66.0

[hlspablo]

@ziovio sounds that this problem was solved in 0.66 version, look: e35a963

[Wei102193]

Importing from react-native-gesture-handler works for me.
I am trying to create a custom absoluted cart button that is out of the bounds of a bottom navigation tab. React-native-gesture-handler makes it work. But if you have another element that uses TouchableOpacity from React Native. When these two buttons overlap and you click it, both will be triggered. You have to import TouchableOpacity from react-native-gesture-handler for both in this case.

[liquidvisual]

I just stumbled upon this hellraising issue today, I wasn't sure what it was at first. I can confirm react-native-gesture-handler works for touchables, but in my case I'm using a FlatList (which won't scroll). Has anyone had any success in getting an out of bounds FlatList to work in this circumstance?

[danteallievi]

Im still having this issue on a view with position absolute and any touchable I use doesn't work. And when i try to use react-native-gesture-handler says it is deprecated

[maelthi]

Confirm that this issue is still going on with Pressable component. View is position: absolute and text is not clickable. How is an issue like this still not resolved ?

<View>
  <Pressable>
    <Text>Coucou</Text>
  </Pressable>
</View>

[PrimulaX]

@maelthi That's not RN version.

[malinthann]

You have to make zIndex higher
Example: zIndex: 2 to zIndex 9999