Initialization

To get started with the @tyrads.com/tyrads-sdk package, you will need to:

  1. Request an API key and API secret from the TyrAds team.

  2. Initialize the SDK by calling Tyrads.init() and passing in your API key and API secret.

  3. Login the user by calling Tyrads.loginUser() and passing in the user's ID.

  4. Call Tyrads.showOffers() to display the offers.

Launch Mode

Min SDK version required: v1.1.6

Works only for iOS

Tyrads SDK provides the ability to open the Offerwall in a webkit view that is embedded in the app to provide a seamless user experience. Also, it provides the ability to open the Offerwall in an external browser (Safari) if Apple's app store policy does not approve the in-app rewards system for the app.

Available launch modes:

  • launchMode: 3 - opens the Offerwall in an external browser (Safari)

  • launchMode: 2 - opens the Offerwall in a webkit view that is embedded in the app


// Note: The launchMode parameter is optional, if not specified the default would be opening the Offerwall in an external browser (Safari)

Tyrads.showOffers({ launchMode: 3 });// provide launchMode: 2 to open the Offerwall in a webkit view that is embedded in the app

Deeplinking Routes

Min SDK version required: v1.1.4

The Tyrads SDK supports deeplinking to specific sections of the offerwall. When initializing or interacting with the SDK, you can specify a route to open a particular page. For campaign-specific routes, you'll need to provide the campaignID as well.

Available routes and their usage:

  • campaigns - opens the Campaigns Page

  • campaigns-activated - opens the Activated Campaigns Page

  • campaign-details - opens the Campaign Details Page (requires campaignID)

  • campaign-tickets - opens the Campaign Tickets Page (requires campaignID)


// Note: CAMPAIGNS is the default route when no specific route is provided
Tyrads.showOffers();

// Explicitly specifying the Campaigns Page
Tyrads.showOffers("campaigns");

// Activated Campaigns Page
Tyrads.showOffers("campaigns-activated");

// Campaign Details Page (requires campaignID)
Tyrads.showOffers("campaign-details", "your_campaign_id_here");

// Campaign Tickets Page (requires campaignID)
Tyrads.showOffers("campaign-tickets", "your_campaign_id_here");

Basic Usage

Here is an example of how to use the @tyrads.com/tyrads-sdk package:

import  Tyrads  from  '@tyrads.com/tyrads-sdk';
const  TYR_SDK_API_KEY  =  'YOUR_API_KEY';
const  TYR_SDK_API_SECRET  =  'YOUR_API_SECRET';
const  initializeTyrSDK  = () => {
  Tyrads.init(TYR_SDK_API_KEY, TYR_SDK_API_SECRET);
  Tyrads.loginUser(userId);
};

const  initializeAndShowOffers  = () => {
 initializeTyrSDK();
 Tyrads.showOffers();
};

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.

PreviousInstallationNextDeeplinking Routes

Last updated