Quickstart – Nextra

Installation

Install the package

Start by adding reclaim-react-native package and the peer dependencies in your package.json of your React Native project like below:

    "@reclaimprotocol/reclaim-react-native": "^0.1.1",
    "@react-native-cookies/cookies": "^6.2.1",
    "react-native-webview": "^11.26.1",
    "react-native-svg": "^13.13.0"

Run npm install from your command line to install the added dependencies. Do not forget to Delete the Podfile.lock and install again using pod install in the ios folder.

Usage

Import ReclaimHttps and use it in your App:

App.tsx

import React from 'react';
import {SafeAreaView, StyleSheet, useColorScheme} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {ReclaimHttps} from '@reclaimprotocol/reclaim-react-native';
 
function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
 
  const backgroundStyle = StyleSheet.create({
    container: {
      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
  });
 
  return (
    <SafeAreaView style={backgroundStyle.container}>
      <ReclaimHttps
        requestedProofs={[
          {
            url: 'https://bookface.ycombinator.com/home',
            loginUrl: 'https://bookface.ycombinator.com/home',
            loginCookies: ['_sso.key'], 
            responseSelections: [
              {
                responseMatch:
                  '\\{"id":{{YC_USER_ID}},.*?waas_admin.*?:{.*?}.*?:\\{.*?}.*?(?:full_name|first_name).*?}',
              },
            ],
          },
        ]}
        // context="Proving on 2023 for eth India" 
        title="YC Login"
        subTitle="Prove you have a YC Login"
        cta="Prove"
        onSuccess={proofs => {
          /*do something*/
          console.log('proofs', proofs);
        }}
        onFail={e => {
          /*do something*/
          console.log('Error', e);
        }}
        buttonStyle={{backgroundColor: 'black'}}
        buttonTextStyle={{color: 'blue'}}
        onStatusChange={(text: string) => {
          console.log("Status is: ", text);
        }}
      />
    </SafeAreaView>
  );
}
 
export default App;

Properties in ReclaimHttps:

url: The URL from where the data is to be extracted.
loginUrl: The URL to direct the user for login if required.
loginCookies: Array of cookie names required for authentication.
responseMatch: Regular expression to extract specific information from the webpage.
title: Name of your application.
subTitle: Short description about the claim.
cta: Title of the action button.
onSuccess: Function to handle success scenario.
onFail: Function to handle failure scenario.
requestedProofs : use this tool to generate the object corresponding to the proofs you need from the user

Optional properties in ReclaimHttps:

showShell: A boolean to show the shell of the component, default is true
verifyingCta: A message to show to the user while verification is in progress
verifiedCta: A message to show to the user when verification is complete
style: A style object to style the outer html of the component
buttonStyle: A style object to style the button
buttonTextStyle: A style object to style the button text
onStatusChange: A callback function that enables the component to inform you of changes in the status of claim creation

Import ReclaimAadhaar and use it in your App:

App.tsx

import React from 'react';
import {SafeAreaView, StyleSheet, useColorScheme} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {ReclaimAadhaar} from '@reclaimprotocol/reclaim-react-native';
 
function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
 
  const backgroundStyle = StyleSheet.create({
    container: {
      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
  });
 
  return (
    <SafeAreaView style={backgroundStyle.container}>
      <ReclaimAadhaar
        title="Aadhaar UID"
        subTitle="Prove you have Aadhaar Card"
        cta="Prove"
        onSuccess={proofs => {
          /*do something*/
          console.log('proofs', proofs);
        }}
        onFail={e => {
          /*do something*/
          console.log('Error', e);
        }}
        buttonStyle={{backgroundColor: 'black'}}
        buttonTextStyle={{color: 'blue'}}
        onStatusChange={(text: string) => {
          console.log("Status is: ", text);
        }}
      />
    </SafeAreaView>
  );
}
 
export default App;

Properties in ReclaimAadhaar:

title: Name of your application.
subTitle: Short description about the claim.
cta: Title of the action button.
onSuccess: Function to handle success scenario.
onFail: Function to handle failure scenario.
requestedProofs : use this tool to generate the object corresponding to the proofs you need from the user

Optional properties in ReclaimHttps:

showShell: A boolean to show the shell of the component, default is true
verifyingCta: A message to show to the user while verification is in progress
verifiedCta: A message to show to the user when verification is complete
style: A style object to style the outer html of the component
buttonStyle: A style object to style the button
buttonTextStyle: A style object to style the button text
onStatusChange: A callback function that enables the component to inform you of changes in the status of claim creation

Import ReclaimKaggle and use it in your App:

App.tsx

import React from 'react';
import {SafeAreaView, StyleSheet, useColorScheme} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {ReclaimKaggle} from '@reclaimprotocol/reclaim-react-native';
 
function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
 
  const backgroundStyle = StyleSheet.create({
    container: {
      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
  });
 
  return (
    <SafeAreaView style={backgroundStyle.container}>
      <ReclaimKaggle
        title="Kaggle Username"
        subTitle="Prove you have Kaggle Account Card"
        cta="Prove"
        onSuccess={proofs => {
          /*do something*/
          console.log('proofs', proofs);
        }}
        onFail={e => {
          /*do something*/
          console.log('Error', e);
        }}
      />
    </SafeAreaView>
  );
}
 
export default App;

Properties in ReclaimKaggle:

title: Name of your application.
subTitle: Short description about the claim.
cta: Title of the action button.
onSuccess: Function to handle success scenario.
onFail: Function to handle failure scenario.
requestedProofs : use this tool to generate the object corresponding to the proofs you need from the user

Architecture Quickstart