TouchableWithoutFeedback prevents scrolling

[MasoudShah]

I have multiple tabs inside ScrollableTabView and some of them are FlatLists. The items of FlatList are wrapped inside a TouchableWithoutFeedback with onPress property. Scrolling vertical (witch is FlatList responsible for) is OK and the FlatLists have no issue but the problem is scrolling horizontal (whitch is about scrolling between tabs). When you scroll horizontally on an Item of FlatList, scrolling wont happen and the onPress of TouchableWithoutFeedback triggers; but if your point of touch is not on the items and instead between them, it scrolls normally. The problem is scrolling horizontal doesn't steals the responder lock of TouchableWithoutFeedback. This problem happens only in scrolling from left to right and the opposite direction works well. How can I overcome this problem?

[MasoudShah]

Still no solution for this?

[pratham014]

I am having the same issue on Android. Works fine on iOS

[pratham014]

I was able to resolve this issue by wrapping the FlatList inside GestureRecognizer from react-native-swipe-gestures. and ignore the gesture event returned by it.

[MasoudShah]

I used react-native-tab-view witch solved my issue

[brambang]

I used react-native-tab-view witch solved my issue

are you do not need scrollable tab bar? is react-native-tab-view have scrollable tab bar????

[MasoudShah]

I used react-native-tab-view witch solved my issue

are you do not need scrollable tab bar? is react-native-tab-view have scrollable tab bar????

Yes it has the scrollable tab bar

[zhugy-yami]

import { TouchableNativeFeedback, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback } from 'react-native-gesture-handler'

I use react-native-gesture-handler instead solved the problem

[clwy-cn]

import { TouchableNativeFeedback, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback } from 'react-native-gesture-handler'

I use react-native-gesture-handler instead solved the problem

works good for me, thx

[zhugy-yami]

import { TouchableNativeFeedback, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback } from 'react-native-gesture-handler' I use react-native-gesture-handler instead solved the problem

works good for me, thx

客气

[puxiaoshuai]

import { TouchableNativeFeedback, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback } from 'react-native-gesture-handler' 点击没效果，android 中MainActivity中增加

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
...
 @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }

[AdarshJais]

scrollable

I don't think we can scroll header element in that. that's why we need a scrollable tab view. Isn't it?

[erhanbicer]

import { TouchableNativeFeedback, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback } from 'react-native-gesture-handler'

I use react-native-gesture-handler instead solved the problem

ridiculous, but it works🤪

[m6265m]

import { TouchableNativeFeedback, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback } from 'react-native-gesture-handler'

I use react-native-gesture-handler instead solved the problem

This doesn't work for me at all. Also the vertical scrolling isn't working when I have a flatlist inside touchableWithoutFeedback. Any updates on this one ?

[edwards19900128]

import { TouchableNativeFeedback, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback } from 'react-native-gesture-handler'

I use react-native-gesture-handler instead solved the problem

真是个天才....

[zohayk]

Dear @MasoudShah, to scroll inside the TouchableWithoutFeedback, you need your each FlatList element to be in the TouchableView instead of View. You can write ... <TouchableView onPress={() => false} activeOpacity={1}> ... </TouchableView>

Thus, we get the usual View. This way you can scroll ScrollView or FlatList in the TouchableWithoutFeedback.

[IFinesse]

In my case helped wrapping Flatlist renderItem component into TouchableOpacity

[R-Art-project]

<ScrollView keyboardShouldPersistTaps="always" keyboardDismissMode='on-drag'> {... scrollable elements} </ScrollView>