React Native Custom Haptics

• 12 min read

A tool for designing and sharing vibrotactile impact patterns, streamlining the collaboration between designers and engineers.

React Native Custom Haptics cover picture

Table of Contents

About the Project

I often find myself struggling with how to design and develop haptic feedback efficiently. I am unsure of what type of feedback to use and struggle to communicate my vision to others. This project aims to tackle this exact issue and provide a solution that will streamline the process.

The solution is a prototype that includes both an open-source module published as an npm package and a mobile application. The developed package introduces a new method for developing vibrotactile impact patterns in React Native. This approach will help designers and developers alike to create more dynamic and engaging applications. While it may not be groundbreaking, it represents a step forward in React Native development.

With the application, designers can create custom vibrotactile impact patterns, export them, and seamlessly deliver them to the engineers responsible for developing the application. The patterns can be easily integrated into any React Native application that uses the developed npm package

"Haptics" vs "Vibrotactile Feedback"

Although the project focuses on vibrotactile feedback, the industry often uses the terms ”haptic feedback”, or simply ”haptics” to refer to the term. However, the terms are not precise as haptic feedback includes any feedback involving the sense of touch. For easier understanding, and to respect the external consistency, I use the industry terms for the created prototype and its documentation.

Existing Vibration APIs

World Wide Web Consortium (W3C) defined an API that allows for a method to access the vibration mechanism of the hosting device. However, at the time of writing, iOS browsers don't implement the API.

Two of the most actively maintained open-source packages for creating vibrotactile impact inside React Native projects are expo-haptics, and react-native-custom-haptic-feedback.

Both of the packages provide a subset of functionalities the iOS and Android native APIs offer. However, they offer only an intersection of vibrotactile impacts that are felt similarly on both modern Android and iOS smartphones.

Design Process

The design process consisted of four phases, each aiming to answer one of the following questions:

  • Who is the user?
  • What is possible?
  • What should it be?
  • Does it work?

Who is the user?


To gain insight into the world of vibrotactile feedback, I conducted interviews with four talented product designers. While two of them had experience designing vibrotactile interfaces, the other two brought a fresh perspective to the table.

It was useful to hear from the interviewees who hadn't worked on haptic design before. They described instances when they came across applications that utilized it, and as product designers, they made a point to archive interesting interactions and UI elements for inspiration.

The designers with experience in vibrotactile feedback had a wealth of knowledge to share. They explained the challenges they faced when trying to communicate their desired vibrotactile pattern to developers. In some cases, they would attempt to mimic the patterns with sounds, while others turned to documentation as a last resort.

The table below is a list of breakdowns, workarounds, and user innovations found during the interviews.

Table of breakdowns, workarounds, and user innovations in regards to designing vibrotactile feedback

User Personas and an Extreme Character

When it comes to developing fictitious users, two popular methods are user personas and extreme characters. Both techniques involve giving the user a name, age, occupation, and personality traits. However, extreme characters take things a step further by describing a user with an exaggerated personality. Think of it as creating a caricature of a user, where their quirks and tendencies are amplified for effect. It's a fun way to approach user research and can yield some unexpected insights.


, 33

Senior Front End developer

  • React Native expert.
  • Knows the code base very well, and is familiar with its limitations.
  • Has never worked with vibrotactile feedback in a React Native application, but is aware what is possible.


, 27

Junior Product designer

  • Familiar with the design system, but often needs to design components and screens that the design system does not support.
  • Works on one product at the time.
  • Not familiar with development
  • Has never designed for vibrotactile feedback


, 38

Senior Product designer

  • Extreme: In charge of many aspects of the design systtem and the design process. Has to maintain the design system, be aware of how much of it is implemented inside the codebase, and still has to work on other projects and hold design meetings.
  • The most senior designer in the company.
  • Owns the design system—developed it and is currently maintaining it.
  • Used to work as a front-end developer, but switched to design 10 years ago.
  • Has limited experience working with vibrotactile feedback.

Current scenario

The current scenario is a short scenario of a situation all the personas interact in. It describes how would the personas approach a certain task with the technology available today. It consists of a realistic setting, date, time, and context.

The scenario was an interaction between the personas while developing a feature that required vibrotactile feedback. The method helped in visualizing the design problem.

Preview of the created scenario

This picture is exaggerated for effect—the scenario is not as long

User Profile

Analyzing the results of the completed methods, I defined a user profile. The user profile represents future users of the designed system.

The system's users work on a product that requires fast delivery of new features (e.g. a startup). They work on the user interface of a mobile application written in React Native. The allocated time they spend developing a feature rarely accounts for the development of non-visual interfaces. With limited time, they need a solution for developing vibrotactile feedback that doesn't require extensive research of the technology.

What is Possible?


Individual Brainstorming. I created a document where over the course of a week I individually added ideas to a list. I discussed the list with the design team. We voted on the ideas each of us found interesting to focus on. The voting helped create a more focused set of ideas.
Crazy 8s. After the individual brainstorming, I lead another brainstorming session with a team of designers. The method of creating eight interaction snippets in eight minutes helped to generate many design concepts. After the session each team member presented their ideas, and the team voted on the most interesting ones. The image below shows the result of the brainstorming session.
Crazy 8s brainstorming session

Design Dimensions and Design Space

The key ideas generated through the brainstorming sessions, or found through user research have certain attributes or dimensions. For example, increasing the font size helps with the accessibility of the system, while creating a custom palette improves its personalization. The defined design dimensions are arranged into a design space.

Defining a design space helps visualize the key ideas, and observe which area they focus on. It helps find gaps they don't fill. Moreover, ideas can be shifted in any direction in the design space to help discover how they change in the context of another dimension.

I categorized the ideas with the help of the design dimensions and design space. The design space is shown in the image below. Shifting ideas along the dimensions of the design space resulted in more ideas.

Design Dimensions developed during the design process

Design Concept

The methods resulted in a design concept that would be worked on during the next two phases of the design process.

The system will be a tool that allows designers to design vibrotactile impact patterns. Vibrotactile impact patterns are sets of vibrotactile impacts with various strengths with short pauses between each impact. The tool allows choosing the impact strength, and the length of the pause between each impact. The created pattern can be exported and pasted into the application code.

What Should it Be?

Future Scenario

The future scenario is a method similar to the current scenario method. It is a scenario of a situation that includes all the personas using the designed system. It builds upon the situation from the current scenario and imagines how would the personas interact with the new technology. The method helps identify gaps in the design concept, and to generate new ideas.

The scenario I created used the situation from the current scenario as the basis. The only change I added was the new fictitious tool imagined from the design concept. The future scenario highlighted potential breakdowns.


The tool is comprised of two integral components that work in tandem to provide a seamless experience. The first component is a mobile application that facilitates the creation, modification, and exporting of vibrotactile impact patterns. The second component is a tool that enables the use of exported patterns within a React Native application.

Throughout the project, I developed two prototypes to test the functionality of the tool. The first prototype focused solely on the pattern creation application, while the second prototype was an integrated version of the entire system.

The culmination of the project is the final prototype, which consists of two key components that work seamlessly together to allow users to create custom vibrotactile impact patterns.

The first component is a TypeScript module that has been published as an npm package, and offers a React Native API for the creation of individual vibrotactile impacts that can be combined to form vibrotactile patterns. The code developed during the first prototype served as the foundation for the development of this package.
The second component is a mobile application, developed in React Native, that allows for the creation of custom vibrotactile impacts. The patterns created within the mobile application can be exported and used within any React Native application that utilizes the developed npm package.
Prototype of the system

Does it Work?


After showcasing the prototype to the team of designers, I received valuable feedback that allowed me to identify areas of improvement for the tool.

  • I noticed that not all of the patterns created were production-ready. While patterns can be saved by pasting them inside the application code, this can be time-consuming and not efficient during the early stages of design. As a result, I plan to update the tool to allow designers to save created patterns for future reference.

  • Another issue that the team pointed out was the inability to compare created vibrotactile patterns. Since only one pattern can be created at a time, the participants found it difficult to compare them effectively. To solve this problem, I plan to add a feature to the tool that allows designers to compare saved patterns side-by-side.

  • Lastly, while the tool relies on the universal clipboard to copy and paste strings between iOS and macOS devices, it was pointed out that this process could be improved. To address this issue, I plan to implement a feature that helps with easier exporting of the created patterns.


The available packages for React Native only support pre-determined vibrotactile impact patterns such as success, warning, and danger notifications, and do not allow for the creation of custom patterns. The pattern of impacts and pauses is determined by the operating system of the device the pattern is played on.

However, none of the packages support the creation of custom vibrotactile impact patterns. Due to those reasons, if custom vibrotactile impact patterns are needed for an application developed in React Native, it's not possible to do so without changing the native code, or developing a custom JavaScript solution. For my project, I did the latter and published the developed code as an npm package. The package is called react-native-custom-haptics and is available as an open-source package in the npm database.

I also designed and developed a tool that allows for the generation and preview of custom vibrotactile impact patterns. It is an Android and iOS application written in React Native with TypeScript. The application consists of two main parts—the pattern creation tool, and an interactive area with examples of custom vibrotactile patterns.

Prototype of the system
Prototype of the system
Prototype of the system


The initial version of the open-source TypeScript module has been published to the npm database, and I will continue to develop and maintain it. While the package currently allows for the creation of custom vibrotactile impact patterns, it is limited to the types of vibrotactile impact exposed through the React Native API. Moving forward, I plan to explore the possibility of supporting the creation of entirely custom vibrotactile feedback. Although the process for generating custom feedback types varies based on the phone's operating system and vibration motor, it may be possible to develop a method for mapping similar vibrotactile feedback types.

The mobile application prototype that I developed will be released on the Apple App Store and Google Play Store. This app will enable npm package users to test the package's features and easily develop vibrotactile impact patterns for their mobile applications.

Thank you for reading!

Feel free to play around with the package.
If you really like it, you can buy me a coffee.


8 min read

Save, modify, and extend recipes to suit your needs. An iPad app that adjusts recipes to the needs of its users.



6 min read

An interactive timeline tool used for versioning of InDesign projects.



6 min read

Mobile application designed, developed, and deployed in seven days. Keep track of when was the last time you did something

Go Home