> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getstrada.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

Add the Strada chat widget to your React Native mobile app by installing the SDK package.

<Info>
  Need help with implementation? Contact your Strada team for guidance. Your development team is responsible
  for the final integration.
</Info>

## Installation

Install the SDK and required peer dependencies:

```bash theme={null}
npm install @stradahq/react-native-sdk react-native-webview react-native-safe-area-context
```

or with yarn:

```bash theme={null}
yarn add @stradahq/react-native-sdk react-native-webview react-native-safe-area-context
```

## Platform Setup

This SDK uses autolinking (RN 0.60+). No custom Podfile changes are required.

### iOS

After installing the peers, run CocoaPods:

```bash theme={null}
cd ios && pod install
```

### Android

No additional steps beyond autolinking.

## Basic Implementation

Import the SDK and add it to your app. Replace `<YOUR-ORGANIZATION-ID>` and `<YOUR-AGENT-ID>` with your organization and agent IDs.

```typescript theme={null}
import { useRef } from 'react';
import { View, Button } from 'react-native';
import { StradaWidget, type StradaWidgetRef } from '@stradahq/react-native-sdk';

export default function App() {
  const widgetRef = useRef<StradaWidgetRef>(null);

  return (
    <View style={{ flex: 1 }}>
      <Button title="Open Chat" onPress={() => widgetRef.current?.open()} />

      <StradaWidget
        ref={widgetRef}
        organizationId="<YOUR-ORGANIZATION-ID>"
        agentId="<YOUR-AGENT-ID>"
      />
    </View>
  );
}
```

<Note>You can find your Organization ID and Agent ID in the Strada dashboard.</Note>

## That's it!

You should now see a small chat button on the bottom right corner of your app. Tap the button to open the chat widget.

<Check>
  The Strada React Native SDK also supports a rich set of props and methods that you can use to customize the
  behavior of your widget. For example, you might want to hide the button and control the widget
  programmatically, pass user metadata, or authenticate users. The [React Native SDK
  reference](/sdks/react-native/sdk-api-reference) covers all of these options and more.
</Check>

## Pass User Data

Use `metadata` to pass information about a user to Strada for attribution and analytics purposes. This data is not accessible to the AI agent during conversations.

```typescript theme={null}
<StradaWidget
  ref={widgetRef}
  organizationId="<YOUR-ORGANIZATION-ID>"
  agentId="<YOUR-AGENT-ID>"
  metadata={{
    userId: '12345',
    accountType: 'premium',
    signupDate: '2024-01-15'
  }}
/>
```

To change these values after initialization, use the [setMetadata](/sdks/react-native/sdk-api-reference#setmetadata) method.

<Note>Meta field keys should not include whitespace, emojis, or special characters.</Note>

## Pass Agent Variables

Use `agentVariables` to inject information into your agent's chat conversations. Unlike `metadata`, these variables are accessible to the AI agent and can be used to customize agent behavior, provide context, or personalize the conversation experience.

```typescript theme={null}
<StradaWidget
  ref={widgetRef}
  organizationId="<YOUR-ORGANIZATION-ID>"
  agentId="<YOUR-AGENT-ID>"
  agentVariables={{
    first_name: 'John',
    last_name: 'Doe',
    email: 'john@example.com'
  }}
/>
```

## User Authentication

Implement secure user verification by providing a `getUserToken` function that returns a JWT token. This establishes an authenticated identity for each chat session.

```typescript theme={null}
<StradaWidget
  ref={widgetRef}
  organizationId="<YOUR-ORGANIZATION-ID>"
  agentId="<YOUR-AGENT-ID>"
  getUserToken={async () => {
    const response = await fetch('https://your-api.com/strada-token');
    const { token } = await response.json();
    return token;
  }}
/>
```

<Info>
  The `getUserToken` function should return a Promise that resolves to a JWT token string, or `null` if
  authentication should be skipped.
</Info>

## Hide the Floating Button

The widget displays a floating button by default. To manage chat visibility through your own UI elements instead, set `hideButton` to `true`:

```typescript theme={null}
<StradaWidget
  ref={widgetRef}
  organizationId="<YOUR-ORGANIZATION-ID>"
  agentId="<YOUR-AGENT-ID>"
  hideButton={true}
/>
```

Then use the [open](/sdks/react-native/sdk-api-reference#open) action to open the chat programmatically:

```typescript theme={null}
// Open the chat when user taps a custom button
<Button title="Get Help" onPress={() => widgetRef.current?.open()} />
```

## Start in List View

For authenticated users, you can start the widget showing the list of recent chats instead of a new conversation:

```typescript theme={null}
<StradaWidget
  ref={widgetRef}
  organizationId="<YOUR-ORGANIZATION-ID>"
  agentId="<YOUR-AGENT-ID>"
  defaultView="list"
  getUserToken={async () => {
    const response = await fetch('https://your-api.com/strada-token');
    const { token } = await response.json();
    return token;
  }}
/>
```

<Note>The list view requires user authentication. Anonymous users will always start in chat view.</Note>