Skip to content

TouchableOpacity and TouchableWithoutFeedback with onPress event is not working #293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jdnichollsc opened this issue Oct 23, 2020 · 4 comments

Comments

@jdnichollsc
Copy link

jdnichollsc commented Oct 23, 2020

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

@jdnichollsc jdnichollsc changed the title TouchableOpacity and TouchableWithoutFeedback events not working TouchableOpacity and TouchableWithoutFeedback with onPress event not working Oct 23, 2020
@robyhuzwandar
Copy link

i have same issue

@maoapp
Copy link

maoapp commented Oct 24, 2020

me too

@jdnichollsc jdnichollsc changed the title TouchableOpacity and TouchableWithoutFeedback with onPress event not working TouchableOpacity and TouchableWithoutFeedback with onPress event is not working Oct 24, 2020
@robyhuzwandar
Copy link

Solve it with give access press to true

@jdnichollsc
Copy link
Author

Ok, this issue is a duplicated of this other #219 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants