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

[radex]

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…

[vi1199]

any update on this ? @kmagiera @brentvatne

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

[mjarraya]

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

[lukebars]

Is there any progress on this one? Looks like crucial part of gesture handler's future, to be as consistent to react-native styling as possible.

[j-piasecki]

containerStyle prop has been added to Gesture Handler's Touchables quite a while ago in #854. I'll close the issue because using that prop will solve the problem of not being able to style the outer view, and there is a lot of open issues regarding styling of Touchables and buttons coming from the same root cause.