Error: TouchableHighlight Styling Problem in React Native

Update: React Native introduced a new component called Pressable. We advise you to use Pressable instead of TouchableHighlight.

<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

Solution: TouchableHighlight works differently than TouchableNativeFeedback. When you are enclosing a View in TouchableHighlight, you will need to provide styles to TouchableHighlight. But in case of TouchableNativeFeedback, all the styles are added to child View only.

So, I was working on this kids online education project and came across a weird problem. TouchableHighlight was working differently than any other click event component. The problem was, Styling.

At first, I thought I broke something. Since I was using the absolute styling on my View, it went completely out of flow. I spent nearly half an hour to realize that the actual problem lies with TouchableHighlight.

While TouchableNativeFeedback acts like an empty wrapper on the child View, TouchableHighlight, on the other hand, acts like a proper component with View as children prop.

So, you will need to add styles to the TouchableHighlight and not the View in order to work properly.

And one more thing, I was using React 0.63 when I was writing this article. May be in future versions it get solved but for now you can fix the problem using this solution.