onPress events don't work with custom toast components

[louisholley]

whether using BaseToast or my own component with TouchableOpacity, the onPress events are not firing. I think this is probably to do with the PanResponder in the root component. can anyone help?

[florinlazau]

any updates here? We are facing the same issue :(

[tgreco]

onPress is not working for me with default component.

[tgreco]

Removing {...this.panResponder.panHandlers} fixed the onPress issue.

[JamesPerlman]

For a quick & dirty fix, src/index.js can be changed like so. change the onMoveShouldSetPanResponder function to be something like this:

onMoveShouldSetPanResponder: (event, gestureState) => {
     const { dx, dy } = gestureState;
     return Math.abs(dx) > 1 || Math.abs(dy) > 1;
}

[calintamas]

A few questions so we can pinpoint the issue:

1. Are you on the latest version (v1.4.1)?
2. Is it platform specific? If so, what platform?

Can you post a reproducible code sample? For example, this works fine on my side:

const toastConfig = {
  test: ({onPress}) => (
    <TouchableOpacity
      style={{height: 50, width: '100%', backgroundColor: 'pink'}}
      onPress={onPress}
    />
  ),
};

const App = () => {
  const showToast = () =>
    Toast.show({
      type: 'test',
      onPress: () => console.log('pressed'),
    });

  return (
    <SafeAreaView style={{flex: 1}}>
      <Toast ref={(ref) => Toast.setRef(ref)} config={toastConfig} />

      <TouchableOpacity onPress={showToast}>
          <Text>Show toast</Text>
        </TouchableOpacity>
    </SafeAreaView>
  );
};

(Also, removing pan responders is not a fix - would remove the swipe to dismiss)

[jjapko]

I've encountered same issue: no press event is being fired. I've tried it with code provided above. It seems to be platform specific. I've tested it on real device and emulators. On emulators with Android 11 and 9 it works correctly while there seems to be an issue on real device (Android 9 here). @JamesPerlman suggestion seems like a temporary fix.

[louisholley]

@calintamas

1. yes
2. happening for me on iOS simulator, using expo if that's relevant

I have a CustomToast.tsx file that looks like

const CustomToast = ({ text1, text2, onPress, hide }) => {
  return (
    <TouchableOpacity
      style={[styles.container, styles.borderLeft]}
      onPress={() => {
          console.log('not logging')
          onPress()
      }}
    >
       ...
    </TouchableOpacity>
  )
}

I then import that in App.tsx and render

...
<Toast
    ref={ref => Toast.setRef(ref)}
    config={{
        success: props => <CustomToast {...props} />
    }}
/>
...

also regarding your last comment the pan responders don't need to be removed, but onMoveShouldSetPanResponder should return false when the gesture is a tap which I believe is what @JamesPerlman implemented

[tgreco]

I have the latest version and I only tested on iOS.
It is happening on iOS simulator and real device.

I have a bare RN project, no expo.

[calintamas]

For a quick & dirty fix, src/index.js can be changed like so. change the onMoveShouldSetPanResponder function to be something like this:

onMoveShouldSetPanResponder: (event, gestureState) => {
     const { dx, dy } = gestureState;
     return Math.abs(dx) > 1 || Math.abs(dy) > 1;
}

For the time being, I'll add @JamesPerlman's solution as a quick patch. Thanks everyone for looking into it!

[calintamas]

published in v1.4.2

[RichMatthews]

this is still broken for me. the src/index.js has this in it:

function shouldSetPanResponder(gesture) {
  const { dx, dy } = gesture;
  // Fixes onPress handler https://github.com/calintamas/react-native-toast-message/issues/113
  return Math.abs(dx) > 2 || Math.abs(dy) > 2;
}

did it change back?