Modal

Components Visuals

Overview

Visual 1

Visual 2

Visual 3

To unlock early access to the component Get Access

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:

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.

Usage

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

• Import the Modal Component: Import the Modal component from the @questlabs/react-sdk package.

• Import the QuestProvider Component: Import the QuestProvider component from the @questlabs/react-sdk package.

import { QuestProvider,Modal } from '@questlabs/react-sdk';

• Pass the Required Props: Pass the required props to the QuestProvider. The required props are apiKey, apiSecret, and entityId.

Props of Modal Component

The Modal component accepts the following props

  ?: ;
  // videoURL?: string;
  ?: string;
  ?: string;
  ?: ;
  ?: string;
  ?: string;
  ?:()=>void;
  ?:()=> void
  ?:TextStyle;
  ?:TextStyle;
  ?:TextStyle;
  ?:TextStyle;
  ?:ViewStyle
  ?:ViewStyle
?:TextStyle
?:ViewStyle
?:TextStyle

Props Name	Type	Require	Details
imageURL	string	Optional	Give image url
title	string	Optional	Title for component
description	string	Optional	Description for compoent
number	number	Optional	Number for call
primaryButtonText	string	Optional	Primary button text
secondaryButtonText	string	Optional	secondary button text
handleSecoundaryButton	function	Optional	Create secoundary button funtion
handlePrimaryButton	function	Optional	Create primary button function
headerText	TextStyle	Optional	header text style
descriptionText	TextStyle	Optional	description text style
callTextStyle	TextStyle	Optional	call text style
numberText	TextStyle	Optional	number text style
callView	ViewStyle	Optional	call view style
cancelButtonView	ViewStyle	Optional	cancel button view style
cancelText	TextStyle	Optional	cancel text style
availButtonView	ViewStyle	Optional	avail button view style
availText	TextStyle	Optional	avail text style

Example Usage

import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {Modal,QuestProvider} from "@questlabs/react-native-sdk";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
       <Modal
        imageURL="https://images.freeimages.com/images/large-previews/f5d/hearts-1254000.jpg"
        title="Reward Unlocked"
        description="You have unlocked a new reward for your last transaction. Avail the reward now and enjoy!"
        secondaryButtonText="Go to home"
        primaryButtonText="Avail now"
        number={32570982475}
        // handleSecoundaryButton={()=>console.log('close')}
        // handlePrimaryButton={()=>console.log("open")}
      />
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "lightgray",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
});

Demo