DEV Community

Cover image for React Native Haptic Feedbacks
Santhosh Umapathi
Santhosh Umapathi

Posted on

React Native Haptic Feedbacks

Introduction

Haptic feedback is the use of touch to communicate with users. Most people know the feeling of vibration in a mobile phone, different sorts of vibrations, usually felt with your hands, are the most common form of haptic feedback on mobile devices. In this post, we will explore how to set up Haptic Feedbacks at the touch of a button in React Native. Without further ado, let's dive right into the action.

Installation:

Set up your base project from React-Native with the help of official docs of React-Native

Then install the 'react-native-haptic-feedback' library in your project with the below commands using NPM or Yarn.

Npm:

npm i react-native-haptic-feedback

Yarn:

yarn add react-native-haptic-feedback

Usage:

Navigate to the root file of your project, in our example, its App.Js. Import the ReactNativeHapticFeedback and set up the default options.

App.js:

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

function App() {
const options = {
enableVibrateFallback: true,
ignoreAndroidSystemSettings: false,
};

// Haptics Handler
const triggerHaptic = (type) =>
ReactNativeHapticFeedback.trigger(type, options);

return (
<View>
<Button onPress={() => triggerHaptic('impactLight')} title='Soft' />
<Button onPress={() => triggerHaptic('impactMedium')} title='Medium' />
<Button onPress={() => triggerHaptic('impactHeavy')} title='Hard' />
</View>
);
}

As easy as that!

There is a lot more haptics available from this library, check out their docs to make the most out of it and give your users an amazing haptics experience on your next React Native apps.

That's it for today folks ! Thank you for reading all the way through.

Let's catch up soon on the next one.

Originally published on: https://blogs.appymango.com/blogs/6289c816b924c21f1e552648

Discussion (0)