Daily Check-in Credit

The Daily Check-in Credit component is designed to incentivize users to check in daily by displaying a notification at the top of the app interface. This notification will automatically close.

Component Visuals

To unlock early access to the component Get Access

Demo

https://www.loom.com/share/71cc034bccf645bb880ec3a294bfd62d?sid=98417f09-9d6d-47bb-9735-0bb76a92039ewww.loom.com

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:

npm install @questlabs/react-native-sdk

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

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

---

Props of Notification Component

The Notification component accepts the following props

Prop Name	Type	Required	Details
title	string	optional	The Notification Title Text.
notificationView	ViewStyle	optional	The Notification Style.
tinyLogo	ImageStyle	optional	The Logo for Notification
headerText	TextStyle	optional	The Header Text of the Notification.
headerView	ViewStyle	optional	The Header Text View Style.
detailView	ViewStyle	optional	The Detail text view Style.
detailText	TextStyle	optional	The Detail text Style.
timeOut	number	optional	The timer for notification.

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.

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;

The above example not uses all the props.