How to Add Arabic Voice Control to a React Native App (2026 Guide)

The fastest way to add Arabic voice control to a React Native app is to drop in a native voice SDK instead of wiring up a raw speech-to-text library yourself. [Voqal](/docs) ships a React Native wrapper (`@voqal/react-native`) over its native iOS SDK that gives you Arabic dialect recognition, English, sub-1-second latency, and a themed voice UI sheet — and crucially, it turns speech into actions inside your app, not just transcribed text. This tutorial walks through the full integration: install, configure credentials, initialize, and present the assistant.

This guide is iOS-first (Android is on the roadmap). Code snippets below are illustrative — the exact, current API signatures live in the Voqal docs.

Why not just use a raw STT library?

Before the steps, the question every team asks: why not @react-native-voice/voice or Picovoice?

The short answer: those tools give you transcription, not a working voice feature. They hand you a string. You still have to build everything that makes voice useful.

`react-native-voice` is a thin bridge over Apple/Google speech APIs — great for dictation, but it stops at the transcript and struggles on older Android builds. Picovoice runs fully on-device, which is excellent for wake words and a fixed command grammar, but you define every intent ahead of time and still build the entire experience around it. Neither is built for Arabic dialects, and neither does anything with what the user said.

Voqal is the layer above transcription: the user speaks, and your app acts — check a balance, create an invoice, navigate, confirm a payment — with a UI and dialect handling already solved. If you're weighing the trade-offs in depth, see why building Arabic voice in-house takes ~6 months while SDKs ship in days.

Prerequisites

• A React Native app (0.71+ recommended) with the iOS project set up.
• macOS with Xcode and CocoaPods installed.
• An iOS deployment target of 16.0 or higher (the native SDK uses iOS-16-only UI APIs).
• A Voqal publishable key (pk_live_...) — join the waitlist to get one.
• A way to fetch the end user's auth token at runtime (your existing login/session). Voqal forwards this token so the assistant can act on behalf of the signed-in user.

Step 1 — Install the package

The React Native wrapper is currently distributed via the VoqalAI GitHub. Add it to your app:

# from your React Native project root
yarn add github:VoqalAI/react-native-voqal
# or
npm install github:VoqalAI/react-native-voqal

Then install the native iOS dependency. Because the wrapper bridges a native XCFramework, you must run pod install:

cd ios && pod install && cd ..

Make sure your ios/Podfile platform line is at least:

platform :ios, '16.0'

Voice requires microphone permission. Add a usage description to ios/<YourApp>/Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>We use your microphone for voice control.</string>

Step 2 — Configure credentials

Voqal needs two things at runtime: your publishable key (identifies your app/tenant) and the current user's token (so actions run as that user). The publishable key is safe to ship in the client; the user token should be fetched live from your auth layer on every session, never hardcoded.

The core concept is a small config object plus a credentials provider — a function (or delegate) that returns a fresh user token whenever Voqal asks for one:

// voqalConfig.ts  (illustrative — see /docs for exact fields)
import { getUserToken, getUserMetadata } from './auth';

export const voqalConfig = {
  apiKey: 'pk_live_your_publishable_key',
  // requestId prefix routes the environment: 'prod-' for production.
  requestId: 'prod-rn-app',
  theme: {
    accentColor: '#2d5bff',
    mode: 'dark',
  },
  // Called live on every request so the token is always fresh.
  credentials: {
    getToken: async () => getUserToken(),
    getMetadata: async () => getUserMetadata(), // e.g. { country_code: 'EG', user_id }
  },
};

Returning the token live matters: if a user's session refreshes, Voqal picks up the new token on the next turn without a re-init.

Step 3 — Initialize

Call setup() once, early in your app lifecycle (for example, in your root component's mount). This validates the key and prepares the native layer.

import Voqal from '@voqal/react-native';
import { voqalConfig } from './voqalConfig';

useEffect(() => {
  Voqal.setup(voqalConfig);

  // Optional but recommended: open the connection ahead of time so the
  // first real voice turn is fast instead of cold.
  Voqal.prewarm();
}, []);

prewarm() opens the backend connection and primes the assistant before the user taps anything. Calling it at launch (or when the user lands on the screen that hosts the assistant) is the single biggest perceived-latency win — it turns a cold first turn into a warm one.

Step 4 — Present the assistant

When the user taps your voice button, present the drop-in assistant sheet. You don't build the mic UI, waveform, or result rendering — Voqal ships a themed sheet that handles listening, thinking, and speaking states.

import { Pressable, Text } from 'react-native';
import Voqal from '@voqal/react-native';

function VoiceButton() {
  return (
    <Pressable onPress={() => Voqal.present()}>
      <Text>🎙️ Talk to the assistant</Text>
    </Pressable>
  );
}

That's the whole happy path: setup() once, present() on tap. The user speaks in Arabic or English, Voqal transcribes, interprets, runs the action, and speaks the result back — voice-in produces voice-out, while typed turns stay silent text.

Step 5 — Handle Arabic dialects

Voqal is built for MENA, so Arabic is a first-class input, not an afterthought. It recognizes Egyptian, Gulf, Levantine, Maghrebi, and Iraqi dialects as well as English, and a user can code-switch mid-sentence (very common in the region) without you doing anything special.

A few practical notes:

• Spoken replies use Modern Standard Arabic (فصحى). The assistant understands dialect input but answers in clean MSA, which reads as professional across every market — you don't get a Gulf reply to an Egyptian user.
• Pass country_code in metadata. It helps Voqal bias recognition and tailor responses (currency, regional phrasing). Set it from your user profile in the getMetadata provider above.
• RTL is handled in the sheet. The drop-in UI renders Arabic right-to-left correctly, including mixed Arabic/Latin text.

If you're comparing dialect coverage across providers, see the best Arabic voice and speech-to-text APIs for 2026 and the full Arabic voice SDK guide.

Step 6 — Test

Voice features are hard to test from the iOS Simulator because the mic is limited, so test on a real device:

1. Run `npx react-native run-ios --device` (or build and run from Xcode on a connected iPhone). 2. Grant the microphone permission prompt on first launch. 3. Tap your voice button and try a few real phrases in different dialects, for example: - Egyptian: «عايز أشوف رصيدي» - Gulf: «أبغى أسوي فاتورة جديدة» - English: "Show me my last five transactions." 4. Confirm the assistant both answers and performs the action, and that any sensitive action surfaces a confirmation step before it runs.

If the first turn feels slow, verify prewarm() is actually being called before the user opens the sheet.

Step 7 — Going to production

• Use a production requestId prefix (e.g. prod-) so traffic routes to the production environment.
• Never hardcode the user token. Keep it flowing through your live getToken provider so refreshes and logouts are respected.
• Confirm your deployment target is iOS 16+ in both the Podfile and Xcode build settings; older targets won't link the native SDK.
• Theme to match your brand via the theme object so the sheet feels native to your app.
• Plan for Android. It's on the roadmap; today the wrapper drives the iOS SDK, so gate the voice button on iOS until Android ships.

For the complete, current API surface — every config field, the credentials delegate contract, and event callbacks — read the Voqal docs. Building on Flutter instead? See the Flutter Arabic voice tutorial.

FAQ

Does Voqal work offline? No. Voqal runs recognition and the action layer through its backend to deliver dialect accuracy and voice-to-actions, so it needs a network connection. If you specifically need offline, fixed-grammar commands, an on-device engine like Picovoice fits that narrow case — but you'll build the rest yourself.

Which Arabic dialects are supported? Egyptian, Gulf, Levantine, Maghrebi, and Iraqi, plus English. Users can mix Arabic and English in the same sentence. Spoken responses come back in Modern Standard Arabic.

How is this different from react-native-voice? react-native-voice gives you a transcript and stops there. Voqal interprets the speech, executes the corresponding action in your app, speaks the result, and ships the UI and Arabic dialect handling — the parts you'd otherwise build by hand.

Is it really sub-1-second? Warm turns target sub-1s latency. The first turn after a cold start is slower because of connection setup; calling prewarm() at launch keeps the connection hot so users get the fast path from the first tap.

Does Android work today? Not yet. The React Native wrapper currently drives the native iOS SDK; Android is on the roadmap. Gate your voice entry point on iOS for now.

Ready to add Arabic voice to your React Native app? Join the waitlist for a publishable key, then follow the steps above — most teams have a working voice feature in a day. Full reference: Voqal docs.