> 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/miscellaneous/daily-check-in-credit.md).

# Daily Check-in Credit

## Component Visuals

<figure><img src="/files/8aPmAaORTbxBOGgFJe7S" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/Gx9qpgF0sJwi1E4wkqbL" alt="" width="188"><figcaption></figcaption></figure>

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

### Demo

{% embed url="<https://www.loom.com/share/71cc034bccf645bb880ec3a294bfd62d?sid=98417f09-9d6d-47bb-9735-0bb76a92039e>" %}

In this video, you'll learn:

> 1. How to set up the `NotificationProvider` with in your App File.
> 2. How to set up the `NotificationContext` with in your Component File.
> 3. Customization options for the Daily Check-in Credit (Notification)  component.
> 4. Integration of the component into your React application.

## 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-native-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 %}

***

## Props of Notification Component

The Notification component accepts the following props

<table><thead><tr><th width="178">Prop Name</th><th width="133">Type</th><th width="106">Required</th><th>Details</th></tr></thead><tbody><tr><td>title</td><td>string</td><td>optional</td><td>The Notification Title Text.</td></tr><tr><td>notificationView</td><td>ViewStyle</td><td>optional</td><td>The Notification Style.</td></tr><tr><td>tinyLogo</td><td>ImageStyle</td><td>optional</td><td>The Logo for Notification</td></tr><tr><td>headerText</td><td>TextStyle</td><td>optional</td><td>The Header Text of the Notification.</td></tr><tr><td>headerView</td><td>ViewStyle</td><td>optional</td><td>The Header Text View Style.</td></tr><tr><td>detailView</td><td>ViewStyle</td><td>optional</td><td>The Detail text view Style.</td></tr><tr><td>detailText</td><td>TextStyle</td><td>optional</td><td>The Detail text Style.</td></tr><tr><td>timeOut</td><td>number</td><td>optional</td><td>The timer for notification.</td></tr></tbody></table>

## Usage

To integrate the Notification component into your React application, follow these steps

* **Import the Notification Component**: Import the Tutorial component from the `@questlabs/react--native-sdk` package.

```jsx
import { Notification } from "@questlabs/react-native-sdk";
```

## Example Usage

Here's an example of how to use the Daily Visit Streak component within your React Native application.

```
import { SafeAreaView, StyleSheet } from "react-native";
import React from "react";
import { Notification } from "@questlabs/react-native-sdk";

export default function App() {
  return (
    <Notification.Provider notificationView={{ backgroundColor: "gray" }} >
      <SafeAreaView style={styles.container}>
        <MyButton />
      </SafeAreaView>
    </Notification.Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "lightgray",
    justifyContent: "center",
  },
});
```

```
import { View, Text, Button } from "react-native";
import React, { useContext, useEffect } from "react";
import { Notification } from "@questlabs/react-native-sdk";

const MyButton = () => {
  const { close, showNotification, setCallBack } = useContext(
    Notification.Context
  );

  const show = () => {
    console.log("Close");
  };
  useEffect(() => {
    setCallBack(show);
  }, []);
  return (
    <View>
      <Button
        title="Open"
        onPress={() =>
          showNotification({
            title: "This is  notification title",
            detail: "this is the details text",
            image:'this is the image uri'
          })
        }
      />
      <Button title="Close" onPress={close} />
    </View>
  );
};

export default MyButton;

```

{% hint style="info" %}
The above example not uses all the props.
{% endhint %}