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.

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

Option 1

Option 2

Example (Slider Style):

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

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.