Zenn
☕

React Nativeに触覚フィードバックを追加して気持ちいいアプリを作る|Haptics(ハプティクス)のすゝめ

2021/12/03に公開
Android
iOS
React Native
Expo
haptics
tech

やりたいこと = アプリでボタンを押した時などに「カクッ」となるあれを実装したい

Twitter、Instagramで「いいね」ボタンを押した時、「カクッ」と物理的に振動を感じます。
YouTubeアプリでフィードをリフレッシュするときも「シュポッ」と感じます。

アプリをリリースして数ヶ月経過するまでこの体験をまったく意識したことがありませんでしたが、実はこれが「快」を与えているのではないかと思い使ってみました。

サンプルコード

こちらに上げています。
試す場合は以下のコマンドを順に実行してみて下さい。(Expo Goは前提としています。)

  1. git clone -b haptics https://github.com/naoyahieda/react_native_samples.git
  2. cd react_native_samples
  3. yarn install
  4. yarn start --tunnel

既存のコードに追加する場合のみ

expo install expo-haptics

バージョン

"react-native": "0.64.3",
"expo": "~43.0.2",
"expo-haptics": "~11.0.3",

書き方

Expoのサンプルを参考にしました。

App.js (Github)

<Button 
  color = "green" 
  title='成功' 
  /* ↓ここ↓ */
  onPress={() => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success) } 
/>

Hapticsのバリエーション

メソッドとしてはimpactAsync、notificationAsync、selectionAsyncの３通りあるようです。

notificationAsync

Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
Successの他にError, Warningが選択できます。

impatcAsync

Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
Lightの他にMedium,Heavyが選択できます。

selectionAsync

Haptics.selectionAsync()
↑はとても軽いリアクションです。

おまけ

最近スタバのアプリにハマっています。特にモバイルオーダが最高で列に並ばずコーヒーを注文できるのがとてもいいです！ぜひ試して見てください！

しかしこのスタバアプリ、体験自体は素晴らしいのですが、狭義UXが今ひとつな感じがあります。Haptics含め今後改善にとても期待しています！参考

参考

Expo公式
UIFeedbackGeneratorの使い方と便利に使えるライブラリ

最後に

弊社では、現役東大生の家庭教師がかんたんに見つかる家庭教師個人契約アプリカテアプリ東大生を開発、運営しています。ぜひインストールしてみてください！
UIUXでアドバイスなどあればぜひお願いします！

Discussion