The Secret Ingredient: React Native Haptic Feedback

Wednesday, April 13, 2022

Have you ever felt your app is a bit flat? Yes, sure you can add animations, micro-interactions, some feedback, but in the end it always feels like the interaction with the app is flat. Fortunately, the answer is simpler than you think. The trick lies behind the react-native-haptic-feedback package.

Disclaimer

If you prefer a video tutorial, the same content of this article is fully available here:

React Native CLI

You can install it in your app by simply running:

yarn add react-native-haptic-feedback

On iOS always remember to run pod install from the iOS folder:

cd ios && pod install

And there it is, ready to be used.

import HapticFeedback from 'react-native-haptic-feedback';

const App: React.FC = () => {
  ...
};

Simply import the package into your React Native app and implement the trigger method. The method accepts two parameters:

A type of HapticFeedback
A set of options related to the operating system.

The types of HapticFeedback you have at your disposal are countless. impactLight, impactMedium, impactHeavy, rigid, soft, notificationSuccess... and so on.

To start with, I suggest you simply start with impactLight.

Connect the onPress function to the Touchable and you will immediately notice a huge improvement in the User Experience.

import HapticFeedback from 'react-native-haptic-feedback';

const App: React.FC = () => {
  const onPress = useCallback(() => {
    HapticFeedback.trigger('impactLight');
  }, []);

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={onPress}>
        <View style={styles.square} />
      </TouchableOpacity>
    </View>
  );
};

If on some versions of Android or iOS you don't notice the expected behavior, keep in mind that the trigger function accepts as a second parameter a set of options related to the operating system.

import HapticFeedback from 'react-native-haptic-feedback';

const options = {
  enableVibrateFallback: true /* iOS Only */,
  ignoreAndroidSystemSettings: false /* Android Only */,
};

HapticFeedback.trigger('impactLight', options);

Expo CLI

If your app is initialized with Expo (Haptics) you can simply use the package by running:

expo install expo-haptics

Conclusion

Want to learn more? Don't forget to subscribe to my YouTube channel or to the mailing list below!

Join my weekly newsletter

Every week I send out a newsletter sharing new things about React Native animations.