Share With friends

Components Visuals

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 ShareWithFriend component into your React native application, follow these steps

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

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

import { QuestProvider,ShareWithFriend } from '@questlabs/react-sdk';
  • Pass the Required Props: Pass the required props to the QuestProvider. The required props are apiKey, apiSecret, and entityId. and required props for the ShareWithFriend component are userId, token, questId.

Props of ShareWithFriend Component

The ShareWithFriend component accepts the following props

Props NameTypeRequireDetails

title

string

optional

Title for Modal

description

string

optional

Description for modal

buttonText

string

optional

share button text

mainViewStyle

ViewStyle

optional

Main View style

headerTextStyle

TextStyle

optional

Header Text style

descriptionTextStyle

TextStyle

optional

description text style

codeViewStyle

ViewStyle

optional

Input box view style

codeTextStyle

TextStyle

optional

input box text style

inviteButtonViewStyle

ViewStyle

optional

button view style

buttonTextStyle

TextStyle

optional

button text style

headingText

TextStyle

optional

Outter heading text style

detailText

TextStyle

optional

outter detail text style

middalView

ViewStyle

optional

MIddal view style

Example Usage

import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {ShareWithFriend, QuestProvider} from "@questlabs/react-native-sdk";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
       <ShareWithFriend
         entityId="Your-Api-entityId"
        userId="Your-usertId"
        token="Your-token"
        />
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "lightgray",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
});

Demo

Last updated