> 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/v3.0/react-native/initialization/premium-offers.md).

# Premium Offers

## `topPremiumOffers`

The `topPremiumOffers` component is a part of the `Tyrads` SDK that provides a UI widget to display premium offers. It allows for extensive customization to control what type of offers are shown and how they are presented.

### Usage

```jsx
import Tyrads from '@tyrads.com/tyrads-sdk';

function OffersScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {Tyrads.topPremiumOffers({
        viewStyle: TyradsPremiumWidgets.list,
      })}
    </SafeAreaView>
  );
}
```

#### Parameters:

* The `context` parameter is required and should be the context of the widget that will display the top offers widget.
* The `widgetStyle` parameter is used to choose the style of the widget. The default style is `PremiumWidgetStyles.list`, which displays the offers in a list. Other available style is `PremiumWidgetStyles.sliderCards`, which displays the offers in a slider.

**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>

Return Value:

* Component: A `React Component` (specifically, a `TopOffers`) that can be embedded in your application's UI.

***

### Example with Customization

```jsx
import Tyrads from '@tyrads.com/tyrads-sdk';

function CustomOffersScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {Tyrads.topPremiumOffers({
        viewStyle: PremiumWidgetStyle.list,
      })}
    </SafeAreaView>
  );
}
```

### Notes

* Ensure that `Tyrads.init()` and `Tyrads.loginUser()` are called before rendering `topPremiumOffers` to ensure the necessary data is available.
* The `viewStyle` property directly affects the visual presentation; experiment with different values to find the most suitable layout for your app.