<Touchable*> styling is not compatible with React Native Touchables

RNGH Touchables have a different behavior from RN Touchables when styling — making them not drop-in compatible.

Take for example:

this is the behavior of RN TouchableOpacity (and of RNGH BaseButton):

this is the behavior of RNGH touchables:

the yellow box is a touchable with flex: 1.

The problem is that all RNGH Touchables render two wrapped views:

https://github.com/kmagiera/react-native-gesture-handler/blob/baf2ba72ea4fca22a11b507cffb4ee94f0126480/touchables/GenericTouchable.js#L258-L266

The styles are applied to the child view, so applying flex: 1 doesn’t do what one would expect.

I think the only way to avoid this incompatibility is to render just one native view. This should also be a little more performant.

I’m willing to help with implementation (at least on JS+iOS side), but I would need some basic pointers as to how to make RawButton accept View props…

[mjarraya]

If not fixed, this needs at minimum to be mentioned in the docs

[njdancer]

@radex #854 is not exactly what you’ve proposed but does allow for a workaround.

In my use case, supplying ‘’‘containerStyle={{ flex: 1 }}’‘’ to an RNGH Touchable along with my existing ‘’‘style’‘’ prop, mirrors the native behaviour.