ionic react haptic

click vibrate, phone vibrates

//tab3.tsx

import React, { useState } from 'react';

import {

  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,

  IonAlert, IonButton, IonCard, IonCardHeader,

  IonCardSubtitle, IonCardTitle, IonCardContent,

  IonItem, IonIcon, IonLabel, IonBadge, IonList,

  IonItemDivider, IonCheckbox, IonFab, IonFabButton,

  IonFabList, IonItemGroup, IonItemSliding,

  IonItemOptions, IonItemOption, IonNote, IonMenu,

  IonRouterOutlet, IonListHeader, IonMenuToggle,

  IonButtons, IonMenuButton, IonInput, IonSplitPane,

  IonPopover, IonSpinner, IonRadioGroup, IonRadio,

  IonRange, IonSearchbar, IonFooter, IonSegmentButton,

  IonSegment, IonToast, IonToggle, IonTextarea

} from '@ionic/react';

import ExploreContainer from '../components/ExploreContainer';

import './Tab3.css';

import {

  call, home, heart, pin, star,

  globe, basket, camera, bookmark

} from 'ionicons/icons';

import { Plugins, HapticsImpactStyle } from '@capacitor/core';

const Tab3: React.FC = () => {

  const { Haptics } = Plugins;

  return (

    <IonPage>

      <IonHeader>

        <IonToolbar>

          <IonTitle>Haptics Example</IonTitle>

        </IonToolbar>

      </IonHeader>

      <IonContent>

        <IonList>

          <IonItem>

            <IonButton onClick={() => Haptics.vibrate()}>vibrate</IonButton>

            <IonButton onClick={() => Haptics.impact({

              style: HapticsImpactStyle.Heavy

            })}>

              heavy</IonButton>

            <IonButton onClick={() => Haptics.impact({

              style: HapticsImpactStyle.Medium

            })}>

              medium</IonButton>

            <IonButton onClick={() => Haptics.impact({

              style: HapticsImpactStyle.Light

            })}>

              light</IonButton>

          </IonItem>

          <IonItem>

            <IonButton onClick={() => Haptics.selectionStart()}>start</IonButton>

            <IonButton onClick={() => Haptics.selectionChanged()}>change</IonButton>

            <IonButton onClick={() => Haptics.selectionEnd()}>end</IonButton>

          </IonItem>

          <span>

            some text, some text,<br />

            some text, some text,

            </span>

        </IonList>

      </IonContent>

    </IonPage>

  );

};

export default Tab3;

-------------------------
//androidManifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest package="capacitor.android.plugins"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:amazon="http://schemas.amazon.com/apk/res/android">
    <uses-permission android:name="android.permission.VIBRATE" />
<application >

</application>

</manifest>

---------------------------
reference:
https://capacitor.ionicframework.com/docs/apis/haptics#example