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


---

# 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://docs.questera.ai/questera-ai-sdks/react-native-sdk-components/miscellaneous/daily-check-in-credit.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.