Today I was working on RNTester's UI (an application used to test changes in React Native by Facebook) and experienced a weird error.
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.
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.
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.
- 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 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.
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.
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)
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.
You can catch me on twitter: @yash_kr_verma where I post similar stuff.
Top comments (0)