> For the complete documentation index, see [llms.txt](https://sdk-doc.tyrads.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sdk-doc.tyrads.com/react-native/initialization/premium-offers.md).

# Premium Offers

Tyrads SDK  introduces native React components that allow you to render premium offers directly within your application's UI, providing a more integrated and seamless user experience compared to the traditional modal offerwall.

***

### Components Overview

The SDK exports two primary components for native widget implementation:

* **`PremiumOffersWidget`**: The main component that fetches and displays premium offers.
* **`PremiumOffersWidgetLoading`**: A placeholder component that provides a skeleton/shimmer effect during data fetching.

***

### Basic Usage

To use the premium widget, simply import it and place it anywhere in your JSX tree.

```jsx
import React from 'react';
import { View, ScrollView } from 'react-native';
import { PremiumOffersWidget, PremiumWidgetStyles } from '@tyrads.com/tyrads-sdk';

const MyGameScreen = () => {
  return (
    <ScrollView>
      {/* Other game content */}
      
      <PremiumOffersWidget 
        widgetStyle={PremiumWidgetStyles.list} 
        launchMode={2}
      />
      
      {/* Other game content */}
    </ScrollView>
  );
};
```

***

### Widget Styles

The `PremiumWidgetStyles` enum allows you to choose between two distinct layouts:

| Style                             | Description                                                                                |
| --------------------------------- | ------------------------------------------------------------------------------------------ |
| `PremiumWidgetStyles.list`        | Renders offers in a vertical list format (Best for dedicated offer screens).               |
| `PremiumWidgetStyles.sliderCards` | Renders offers in a horizontal swipeable carousel (Best for home screens or small spaces). |

**Available Widget Style options**

<figure><img src="/files/pmkTkVXEfP8BjgHKJ7SK" alt=""><figcaption><p>Option 1</p></figcaption></figure>

<figure><img src="/files/zMADmZXKS3LZtzT4sJkN" alt=""><figcaption><p>Option 2 </p></figcaption></figure>

**Example (Slider Style):**

```jsx
<PremiumOffersWidget widgetStyle={PremiumWidgetStyles.sliderCards} />
```

***

### Prop Reference

#### `PremiumOffersWidget`

| Prop          | Type                  | Default | Description                                                             |
| ------------- | --------------------- | ------- | ----------------------------------------------------------------------- |
| `widgetStyle` | `PremiumWidgetStyles` | `list`  | Determines the layout of the widget.                                    |
| `launchMode`  | `number`              | `2`     | Determines presentation style on iOS (2: Embedded, 3: External Safari). |

#### `PremiumOffersWidgetLoading`

| Prop          | Type                  | Default | Description                                                |
| ------------- | --------------------- | ------- | ---------------------------------------------------------- |
| `widgetStyle` | `PremiumWidgetStyles` | `list`  | Matches the skeleton layout to your intended widget style. |

***

### Handling Loading States

For the best user experience, it's recommended to show the loading placeholder while the SDK is initializing or fetching data.

```jsx
import React, { useState, useEffect } from 'react';
import Tyrads, { PremiumOffersWidget, PremiumOffersWidgetLoading } from '@tyrads.com/tyrads-sdk';

const MyScreen = () => {
  const [isReady, setReady] = useState(false);

  useEffect(() => {
    Tyrads.init('KEY', 'SECRET').then(() => {
      Tyrads.loginUser('USER_ID').then(() => {
        setReady(true);
      });
    });
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {isReady ? (
        <PremiumOffersWidget />
      ) : (
        <PremiumOffersWidgetLoading />
      )}
    </View>
  );
};
```

***

### Best Practices

1. **Container Sizing**: The `PremiumOffersWidget` is designed to be flexible. If using the `list` style inside a `ScrollView`, ensure it doesn't have a fixed height unless intended.
2. **Launch Mode Compatibility**: Remember that `launchMode` only affects iOS presenting behavior. On Android, the offer details always open in the standard view.
3. **Key Management**: If your app supports multiple configurations or user switching, you can use the `key` prop on the widget to force a re-render when initialization data changes.