Haptic feedback | Neural Native

Enable it in the native app

Available from Neural Native 0.1.0-beta.5. Haptics are off by default. Install the compatible native module with Expo, then rebuild your Android or iOS app; restarting JavaScript alone does not link a new native module.

terminal

npx expo install expo-haptics

Create src/haptics.ts below. Import hapticProviders in your existing startup file and spread it into the providers array of the mount() options. Keep the template’s other providers and renderer configuration.

src/haptics.ts

import { provideNeuHaptics } from '@neural-ui/native/haptics';

export const hapticProviders = [
  provideNeuHaptics({
    enabled: true,
    pressStyle: 'light',
    minimumIntervalMs: 80,
  }),
];

Choose feedback for each control

Buttons and internal pressable actions use the configured pressStyle. Checkbox, Switch, Radio and Slider request a selection tick when their value changes through user interaction. Disabled or readonly controls, programmatic value changes, a radio already selected and a slider at its limit do not add a selection tick.

Button, IconButton, Checkbox, Switch, Radio and Slider expose haptic. Use false to silence one control. Available feedback values are press, selection, light, medium, heavy, soft, rigid, success, warning and error. press uses the configured pressStyle. minimumIntervalMs bounds repeated requests during rapid interaction.

template.html

<neu-button label="Continue" haptic="light" (pressed)="continue()" />
<neu-button label="Silent action" [haptic]="false" (pressed)="continue()" />

Respect the user’s preference

NeuHaptics.enabled is a writable signal. Connect it to an application setting to turn feedback on or off without remounting controls. The example below tests notification feedback explicitly; its button silences the ordinary press feedback to avoid two requests for one action.

src/app/feedback-preferences.component.ts

import { Component, inject } from '@angular/core';
import { View } from '@ng-native/components';
import { NeuHaptics } from '@neural-ui/native/haptics';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-feedback-preferences',
  imports: [View, NeuSwitchComponent, NeuButtonComponent],
  template: `
    <view class="preferences">
      <neu-switch
        label="Haptic feedback"
        [checked]="haptics.enabled()"
        (checkedChange)="haptics.enabled.set($event)"
        [haptic]="false" />
      <neu-button
        label="Test confirmation feedback"
        [disabled]="!haptics.enabled()"
        [haptic]="false"
        (pressed)="haptics.play('success')" />
    </view>
  `,
  styles: `.preferences { padding: 24px; gap: 16px; }`,
})
export class FeedbackPreferencesComponent {
  readonly haptics = inject(NeuHaptics);
}

For a real operation, call play("success") only after the operation succeeds. Haptic feedback supplements visible messages and accessible state; it does not replace them.

Availability and testing

available reports whether the native module is linked. play() reports whether a request was dispatched, not whether a motor vibrated. The operating system can suppress feedback. A missing module or a failed request does not block the control’s normal action.

The web preview cannot reproduce native touch feedback. Emulators and simulators can verify module calls and control behavior; only a physical device can verify the sensation. Test your app with feedback enabled, disabled and unavailable.