React-native-gesture-handler: Implementing borders on Buttons

[pcooney10]

Hey, thank you for making this really cool lib.

I added this to my project and started swapping out TouchableHighlight and TouchableOpacity for RectButton, and noticed that borders weren't rendering.

Looking at the example, it seems you have borders implemented in some places but not through styles attached to RectButton's.
The MainScreen uses FlatList's ItemSeparatorComponent to render an ItemSeparator component , and the rows / "Table rows & buttons" example uses a "buttonDelimiter" View in between RectButton's to represent a bottom border.
Is this the best (or only) way to implement borders?

There was a discussion in #59 and a PR #151 that seem to address issues with borderRadius, but I did not see anything about the border layout props we get in RN (borderWidth, borderColor). Does it have anything to do with the overflow: hidden styles?

[henrikra]

What are benefits of replacing TouchableHighlight and TouchableOpacity with RectButton? 🤔

[pcooney10]

@henrikra from the README:

With this library gestures are no longer controlled by the JS responder system, but instead are recognized and tracked in the UI thread. It makes touch interactions and gesture tracking not only smooth, but also dependable and deterministic.

And from the RN docs:

Another example is responding to touches: if you are doing work across multiple frames on the JavaScript thread, you might notice a delay in responding to TouchableOpacity, for example. This is because the JavaScript thread is busy and cannot process the raw touch events sent over from the main thread. As a result, TouchableOpacity cannot react to the touch events and command the native view to adjust its opacity.

So it seems RectButton would perform better than TouchableHighlight and TouchableOpacity in instances where the the JS thread is busy, and in general I've been under the impression that the UI thread is preferable to the JS thread when dealing with interactions and animations (i.e. useNativeDriver.

[osdnk]

This issue seems to be fixed as it's not supported behaviour to wrap TouchableOpacity with RectButton

[pcooney10]

Hey @osdnk, didn't see your response until now.

I am sorry if my original question was wordy, but essentially I am asking if the RectButton component can be styled with borderBottomWidth: 1, borderBottomColor: '#000', etc.

When I said _"swapping out TouchableHighlight and TouchableOpacity for RectButton"_, I meant I was _replacing_ instances of TouchableHighlight and TouchableOpacity with RectButton.

[yodaheis]

@pcooney10 I'm facing the issue of border not appearing on Android. It does work well on iOS though.
style props like borderRadius works, but borderWidth, borderColor does not work on Android