loading...
Cover image for One CSS prop. to bypass an open react native issue

One CSS prop. to bypass an open react native issue

yashkumarverma profile image Yash Kumar Verma ・3 min read

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

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
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 😬 and guess what, nothing worked.

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

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

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 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. 😟 and had a comment like

I believe the functionality you expect does not exist in react native. 😱

some magick happens here

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

Alt Text

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 !

YIKES ! 😲 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 over the image component, it only converted the small view and not the entire blue button. (see image below for better understanding)

Alt Text

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

You can catch me on twitter: @yash_kr_verma where I post similar stuff.

Posted on by:

yashkumarverma profile

Yash Kumar Verma

@yashkumarverma

MLH Fellow, working on facebook's reactnative. University Student, Hacker.

Discussion

markdown guide