React-native-reanimated-bottom-sheet: TouchableOpacity and TouchableWithoutFeedback with onPress event is not working

Created on 24 Oct 2020 · 4Comments · Source: osdnk/react-native-reanimated-bottom-sheet

Hello folks, thanks for this awesome component!

I'm testing from Android, and drag gesture is working after adding this native configuration:

import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {
    ...
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

But this is not working from the content of the bottom sheet (Android):

import {
  TouchableWithoutFeedback as Touchable
} from 'react-native'
const renderContent = () => {
  return (
    <View style={Style.container}>
      <Touchable
        onPress={() => console.log('PRESSED')}
      >
        <View style={Style.header}>
          ...
        </View>
      </Touchable>
    <View>
  )
}

const CustomBottomSheet = () => {
  ...
  return showBottomSheet && (
  <>
    {
      bottomSheetOpened && <View style={Style.bottomSheetOverlay} />
    }
    <BottomSheet
      callbackNode={callbackNode.current}
      enabledBottomClamp
      ref={sheetRef}
      snapPoints={snapPoints}
      initialSnap={snapPoints.length - 1}
      borderRadius={10}
      renderContent={renderContent}
    />
  </>
  )
}

I was testing different alternatives and I found this workaround:

import {
  Platform,
  TouchableWithoutFeedback as TouchableWithoutFeedbackiOS
} from 'react-native'
import {
  TouchableWithoutFeedback as TouchableWithoutFeedbackAndroid
} from 'react-native-gesture-handler'
const Touchable = Platform.OS === 'ios'
  ? TouchableWithoutFeedbackiOS
  : TouchableWithoutFeedbackAndroid

But I'm getting issues with external components (NativeBase, etc) because we can't use that previous solution.

Any help is appreciated, thanks in advance! <3

Source