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

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

function OffersScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {Tyrads.topPremiumOffers({
        showMore: true,
        showMyOffers: true,
        showMyOffersEmptyView: false,
        viewStyle: 1,
      })}
    </SafeAreaView>
  );
}

Props

showMore

• Type: boolean

• Default: true

• Description: Determines whether the "Show More" option should be displayed to load additional offers.

showMyOffers

• Type: boolean

• Default: true

• Description: Controls the visibility of the "My Offers" section.

showMyOffersEmptyView

• Type: boolean

• Default: false

• Description: If true, an empty view will be displayed if there are no "My Offers" available.

viewStyle

• Type: number

• Default: 1

• Description: Controls the UI style of the offers display. Possible values may vary depending on available layout options in the SDK.

• Available viewStyleoptions

  • Style 1: Default style.

  

  Option 1

  • Style 2: Currently used.

  

  Option 2

  • Style 3: Alternate layout.

  

  Option 3

  • Style 4: Advanced layout.

  

  Option 4

---

Example with Customization

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

function CustomOffersScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {Tyrads.topPremiumOffers({
        showMore: false,
        showMyOffers: true,
        showMyOffersEmptyView: true,
        viewStyle: 2,
      })}
    </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.