Membership Card

The Membership Card Component is a valuable tool for managing and tracking membership access within your organization or facility. It simplifies access control and membership validation.

Components Visuals

To unlock early access to the component Get Access

Demo

https://www.loom.com/share/128d51b020ad49f696064b808576d358?sid=ef37be85-8c39-4337-af32-dfe3ec1aa03dwww.loom.com

In this video, you'll learn:

1. How to use the component.

2. Customization options for the MemberShipCard component.

Installation

To install the Quest react-native-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.

---

Props of Login Component

The MemberShipCard component accepts the following props

Props Name	Type	Required	Details
questTitle	string	optional	The Quest Title Text.
questTitleX	number	optional	The Quest Title Text X.
questTitleY	number	optional	The Quest Title Text Y.
questYear	number	optional	The Quest Year Text.
questYearX	number	optional	The Quest Year Text X.
questYearY	number	optional	The Quest Year Text Y.
wellcomeTitle	string	optional	The Wellcome Title Text.
wellcomeTitleX	number	optional	The Wellcome Title Text X.
wellcomeTitleY	number	optional	The Wellcome Title Text Y.
wellcomeDetails	string	optional	The Wellcome Detail Text.
wellcomeDetailsX	number	optional	The Wellcome Detail Text X.
wellcomeDetailsY	number	optional	The Wellcome Detail Text Y.
expMonth	number	required	The Expire Month.
expYear	number	required	The Expire Year.
expX	number	optional	The Expire X.
expY	number	optional	The Expire Y.

Usage

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

• Import the MemberShipCard Component: Import the Tutorial component from the @questlabs/react--native-sdk package.

import { MemberShipCard } from "@questlabs/react-native-sdk";

Example Usage

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

import {  SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {
  MemberShipCard,
} from "@questlabs/react-native-sdk/src/components";

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <MemberShipCard />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    marginTop: 40,
    justifyContent: "center",
    alignItems: "center",
  },
});

The above example not uses all the props.