# React Native and Expo

npm install @texadesk/react-native. Texa AI's chat as a component in your app, for visitors and signed-in customers.


```bash
npm install @texadesk/react-native
```

The package is [`@texadesk/react-native` on npm](https://www.npmjs.com/package/@texadesk/react-native).
It never holds a key: visitors use your **site key**, and signed-in customers a **widget session**
your server makes.

## The chat

```tsx
import { TexaChat } from "@texadesk/react-native";

<TexaChat
  siteKey="pk_live_..."
  getSession={async () => (user ? await api.post("/texa/session") : null)}
  signedIn={!!user}
  title="Help"
  actions={{ fill_delivery_address: async (inputs) => ({ filled: true }) }}
  onOpenPage={(url, page) => navigation.navigate(page)}
  onPickFile={pickDocument}
/>
```

| Prop | What |
|---|---|
| `siteKey` | your site key, for visitors who haven't signed in |
| `getSession` | returns your server's widget session for the signed-in customer, or `null` |
| `signedIn` | whether someone is signed in now: change it and the chat carries on as them |
| `actions` | screen actions: steps your app does for the customer, by name ([how](/guides/website-and-app#5-pages-and-steps-on-your-page)) |
| `onOpenPage` | Texa AI takes the customer to a page: navigate there |
| `onPickFile` | your file picker, returning `{ uri, name, type }`, for the paper clip |
| `onOpenDocument` | a document Texa AI sent (a receipt, a spreadsheet as CSV) |
| `title`, `greeting`, `color` | how it looks |
| `apiUrl`, `pollMs` | for testing; leave the defaults |

The chat follows the phone's light or dark setting, masks card numbers, PINs and codes in the typing
preview your team sees, and shows your team's answers when they take over.

## Your own screens

`TexaWidgetClient` is the same chat without a UI, for your own design, and `TexaVoiceLine` opens a
voice session whose audio you wire to your app's audio module (16-bit PCM, echo cancellation on).
`maskDraft` is the typing-preview mask, if you send previews yourself.