Install Talkieback with React Native and Expo

The @talkieback/react-native package draws the button natively and opens the Talkieback panel. Allow ten minutes.

You need your app ID (pk_live_…). You will find it on the “Installation” page of your app, in Talkieback.

1
Step 1: Add the package
In your app folder:
Terminal
```
npx expo install @talkieback/react-native
```
Without Expo: npm install @talkieback/react-native, then pod install in the ios folder.
2
Step 2: Allow the microphone
The plugin adds the microphone access request to Info.plist and AndroidManifest.xml. Write the sentence your users will see.
app.json
```
{
  "expo": {
    "plugins": [
      ["@talkieback/react-native", {
        "microphonePermission": "To leave a voice message for the team."
      }]
    ]
  }
}
```
The microphone is only requested the first time the button is pressed, never at launch.
Without Expo, add these lines by hand:
ios/MyApp/Info.plist
```
<key>NSMicrophoneUsageDescription</key>
<string>To leave a voice message for the team.</string>
```
android/app/src/main/AndroidManifest.xml
```
<uses-permission android:name="android.permission.RECORD_AUDIO" />
```

Step 3: Place the button

Wrap your app in the provider, with your app ID, and say which screen the user is on. The screen name arrives with each piece of feedback.

App.tsx

import { TalkiebackProvider, FeedbackButton } from '@talkieback/react-native';

export default function Root() {
  return (
    <TalkiebackProvider
      appKey="pk_live_…"
      place={{ name: routeName, params }}>
      <App />
      <FeedbackButton />
    </TalkiebackProvider>
  );
}

4
Step 4: Check
Run the app in development. The list of checks shows in the console and on the “Installation” page in Talkieback. Then send some test feedback.
App.tsx
```
import { Talkieback } from '@talkieback/react-native';

if (__DEV__) Talkieback.check();
```

Going further

Notify your users

Add your Expo access token, or your FCM and APNs keys, to your app settings in Talkieback. The package registers the device on its own, and tapping a notification opens the right thread.

Once feedback is sent, the panel offers “Notify me when they reply”. Give the provider the permission request and the token, here with expo-notifications:

App.tsx

import * as Notifications from 'expo-notifications';

async function askPush() {
  const { granted } = await Notifications.requestPermissionsAsync();
  if (!granted) return null;
  return (await Notifications.getExpoPushTokenAsync()).data;
}

<TalkiebackProvider appKey="pk_live_…" onPushRequest={askPush}>

When the user taps a notification, the panel opens on the right thread:

TypeScript

Notifications.addNotificationResponseReceivedListener((response) => {
  Talkieback.handleNotification(response);
});

Recognize your signed-in users

Pass user and userHash to the provider:

App.tsx

<TalkiebackProvider
  appKey="pk_live_…"
  user={{ id: String(user.id), email: user.email, name: user.name }}
  userHash={hashFromServer}
  place={{ name: routeName, params }}>

The hash is computed on your server, with the app secret: HMAC-SHA256(secret, id). Your users then find their feedback on all their devices. Pro and Business plans. The computation for Node, Python, PHP and Supabase.

Attach information and follow replies

TypeScript

import { Talkieback } from '@talkieback/react-native';

// attached to each piece of feedback
Talkieback.context({ plan: 'pro', deck: 'axis' });

// get notified when the user sees a reply from the team
Talkieback.onReply((reply) => console.log('Reply seen', reply));

Your own button, without the floating button

In Settings › Appearance, “When does it show?”: “Always” during a beta; “Always, can be hidden” so your users can drag it onto the cross at the bottom of the screen; “From your app” in production, where the floating button only appears once the team has replied. A button in your app then opens the panel, next to it:

TypeScript

import { useRef } from 'react';
import { Pressable, Text } from 'react-native';
import { Talkieback, useTalkieback } from '@talkieback/react-native';

function IdeaButton() {
  const ref = useRef(null);
  const { unread } = useTalkieback(); // for a badge
  return (
    <Pressable ref={ref} onPress={() => Talkieback.open({ anchor: ref })}>
      <Text>Idea or bug?{unread ? ` (${unread})` : ''}</Text>
    </Pressable>
  );
}

// or bring the hidden floating button back
Talkieback.show();

Stuck on a step? Write to us.

Step 1: Add the package

Step 2: Allow the microphone

Step 3: Place the button

Step 4: Check

Going further