TouchableWithoutFeedback not working with flexbox

[lucastonon]

I am having some trouble showing {children} when using this setup.
If I use react-native's TouchableWithoutFeedback it works. But when I import TouchableWithoutFeedback from react-native-gesture-handler it does not show my {children}.
And react-native's touchable blocks the view responder events, and I need to be receiving both. Do you guys have any idea what's wrong?

`

        <View style={{flex: 1, backgroundColor: 'black'}}>

            <View style={{flexGrow: 1}}
                  onStartShouldSetResponder={() => true}
                  onResponderRelease={(event) => this.handleResponderRelease(event)}>

                <TouchableWithoutFeedback
                    onPressIn={this.handlePressIn}
                    delayPressIn={20}
                    delayPressOut={30}
                    onPressOut={this.handlePressOut}>
                    <View style={{flex: 1}}>
                        {children}
                    </View>
                </TouchableWithoutFeedback>

            </View>

            <View style={{height: 90}}>
                <FlatList
                    ...

                    />
            </View>
        </View>`

[panda6412]

Also same here.

[lestarcdog]

You can try to use height instead of flex on the <TouchableWithoutFeedback style={{height: '100%'}}>

[pribeh]

Flex doesn't seem to work at all inside Touchables.

[uragecz]

Wondering why there is no any reaction on this topic??! It's critical problem.. having same issue with TouchableOpacity.. if i use TouchableOpacity from react-native libary then everything works well

[andychikhany]

wrap the touchable that you are getting from gesture handler with a /View/ and apply the styling to the view it should work

[guiled]

Got to debug few hours to figure this out !

[chybisov]

@jakub-gonet could you please look into this? It's really frustrating. I also have this issue and only fix I see is to switch to standard react-native TouchableWithoutFeedback, but what is the purpose then 😃

[Avrmaster]

Still experiencing this problem with TouchableNativeFeedback
Using "react-native-gesture-handler": "^1.7.0"

[luizwhite]

Same issue here..

Tested with
"react-native-gesture-handler": "^1.10.3"

With height: '100%' it works, but have to check on iOS

[pribeh]

Didn't realize a whole bunch of buttons weren't working on android because of this again. Any chance someone could take a look at this?

[teodorrd27]

Really don't mean to distract from the issue at hand which is still an issue. But, I've managed to use
<Pressable style={{width: '100%'}}>{children}</Pressable>
successfully with flexbox for a full width container that behaves as you'd expect.
I think they're quietly trying to transition to Pressable regardless, it's all over the touch objects in the docs.

[j-piasecki]

The issue comes from the way touchables are implemented. Basically they are composed of two views: BaseButton for handling events and Animated.View that animates and displays children. As a workaround you can use containerStyle and style props of the touchable components (that style BaseButton and Animated.View respectively).
In case of the example from the description, I think that adding

  containerStyle={{ flex: 1 }}
  style={{ flex: 1 }}

props to the TouchableWithoutFeedback would solve the problem.

[WoLewicki]

Since the above comment explains how it works under the hood, I think we can close this issue. Feel free to comment if you have any questions and we can always reopen it.

[Daumis102]

While the proposed solution works, the "containerStyle" attribute is not added to the TouchableWithoutFeedback Props, showing an annoying error in IDE: