> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-native-sdk-components/onboarding/announcement-banners.md).

# Announcement Banners

{% tabs %}
{% tab title="First Tab" %}

<figure><img src="/files/7wyoqfxgyehqzS6qAFsd" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Second Tab" %}

<figure><img src="/files/caknDG07SguFDDg22jum" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Installation

To install the `Quest react-native-sdk` into your project, follow these steps:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```jsx
npm install @questlabs/react-native-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

## Usage

To integrate the `Announcement_Banners` component into your React native application, follow these steps

* **Import the Announcement\_Banners Component**: Import the `Announcement_Banners` component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

```jsx
import { QuestProvider,Announcement_Banners} from '@questlabs/react-sdk';
```

## Props of Announcement\_Banners Component

The Announcement\_Banners component accepts the following props

<table><thead><tr><th width="238">Props Name</th><th width="115">Type</th><th width="141">Require</th><th>Details</th></tr></thead><tbody><tr><td>mainViewStyle</td><td>ViewStyle</td><td>optional</td><td>Main View Style</td></tr><tr><td>headerViewStyle</td><td>ViewStyle</td><td>optional</td><td>header View Style</td></tr><tr><td>headerTextStyle</td><td>TextStyle</td><td>optional</td><td>header Text Style</td></tr><tr><td>crossViewStyle</td><td>ViewStyle</td><td>optional</td><td>cross View Style</td></tr><tr><td>welcomeTextStyle</td><td>TextStyle</td><td>optional</td><td>welcome Text Style</td></tr><tr><td>middelViewStyle</td><td>ViewStyle</td><td>optional</td><td>middel View Style</td></tr><tr><td>descriptionTextStyle</td><td>TextStyle</td><td>optional</td><td>description Text Style</td></tr><tr><td>buttonViewStyle</td><td>ViewStyle</td><td>optional</td><td>button View Style</td></tr><tr><td>buttonTextStyle</td><td>TextStyle</td><td>optional</td><td>button Text Style </td></tr><tr><td>iconViewStyle</td><td>ViewStyle</td><td>optional</td><td>icon View Style</td></tr><tr><td>footerViewStyle</td><td>ViewStyle</td><td>optional</td><td>footer View Style</td></tr><tr><td>footerTextStyle</td><td>TextStyle</td><td>optional</td><td>footer Text Style</td></tr></tbody></table>

### Example Usage

```
import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {Announcement_Banners, QuestProvider} from "@questlabs/react-native-sdk";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
        entityId="Your-entityId"
        />
      <Announcement_Banners 
       UserTitle={"Ashish"} 
       onClose={()=> {console.log("close")}}
       onShow={()=> {console.log("open")}}
      style={{
        mainViewStyle:{
          backgroundColor:'black',
        },
        welcomeTextStyle:{
          color:"yellow"
        },
        buttonViewStyle:{
          backgroundColor:"red"
        }
      }}
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "lightgray",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
});
```

### Demo

{% embed url="<https://www.loom.com/share/c4d1be07023941a8ac647768969f1956?sid=58a52551-3f6a-4c8f-a4f8-bc0d407f02f7>" %}