One CSS prop. to bypass an open react native issue
Tags: css, javascript, react, reactnative
Published: 2020-07-30 18:43:20

Today I was working on RNTester's UI (an application used to test changes in React Native by Facebook) and experienced a weird error.

![we have a problem](https://media.giphy.com/media/W0VtJNnBAtyEuxyE4g/giphy.gif)

The navigation button wasn't responding to touches, and only a particular section of the button was working. 


This is how the navigation bar of our application look.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/deqplk6zearm5b1iou8s.png)
Yeah, that's a transparent button in the middle over there. Would be sharing it's recipe on my profile soon.

Soon we figured out that the button was only responding when pressed at a particular part of it, and there it all started.

In attempts to debug it, I first tried replacing the icon with different variants. It was a transparent PNG with only the white stroke color, on a blue background done by CSS.

I tried Filling the png with color, merged the circle in the image itself to make the component bigger, used a jpeg because maybe it was "touchable" only at the painted area, and even filled the color using a pencil tool :grimacing: and guess what, nothing worked.

![https://i.imgur.com/f63rM5t.png](https://i.imgur.com/f63rM5t.png)

Finally I started searching online because a simple image was not working as expected, and this was really frustrating. :weary:

With few minutes of scanning google first pages, i found these.

- https://github.com/facebook/react-native/issues/25441
- https://github.com/react-native-community/react-native-svg/issues/624

the last of them (#624) didn't work, as you can see i tried adding a rectangle over the image (__colored black for visibility__)

[This one #25441](https://github.com/facebook/react-native/issues/25441) had exactly the same problem as ours, a minus property on margin and not clickable, but the sad part was that this issue is not resolved, even when it was opened in 2019. :worried: and had a comment like  
> I believe the functionality you expect does not exist in react native. :scream:

***some magick happens here***

I opened the Android Developer Tools and looked at the layout boundaries of the navbar. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i4ykwhk8p0upwlqzvj38.png)


See that the button is being cut by another layout boundary. Test if the button is responding at all areas above the boundary.

> Insert random prop fidgeting  here for 30 minutes

Tried moving the blue circle one level up using a zIndex.

![what !](https://media.giphy.com/media/NMufrvxO8fC3C/giphy.gif)

# YIKES ! :astonished: it worked? IT WORKED !!!


## The reason.
The button on the middle was implemented by positioning it beyond its boundaries, using a negative indexed property.So when I wrapped a [<TouchableOpacity />](https://reactnative.dev/docs/touchableopacity) over the image component, it only converted the small view and not the entire blue button. (***see image below for better understanding***)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/izskv18jhiihizn6edqv.png)

The TouchableOpacity was covering the entire image, but it was all just hidden below the bottom bar (even if it was visible), and a simple `zIndex` property brought it up, and fixed it.


Now I'm done. University homework calls.

![show over](https://media.giphy.com/media/3o7qDEq2bMbcbPRQ2c/giphy.gif)


You can catch me on [twitter: @yash_kr_verma](https://twitter.com/yash_kr_verma) where I post similar stuff.