# Initialization

This guide provides detailed instructions on how to properly initialize and integrate the Tyrads SDK into your React Native application.

### Table of Contents

1. [Overview](#overview)
2. [Initialization Timing](#initialization-timing)
3. [The `Tyrads.init` Method](#the-tyrads.init-method)
4. [Data Structures](#data-structures)
5. [User Authentication](#user-authentication)
6. [Displaying Offers](#displaying-offers)
7. [iOS Launch Modes](#ios-launch-modes)
8. [Deeplinking & Routing](#deeplinking-and-routing)

***

### Overview

Tyrads SDK introduces a more modular approach to offerwall integration, including native React components and enhanced data tracking capabilities. To ensure optimal user experience and accurate attribution, please follow the initialization patterns described below.

### Initialization Timing

{% hint style="warning" %}

#### Initialize After Media Source or MMP Initialization

Please initialize our SDK only after the media source or MMP data is initialized. This ensures that the media source data is sent correctly and prevents passing empty values.
{% endhint %}

#### MMP & Media Source Dependency

**CRITICAL**: It is highly recommended to initialize the Tyrads SDK **only after** your Mobile Measurement Partner (MMP) or internal media source data has been fully resolved.

Initializing the SDK with valid media source data ensures:

* **Accurate Attribution**: Users are correctly mapped to their acquisition sources.
* **Customized Rewards**: The earning journey can be tailored based on the user's entry point.
* **Better Analytics**: Provides clearer feedback on the quality of users from different segments.

***

### The `Tyrads.init` Method

The `init` method is the entry point for the SDK. In v4, several optional parameters have been added to provide more context about the user and the session.

```typescript
await Tyrads.init(
  apiKey: string,
  apiSecret: string,
  encKey?: string,
  engagementId?: string,
  placementId?: string,
  mediaSourceInfo?: TyradsMediaSourceInfo,
  userInfo?: TyradsUserInfo,
  config?: TyradsConfig
);
```

#### Parameter Details

| Parameter         | Type                    | Required | Description                                                                                                                                             |
| ----------------- | ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `apiKey`          | `string`                | **Yes**  | Your unique Tyrads API Key.                                                                                                                             |
| `apiSecret`       | `string`                | **Yes**  | Your unique Tyrads API Secret.                                                                                                                          |
| `encKey`          | `string`                | No       | **Encryption Key**. Used for encrypting data transmitted from the SDK. If omitted, data is sent in plain text.                                          |
| `engagementId`    | `string`                | No       | A unique identifier for tracking specific user engagement campaigns.                                                                                    |
| `placementId`     | `string`                | No       | Used to differentiate between different ad placements within your app.                                                                                  |
| `mediaSourceInfo` | `TyradsMediaSourceInfo` | No       | Detailed attribution data (see [Data Structures](#data-structures)).                                                                                    |
| `userInfo`        | `TyradsUserInfo`        | No       | Additional user metadata like email or user group.                                                                                                      |
| `config`          | `TyradsConfig`          | No       | <p><strong>Android Only</strong>: </p><p>SDK behavioral configuration such as <code>skipInitialPages</code> to bypass privacy/permission screens. .</p> |

***

### Data Structures

#### TyradsMediaSourceInfo

Used to provide the SDK with information about the user's acquisition source.

```typescript
export interface TyradsMediaSourceInfo {
  mediaSourceName?: string;    // e.g., "AppsFlyer", "Adjust"
  mediaCampaignName?: string;  // e.g., "Summer_Sale_2024"
  mediaSourceId?: string;      // Unique ID from the source
  mediaSubSourceId?: string;   // Sub-identifier for the source
  incentivized?: boolean;      // Whether the traffic is incentivized
  mediaAdsetName?: string;
  mediaAdsetId?: string;
  mediaCreativeName?: string;
  mediaCreativeId?: string;
  sub1?: string;               // Custom tracking parameters (sub1 - sub5)
  sub2?: string;
  sub3?: string;
  sub4?: string;
  sub5?: string;
}
```

#### TyradsUserInfo

Provides basic demographic or segment data for the user.

```typescript
export interface TyradsUserInfo {
  email?: string;
  phoneNumber?: string;
  userGroup?: string;          // e.g., "premium", "freetier"
  age?: number;                // User age
  gender?: number;             // 1 for Male, 2 for Female
}
```

***

### User Authentication

After initialization, you must identify the user before showing offers.

```javascript
// This ID should be unique to the user in your system
await Tyrads.loginUser('unique_user_id_123');
```

***

### Displaying Offers

You can display the full offerwall or use native components.

#### Full Offerwall (Modal/Browser)

```javascript
await Tyrads.showOffers();
```

#### Native Premium Widget

Render premium offers directly inside your React components for a more native feel.

```jsx
import { PremiumOffersWidget, PremiumOffersWidgetLoading, PremiumWidgetStyles  } from '@tyrads.com/tyrads-sdk';

const MyComponent = () => (
  <View>
    <PremiumOffersWidget widgetStyle={PremiumWidgetStyles.list} />
  </View>
);
```

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

<figure><img src="/files/pmkTkVXEfP8BjgHKJ7SK" alt=""><figcaption><p>sliderCards</p></figcaption></figure>

<figure><img src="/files/zMADmZXKS3LZtzT4sJkN" alt=""><figcaption><p>list</p></figcaption></figure>

***

### iOS Launch Modes

On iOS, you can control how the offerwall is presented to comply with Apple's policies.

| Mode         | Value | Behavior                                      |
| ------------ | ----- | --------------------------------------------- |
| **External** | `3`   | Opens the Offerwall in Safari (Default).      |
| **Embedded** | `2`   | Opens the Offerwall in an embedded WKWebView. |

```javascript
// Open in embedded view
await Tyrads.showOffers({ launchMode: 2 });
```

***

### Deeplinking & Routing

The SDK supports routing users directly to specific sections of the offerwall.

| Route           | Description                             | Requires `campaignID`? |
| --------------- | --------------------------------------- | ---------------------- |
| `offers`        | Main campaigns list                     | No                     |
| `active-offers` | List of user's active campaigns         | No                     |
| `offers`        | Details for a specific campaign         | **Yes**                |
| `support`       | Support tickets for a specific campaign | **Yes**                |

**Example Usage:**

```javascript
// Open details for a specific campaign
await Tyrads.showOffers({ 
  route: "offers", 
  campaignID: "your_campaign_id" 
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sdk-doc.tyrads.com/react-native/initialization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.