> ## Documentation Index
> Fetch the complete documentation index at: https://moengage-sdk-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Self Handled Cards

Self-handled cards give you the flexibility of creating Card Campaigns on the MoEngage Platform and displaying the cards anywhere inside the application. SDK provides APIs to fetch the campaign's data using which you can create your own view for cards.

# Get Cards Info

Fetch All the cards campaign data that are eligible to show for the particular user which returns data as ***CardsInfo***. 

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  const cardsInfo = await ReactMoEngageCards.getCardsInfo();
  ```
</CodeGroup>

Refer to the [Cards Data Payload](https://developers.moengage.com/hc/en-us/articles/18393678207380-Cards-Data-Payload) to get the details about the available data in ***CardsInfo***.

## Widget and Widget ID Mapping

### Basic Card/Illustration Card

| Widget Id | Widget Type                | Widget Information                |
| --------- | -------------------------- | --------------------------------- |
| 0         | Image (WidgetType.IMAGE)   | Image widget in the card.         |
| 1         | Text (WidgetType.TEXT)     | Header text for the card.         |
| 2         | Text (WidgetType.TEXT)     | Message text for the card.        |
| 3         | Button (WidgetType.Button) | Call to action(CTA) for the card. |

# Refresh Cards

Use the ***refreshCards***\*()\*\*\* API to refresh cards on the User Demand. This API can be used to mimic Pull to refresh behavior.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  ReactMoEngageCards.refreshCards((data) => {});
  ```
</CodeGroup>

Refer to the [Cards Data Payload](https://developers.moengage.com/hc/en-us/articles/18393678207380-Cards-Data-Payload)to get the detail about the available data in ***SyncCompleteData**.*

# Fetch Cards

Use the ***fetchCards***\*()\*\*\* API to fetch cards for the User. This API can be used to sync the latest cards data.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  const cardsData = await ReactMoEngageCards.fetchCards();
  ```
</CodeGroup>

Refer to the [Cards Data Payload](https://developers.moengage.com/hc/en-us/articles/18393678207380-Cards-Data-Payload)to get the details about the available data in ***CardsData**.*

# Inbox Loaded

You can show the cards on a separate screen or a section of the screen. When the cards screen/section is loaded call ***onCardSectionLoaded()***.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  ReactMoEngageCards.onCardSectionLoaded((data) => {});
  ```
</CodeGroup>

Refer to the [Cards Data Payload](https://developers.moengage.com/hc/en-us/articles/18393678207380-Cards-Data-Payload)to get the details about the available data in ***SyncCompleteData**.*

# Inbox UnLoaded

Call ***onCardSectionUnloaded()*** when the screen/section is no longer visible or going to the background.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  ReactMoEngageCards.onCardSectionUnLoaded();
  ```
</CodeGroup>

# Fetch Categories

To fetch all the categories for which cards are configured, use the***getCardsCategories()*** API. It will return an array of strings.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  const cardsCategories = await ReactMoEngageCards.getCardsCategories();
  ```
</CodeGroup>

# All Cards Categories Enabled

To fetch all the categories for which cards are configured, use the***isAllCategoryEnabled()*** API.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  const isAllCategoryEnabled = await ReactMoEngageCards.isAllCategoryEnabled();
  ```
</CodeGroup>

# Fetch Cards for Categories

To fetch cards eligible for display for a specific category use the ***getCardsForCategory()*** API.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  const cardsData = await ReactMoEngageCards.getCardsForCategory(cardCategory);
  ```
</CodeGroup>

Refer to the [Cards Data Payload](https://developers.moengage.com/hc/en-us/articles/18393678207380-Cards-Data-Payload)to get the details about the available data in ***CardsData**.*

# Get New Cards Count

To obtain the new cards count use \*\*\*getNewCardsCount()\*\*\*method as shown below:

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  const newCardsCount = await ReactMoEngageCards.getNewCardsCount();
  ```
</CodeGroup>

# Card Shown

Call the ***cardShown()*** API to notify a card is shown to the user.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  ReactMoEngageCards.cardShown(card);
  ```
</CodeGroup>

# Card Clicked

Call the ***cardClicked()*** API to notify a card is shown to the user.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  ReactMoEngageCards.cardClicked(card, widgetId);
  ```
</CodeGroup>

# Delete Card

Call the ***deleteCard()*** API to delete a card.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  // Delete a single card
  ReactMoEngageCards.deleteCard(card);
  // Delete a multiple card, pass the Array<Card>
  ReactMoEngageCards.deleteCard(cards);
  ```
</CodeGroup>

# Mark Card Delivered

To track delivery to the card section of the application call the ***cardDelivered()*** API when the cards section of the application is loaded.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  ReactMoEngageCards.cardDelivered();
  ```
</CodeGroup>

# Get Unclicked Cards Count

To obtain the unclicked cards count use \*\*\*getUnClickedCardsCount()\*\*\*method as shown below.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  const unClickedCard = await ReactMoEngageCards.getUnClickedCardsCount();
  ```
</CodeGroup>

# Card Sync Listener

## Version 4.0.0 and below.

Set this listener to get a callback for card sync on the App opened. This listener should be set before calling \*\*\*initialize()\*\*\*API. In most cases, this API is not required.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  ReactMoEngageCards.setAppOpenSyncListener((data) => {});
  ```
</CodeGroup>

## Version  5.0.0 and above.

Set this listener to receive a callback for card sync upon app launch or when user login.This listener should be set before calling \*\*\*initialize()\*\*\*API.

<CodeGroup>
  ```typescript TypeScript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  import ReactMoEngageCards from "react-native-moengage-cards";
  ReactMoEngageCards.setSyncCompleteListener((data) => {});
  ```
</CodeGroup>

Refer to the [Cards Data Payload](https://developers.moengage.com/hc/en-us/articles/18393678207380-Cards-Data-Payload)to get the details about the available data in ***SyncCompleteData**.*