Install the React Native SDK

​

What you need first

• Already have Signal on your website? Reuse the same publishable key and backend values. Your backend’s token endpoint already signs users, so the app calls that same endpoint. Do not pair and do not create anything in Hinto.
• No backend, and customers sign in with Supabase, Firebase, Clerk, Auth0, or another OpenID provider? The app passes that provider’s token, as Support identity without a backend shows. When a coding agent pairs, it sends identity_provider too.
• No Signal values anywhere you can read? A coding agent pairs as in Set up with a coding agent, steps 3 to 5, with "origins": []. If the claim answers existing, the organization already has its app: write publishableKey, and reuse the backend values its website’s backend already has, as step 4 says. Without an agent, an admin chooses Set up without a coding agent in Settings > Hinto Signal.

​

Install

npx expo install @gethinto/react-native@^0.9.2 @react-native-async-storage/async-storage expo-crypto expo-application expo-device

​

Start capture

import { HintoProvider, initHinto } from "@gethinto/react-native";

void initHinto({ apiKey: process.env.EXPO_PUBLIC_HINTO_PUBLISHABLE_KEY ?? "" });

export default function RootLayout() {
  return <HintoProvider>{/* your app */}</HintoProvider>;
}

<Pressable hintoLabel="Save book" onPress={save} />

​

Follow screens

import { useNavigationContainerRef } from "expo-router";
import { useTrackNavigation } from "@gethinto/react-native";

export default function RootLayout() {
  useTrackNavigation(useNavigationContainerRef());
  return <HintoProvider>{/* your app */}</HintoProvider>;
}

​

Sessions on a phone

​

Configuration

​

Client methods

​

Support in the app

• Your sign-in provider. Most apps without a backend. See Support identity without a backend.
• Your backend. It signs the support token for the signed-in user, the same way it does for the web. The token’s aud is HINTO_SIGNAL_APP_ID, the Signal app ID shown under Backend in Settings > Hinto Signal (applicationId when you paired). See Issue a token on your authenticated server.

​

Support identity without a backend

import { supabase } from "./supabase";

export async function supabaseSupportToken(forceRefresh: boolean): Promise<string> {
  const { data } = forceRefresh
    ? await supabase.auth.refreshSession()
    : await supabase.auth.getSession();
  if (!data.session) throw new Error("Support authentication required");
  return data.session.access_token;
}

// subject is session.user.id, the same ID capture's initialIdentity uses.
// <SupportProvider auth={session ? { subject: session.user.id, getToken: supabaseSupportToken } : null} ... />

​

The support screen

npx expo install @gethinto/react-native-support@^0.1.2 react-native-keyboard-controller react-native-reanimated react-native-worklets react-native-safe-area-context react-native-svg

import { HelpOffer, SupportConversation, SupportProvider } from "@gethinto/react-native-support";
import { KeyboardProvider } from "react-native-keyboard-controller";

<KeyboardProvider>
  <SupportProvider
    capture={capture}
    ingestKey={publishableKey}
    auth={user ? { subject: user.id, getToken: fetchSupportToken } : null}
    onReauthenticate={() => router.push("/sign-in")}
    theme={{
      colors: { accent: "#5b21b6" },
      fonts: { regular: "Inter-Regular", semibold: "Inter-SemiBold" },
    }}
  >
    <SupportConversation pickAttachment={pickFromLibrary} />
  </SupportProvider>
</KeyboardProvider>;

• SupportProvider connects once a customer is signed in, follows sign-outs and account switches without reconnecting, and destroys the runtime on unmount. useSupport reads its state, and useSupportEntry gives the unread count for a “Chat with us” row.
• SupportConversation is the whole conversation: the status steps, every state’s notice and actions, the transcript and the composer. Give it the whole screen, and do not pad it for the status bar, the home indicator or the keyboard: its header keeps clear of the status bar and the Dynamic Island, and it keeps the composer above the home indicator and moves it with the keyboard itself. If your screen draws its own bar above the conversation, such as a navigation header, pass topSafeArea={false}. Show it on a screen without a tab bar, such as a stack screen or a modal above your tabs: inside a tab navigator the tab bar covers the bottom edge, and the composer would sit a tab bar’s height away from the keyboard. headerActions puts your controls at the end of its header, such as a close button for a modal. style styles its outer view, and testID names it for your tests. pickAttachment is your own picker, returning { uri, name, type, size } files, or null when the customer cancels. If the picker throws, the conversation tells the customer their files could not be opened and logs [Hinto] pickAttachment failed with the error. Without pickAttachment there is no attach button. Hinto accepts PNG, JPEG, GIF, WebP, HEIC and HEIF images, PDF, plain text, CSV and JSON, up to 10 MB each (ATTACHMENT_TYPES and MAX_ATTACHMENT_BYTES), and refuses other files before they upload. iPhone photos can go straight from the picker: Hinto stores a HEIC or HEIF photo as a JPEG named .jpg.
• HelpOffer shows the Signal offer for one journey, with Contact support and Not now. It counts as shown only once it is on screen, which it measures itself (isOnScreen); inside a scrolling list, pass visible from the list’s viewability callback. onContactSupport opens your support screen.
• useSupportConversation and useHelpOffer give the same behavior as data, for a design you draw yourself, and createSupportController is the controller under them. SupportConversationView draws the stock conversation from the controls useSupportConversation returns, so you can wrap an action before it runs. It takes the same headerActions, topSafeArea, style and testID, and dateFormat ({ locale, timeZone }) for message times and day separators, which SupportConversation reads from SupportProvider. Without dateFormat it shows no times. selectView and projectView turn a runtime state into one of SUPPORT_VIEW_KINDS, with the REQUIRED_ACTIONS each kind must offer.
• Theme with theme: colorScheme picks lightTheme or darkTheme as the base, colors replaces single colors, and fonts names one font family per weight (regular, medium, semibold), as resolveTheme merges them. Name each weight’s font file as you loaded it: the kit then never sets a font weight on it. A weight you leave out uses the next lighter one. Without fonts the system font is used. Spacing, sizes and the type scale are fixed. Every control keeps a MIN_TOUCH_TARGET of 44 points, and text grows with the system text size up to 1.6 times. Translate with copy, which overrides defaultCopy key by key, as resolveCopy merges it, using the web kit’s keys. A localized app passes every key, including the function keys such as openAttachment(filename): each key it leaves out shows in English.

​

Limits

​

Verify it works

​

Related guides

• Privacy controls
• Journeys
• Identify users
• Hinto Signal
• Troubleshooting