mkuczera / react-native-haptic-feedback

React-Native Haptic Feedback for iOS with Android similar behaviour.
MIT License
879 stars 109 forks source link

iOS: Only works when called outside of function; not activated on button press #69

Closed hb-webdev closed 3 years ago

hb-webdev commented 3 years ago

The ReactNativeHapticFeedback.trigger() only activates if outside a function (based on limited testing). I want it to activate on button press.

For example, this works:

import ReactNativeHapticFeedback from "react-native-haptic-feedback";

const MyScreen = () => {
ReactNativeHapticFeedback.trigger("selection");
}

...but these don't:

import ReactNativeHapticFeedback from "react-native-haptic-feedback";
import { ConfirmDialog } from 'react-native-simple-dialogs';
import { Button } from 'react-native-elements';

const MyScreen = () => {

    const handleButtonPress = () => {
      ReactNativeHapticFeedback.trigger("selection");
    }

    <ConfirmDialog
    ...
    positiveButton={{
      title: "Button 1",
      onPress: handleButtonPress
    }}
    />

    <Button 
     ...
    title="Button 2"
    onPress={() => handleButtonPress()}
    />

    <Button 
     ...
    title="Button 3"
    onPress={ReactNativeHapticFeedback.trigger("selection")}
    />

}

Using options such as below does not help:

const options = {
  enableVibrateFallback: true,
  ignoreAndroidSystemSettings: false
};

Using different methods other than "selection" don't help either.

However, it activates fine on button press on my Android device (which seems to fall back to vibration & doesn't have haptic feedback).

At one point I glanced at my Xcode logs and surprisingly saw some non-React-Native logs, 3 or 4 of which were related to the haptics engine not starting. One of them said react-native-haptic-feedback failed to prewarm core haptics engine. Google shows absolutely 0 results for this error.

Off to ugly old React Native Vibrate I guess...

UPDATE: The exact same bug occurs with Vibration.vibrate() too! 😵‍💫 It works fine outside of an onPress event, but as soon as it's implemented into an onPress, it does nothing. This issue is documented by others here. I think this issue is rooted in a React Native bug, potentially conflicting with libraries or environment setup...

iOS 14.8 | React Native 0.64.2

Cross-reference to react-native Vibration.vibrate() issue: https://github.com/facebook/react-native/issues/23404#issuecomment-934880420


UPDATE 2: Just created a brand new React Native project on the latest React Native (0.66.0). With the below code, onPress={ReactNativeHapticFeedback.trigger("selection")} activates when I open the app, but not when I press the button! 🤯 Same exact behavior with Vibration.vibrate() (except it vibrates when the app is launched instead of doing the haptic feedback of course), so I think it's a React Native issue, rather than this library's.

import React, { useEffect } from 'react';
import {
  View,
  Button,
} from 'react-native';
import ReactNativeHapticFeedback from "react-native-haptic-feedback";

const App = () => {

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} >
    <Button
    title="Buzz!"
    onPress={ReactNativeHapticFeedback.trigger("selection")} />
    </View>
  );
};

export default App;

iOS 14.8 | React Native 0.66.0

New facebook/react-native GitHub issue opened by me