React Native SDK
Complete integration guide for the Encatch React Native SDK — in-app feedback and survey collection for React Native and Expo apps
The Encatch React Native SDK lets you collect in-app feedback and surveys in React Native and Expo apps. Display forms as a modal WebView overlay or inline in your layout, identify users, track screens and events, and submit responses to the Encatch backend.
Overview
- Package:
@encatch/react-native-sdk - Version: 1.2.0
- Platforms: Android, iOS
- Repository: github.com/get-encatch/react-native-sdk
Installation
npm install @encatch/react-native-sdkyarn add @encatch/react-native-sdkpnpm add @encatch/react-native-sdkThe SDK also requires these peer dependencies in your app:
npm install react-native-webview react-native-safe-area-context @react-native-async-storage/async-storageOptional peers for automatic screen tracking and device metadata: @react-navigation/native, expo-router, expo-application, expo-device, expo-localization, react-native-device-info, and react-native-localize.
Quick Start
1. Initialization
Wrap your app's root with EncatchProvider to initialize the SDK, start a session, and optionally enable automatic screen tracking. Mount EncatchWebView once at the root for modal forms.
import { EncatchProvider, EncatchWebView } from '@encatch/react-native-sdk';
export default function App() {
return (
<EncatchProvider
apiKey="your-api-key"
navigationType="expo-router">
<EncatchWebView />
{/* Your app content */}
</EncatchProvider>
);
}Use the useEncatch() hook inside any child component to access the SDK API. For inline forms, mount EncatchInlineForm in your screen component tree separately.
Pass an optional config object to customize SDK behavior:
<EncatchProvider
apiKey="your-api-key"
navigationType="react-navigation"
skippedRoutes={['/login', '/splash']}
config={{
theme: 'system',
debugMode: true,
isFullScreen: false,
apiBaseUrl: 'https://app.encatch.com',
appVersion: '1.2.3',
onBeforeShowForm: async (payload) => {
// Return false to prevent form from showing
return true;
},
}}>
<EncatchWebView />
<App />
</EncatchProvider>Prop
Type
EncatchProvider props:
| Prop | Type | Default | Description |
|---|---|---|---|
apiKey | string | — | Your Encatch API key (required) |
config | EncatchConfig | — | SDK configuration |
navigationType | 'expo-router' | 'react-navigation' | null | null | Enable automatic screen tracking |
skippedRoutes | string[] | [] | Routes to skip for screen tracking |
2. Identify users
Identify the current user. The userName is required (can be a username, email, or unique identifier). Traits and options are optional.
identifyUser('user@example.com');import { useEncatch } from '@encatch/react-native-sdk';
const { identifyUser } = useEncatch();
identifyUser('user@example.com', {
$set: { name: 'Alice', plan: 'team' },
});identifyUser('user@example.com', {
$set: { name: 'Alice', plan: 'team' },
$setOnce: { firstSeen: new Date().toISOString() },
$increment: { loginCount: 1 },
$decrement: { credits: 5 },
$unset: ['trialEndDate'],
});Prop
Type
User traits support the following operations:
| Operation | Description |
|---|---|
$set | Set user attributes (overwrites existing values) |
$setOnce | Set user attributes only if they don't already exist |
$increment | Increment numeric user attributes |
$decrement | Decrement numeric user attributes |
$unset | Remove user attributes |
Recommended
Using the secure option with a server-generated signature is recommended to verify that identification requests come from your backend. Keep your secret key on the server only — never expose it in client-side code.
Pass a server-generated HMAC signature so Encatch can validate the request. The generatedDateTimeinUTC timestamp limits the signature's lifespan.
identifyUser('user@example.com', undefined, {
secure: {
signature: 'your-hmac-signature',
generatedDateTimeinUTC: '2025-03-13T12:00:00Z',
},
});3. Show a form manually
Show a specific form by slug or ID.
import { useEncatch } from '@encatch/react-native-sdk';
const { showForm } = useEncatch();
showForm('feedback-form');
showForm('feedback-form', { reset: 'always' });Prop
Type
Prop
Type
| Reset mode | Behavior |
|---|---|
'always' | Reset pre-fill and response data on every form display |
'on-complete' | Reset only after the form is completed |
'never' | Never reset response data |
Pass caller context when showing a form:
showForm('feedback-form', {
reset: 'always',
context: { plan: 'team', feature: 'checkout' },
});Other actions
Inline Forms
Inline forms are a way to show Encatch in-app feedback without a modal — the survey renders directly in your layout instead of as a full-screen overlay.
Build Your Own Form UX & UI
If your feedback flow uses a fixed, predictable question set — the same fields and workflow every time — you can build the form with your own React Native components and submit responses through the SDK. That keeps typography, spacing, colors, and interaction patterns aligned with the rest of your app, so the survey feels like a native screen rather than an embedded web page.
Example coming soon.
Support
Was this page helpful?