# Announcement Banners

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

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FyzfJjHgzBqztBFXNvBhA%2Fbanner.png?alt=media&#x26;token=4f718cd2-e5b3-4170-9c7b-77cfbdb9f79b" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Second Tab" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FoTli1oB7ZL4vPkA0rgME%2Fbanner2.png?alt=media&#x26;token=74c6c889-5bc1-4960-8b01-f92a7e358611" 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>" %}