> 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="https://347922413-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbqqMYRbr0w4Hv3JxQUF7%2Fuploads%2Fgi6lJ2V1tOozjsIv6d6y%2FPremium%20option%2015.png?alt=media&amp;token=38919515-2a7b-442e-8fa9-ad3cc55dfd5d" alt=""><figcaption><p>Option 1</p></figcaption></figure>

<figure><img src="https://347922413-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbqqMYRbr0w4Hv3JxQUF7%2Fuploads%2FjfIqaM6sZk8MquuAMc3I%2FFrame%201171276648.png?alt=media&amp;token=65a17699-afd6-451b-a01f-b1c506987e0a" 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.