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

# React Native SDK

> Install the Videowise React Native SDK and choose components for shoppable video and live shopping.

The Videowise React Native SDK embeds shoppable video widgets and live shopping in a mobile app.

```bash theme={null}
npm install @videowisehq/videowise-react-native-sdk react-native-webview @react-native-async-storage/async-storage
```

For **Live Shopping Picture-in-Picture**, also install `react-native-video` (>= 6.0.0) and run `pod install` in your `ios/` folder. Setup is on [Live Shopping Channel](/sdk/live-shopping-channel#picture-in-picture-pip).

Web embeds, events, and cookies:

* [Shoppable videos](/shoppable-videos/overview)
* [Live shopping](/live-shopping/overview)
* [Order tracking pixel](/pixel/overview) (web); use [`trackingPixel`](/sdk/tracking-pixel) in the app
* [Cookies](/cookies) — [`getStoredData`](/sdk/get-stored-data) returns the same `uid` / `lsId` values

<CardGroup cols={2}>
  <Card title="Live Shopping Channel" icon="tower-broadcast" href="/sdk/live-shopping-channel">
    Channel embed, modular layout, and Picture-in-Picture.
  </Card>

  <Card title="VideoFeed" icon="play" href="/sdk/video-feed">
    Full-screen shoppable video player.
  </Card>

  <Card title="Floating" icon="window" href="/sdk/floating">
    Overlay widget that opens VideoFeed on tap.
  </Card>

  <Card title="Inline" icon="table-cells" href="/sdk/inline">
    Stories, carousels, grids, and other in-flow widgets.
  </Card>

  <Card title="Tracking pixel" icon="chart-line" href="/sdk/tracking-pixel">
    Attribute orders after checkout. Live-show orders from the app count as MOBILE APP, not ON SITE.
  </Card>

  <Card title="getStoredData" icon="database" href="/sdk/get-stored-data">
    Read persisted `uid` and `lsId` from app storage.
  </Card>
</CardGroup>

## SDK surface

```ts theme={null}
interface VideowiseSDKProps {
  Provider: React.FC<ProviderProps>;
  Inline: React.FC<InlineProps>;
  Floating: React.FC<FloatingProps>;
  VideoFeed: React.FC<VideoFeedProps>;
  LiveShoppingChannel: React.FC<LiveShoppingChannelProps>;
  trackingPixel: (parameters: ParametersType) => Promise<Response | null>;
  getStoredData: () => Promise<StoredData>;
}
```

Event callbacks use discriminated unions via `OnEventType<T>`:

| Callback                  | Type parameter                        | `event.type`      | `event.detail`                        |
| ------------------------- | ------------------------------------- | ----------------- | ------------------------------------- |
| `onEvent` (widgets)       | `'custom-event'`                      | `'custom-event'`  | `EventDetailType` + `name: EventType` |
| `onEvent` (Live Shopping) | `'live-shopping'`                     | `'live-shopping'` | `LSTrackingEventData`                 |
| `onAddToCart`             | `'add-to-cart'`                       | `'add-to-cart'`   | `EventDetailType`                     |
| `onCheckout`              | `'custom-event'` or `'live-shopping'` | matches component | matches component                     |

Widget `onEvent` names match [Widget custom events](/shoppable-videos/custom-events). Live shopping `onEvent` payloads match [Live shopping custom events](/live-shopping/custom-events).

### Shared props

Available on `Inline`, `Floating`, `VideoFeed`, and `LiveShoppingChannel`:

| Prop               | Type                                          | Required | Default        | Description                                           |
| ------------------ | --------------------------------------------- | -------- | -------------- | ----------------------------------------------------- |
| `environment`      | `'local' \| 'staging' \| 'production'`        | No       | `'production'` | Environment target                                    |
| `loggedInUserData` | `{ email?: string; fullName?: string }`       | No       | —              | Logged-in user info passed to the embed               |
| `onEvent`          | `(event: OnEventType<T>) => void`             | No       | —              | Callback for custom events (`T` depends on component) |
| `onAddToCart`      | `(event: OnEventType<'add-to-cart'>) => void` | No       | —              | Callback when a product is added to cart              |
| `onCheckout`       | `(event: OnEventType<T>) => void`             | No       | —              | Callback for checkout events                          |

<Note>
  `Inline`, `Floating`, and `VideoFeed` must be wrapped in `<VideowiseSDK.Provider>`. [`LiveShoppingChannel`](/sdk/live-shopping-channel) does not.
</Note>

```tsx theme={null}
<VideowiseSDK.Provider>{/* Your components here */}</VideowiseSDK.Provider>
```

## Related

* [Shoppable videos](/shoppable-videos/overview)
* [Live shopping](/live-shopping/overview)
* [Order tracking pixel](/pixel/overview)
* [Cookies](/cookies)