G-Tateth React Native SDK

The G-Tateth React Native SDK adds a complete customer support experience to your mobile app. It includes:

A support launcher and welcome screen
Help Center articles
Customer conversation history
New and existing conversations
Real-time agent replies
Image and file attachments
Customer ratings and feedback after a conversation is resolved
Branding and behavior controlled from the G-Tateth dashboard

The SDK works with iOS and Android React Native apps.

Requirements

An existing React Native or Expo application
A G-Tateth tenant ID or tenant domain
The G-Tateth API URL for your environment

1. Install the SDK

From the root of your React Native project, run:

npm install @g-tateth/react-native-sdk @react-native-async-storage/async-storage

The SDK already includes its chat UI, attachment support, clipboard image support, real-time communication, and tenant settings support. You do not need to install or configure those features separately.

2. Add the support component

Import GtatethSupport and render it in the screen where your customers should access support:

import { GtatethSupport } from "@g-tateth/react-native-sdk";

export default function SupportScreen() {
  return (
    <GtatethSupport
      config={{
        baseUrl: "https://api.g-tateth.com",
        tenantId: "YOUR_TENANT_ID",
        tenantDomain: "YOUR_TENANT_DOMAIN",
      }}
      customer={{
        firstName: "Jane",
        lastName: "Doe",
        email: "jane@example.com",
      }}
    />
  );
}

Replace the example customer and tenant values with values from your app and G-Tateth workspace. GtatethSupport manages the launcher, Help Center, Messages, chat screen, navigation, attachments, and feedback survey. Most integrations only need this one component. If your app already has a Help & Support screen and should open the welcome modal immediately instead of showing the launcher-only screen first, use both openHelpCenterOnMount and showLauncher={false}:

<GtatethSupport
  config={config}
  customer={customer}
  showLauncher={false}
  openHelpCenterOnMount
/>

openHelpCenterOnMount opens the modal containing “Send us a message” and “Help center” directly. showLauncher={false} removes the floating chat icon, which is useful when the host app already has its own Help & Support navigation.

Configuration

`baseUrl`

Use the API URL for the environment you are connecting to:

// Production
baseUrl: "https://api.g-tateth.com"

// Staging
baseUrl: "https://api.staging.g-tateth.com"

Tenant identity

Provide at least one of these values:

tenantId — the G-Tateth workspace ID
tenantDomain — the G-Tateth workspace domain

Providing both is recommended when both are available. These values identify the tenant and are not secret credentials. Do not place server API keys, database credentials, or other private secrets in the mobile app.

Customer

Pass the current customer from your host app:

customer={{
  firstName: currentUser.firstName,
  lastName: currentUser.lastName,
  email: currentUser.email,
  phone: currentUser.phone,
}}

The customer object is optional. Pass the customer’s email when you want the Messages screen to load and reopen their previous conversations.

Optional: control what happens when the customer closes support

By default, pressing the X button closes the support flow. If your app needs to perform another action, provide onClose:

function handleSupportClosed() {
  // Add an optional app-specific action here.
  console.log("Support closed");
}

<GtatethSupport
  config={config}
  customer={customer}
  onClose={handleSupportClosed}
/>

For example, your app can use this callback to navigate to another screen, reset local state, or record an analytics event.

Dashboard-managed settings

Clients configure the mobile support experience in: G-Tateth → Settings → Chat Widget The mobile app does not show a customer Settings screen. The SDK loads the tenant’s saved dashboard settings when the support experience opens. Dashboard settings can control:

Welcome screen, Help Center, Messages, and chat appearance
Header and bot image
Backgrounds, text, bubbles, borders, and dividers
Customer and agent message colors and borders
Composer background, divider, text field, attachment button, emoji button, and send button
Fonts, font sizes, theme, and branding visibility
Greeting, availability, typing indicator, sound, notifications, and chatbot behavior

To apply a dashboard change:

Open Settings → Product → Chat Widget.
Update the setting.
Click Save Widget Settings.
Close and reopen the support experience in the mobile app.

The client does not need to add colors, fonts, attachment code, or dashboard settings to the React Native project.

Troubleshooting

Tenant not found

Check that the tenantId or tenantDomain exactly matches the values provided by G-Tateth and that the correct baseUrl is being used.

Settings are not updating

Confirm that the dashboard setting was saved, then close and reopen the support experience. The SDK fetches the latest tenant settings when it opens.

Blank or stale screen during Expo development

Restart Expo and clear the Metro cache:

npx expo start -c

Customer conversations are missing

Confirm that the current customer’s email is being passed in the customer prop.

Need help?

Contact the G-Tateth team if you need your tenant ID, tenant domain, API URL, or help configuring the dashboard.

Get Started

Guides

Integrations

SDKs

Resources

React Native SDK

G-Tateth React Native SDK

Requirements

1. Install the SDK

2. Add the support component

Configuration

`baseUrl`

Tenant identity

Customer

Optional: control what happens when the customer closes support

Dashboard-managed settings

Troubleshooting

Tenant not found

Settings are not updating

Blank or stale screen during Expo development

Customer conversations are missing

Need help?

​G-Tateth React Native SDK

​Requirements

​1. Install the SDK

​2. Add the support component

​Configuration

​baseUrl

​Tenant identity

​Customer

​Optional: control what happens when the customer closes support

​Dashboard-managed settings

​Troubleshooting

​Tenant not found

​Settings are not updating

​Blank or stale screen during Expo development

​Customer conversations are missing

​Need help?

G-Tateth React Native SDK

Requirements

1. Install the SDK

2. Add the support component

Configuration

`baseUrl`

Tenant identity

Customer

Optional: control what happens when the customer closes support

Dashboard-managed settings

Troubleshooting

Tenant not found

Settings are not updating

Blank or stale screen during Expo development

Customer conversations are missing

Need help?