SDK Installation and Setup

The Humance SDK simplifies the integration of philanthropy features into your React Native application. It includes built-in components and API configurations for a seamless setup, enabling developers to focus on delivering a polished user experience.

---

Requirements

• React Native: Minimum version 0.74.0.

• Dependencies: The SDK depends on several libraries. Please follow the installation guide for each dependency linked below:

  • @react-navigation/native and @react-navigation/stack (>= v6.0.0)

  • react-native-safe-area-context (>= v4.10.1)

  • react-native-reanimated (>= v3.9.0)

  • react-native-gesture-handler (>= v2.16.0)

  • react-native-svg (>= v13.7.0)

  • react-native-render-html (>= v6.3.4)

  • react-native-async-storage (>= v2.0.0)

  • react-native-video (v6.0.0 - v6.3.0)

  • react-native-fast-image (>= v8.6.0)

  • react-native-sha256 (>= v1.4.10)

---

Installation

Since the SDK is hosted in a private repository, you need to configure SSH access before installation. Follow these steps:

1. Download the Private SSH Key:

   • Contact Humance to receive your private SSH key.

2. Add the SSH Key to Your ssh-agent:

ssh-add /path/to/your-private-key

Install the SDK: Add the SDK to your project dependencies and install it using the command:

"react-native-humance-sdk": "[e-mail]:humance/react-native-humance-sdk.git"

Install Peer Dependencies: Follow the installation guides for each dependency linked in the requirements section above.

---

Usage

The Humance SDK provides two primary ways to embed features into your app:

1. Using the <Humance /> Component The <Humance /> component renders the Projects-Stories module, displaying supported projects, their stories, and new projects.

Pressing on an unsupported project navigates to the project list page.

Example:

import { Humance } from 'react-native-humance-sdk';

<Humance
  apiConfig={{
    userEmail: '[e-mail]',
    apiKey: 'your-api-key',
    apiSecret: 'your-api-secret',
  }}
  paymentPageBalance={2440.98}, // user's balance in USD
  allowPersonalization=true // 
/>;

Props: HumanceConfig

• apiConfig: Configuration object containing the API keys and email.

• paymentPageBalance: The balance amount is to be displayed on the payment screen in USD.

• allowPersonalization: Allow hash for new users, learn more in the User Data Hashing section

1. Using openHumance(config: HumanceConfig)

openHumance allows you to open the project list page directly. Use it to create an additional button if necessary:

Example:

import { openHumance } from 'react-native-humance-sdk';

openHumance({
  paymentPageBalance: 2440.98, // user's balance in USD
  apiConfig: {
    userEmail: '[e-mail]',
    apiKey: 'your-api-key',
    apiSecret: 'your-api-secret',
  },
});

Example of the button:

---

Configuration Structure

HumanceConfig

Name	Type	Required	Description
paymentPageBalance	number	yes	The balance amount that is shown on the payment page
apiConfig	APIConfig	yes	The config for the API
allowPersonalization	boolean	no	Find more details in the User Data Hashing section
primaryColor	ColorValue	no	Customizable primary color including button and text link
accentColor	ColorValue	no	Customizable color for the story border and progress bar

APIConfig

Name	Type	Required
userEmail	string	yes	The user email that performs the request
apiKey	string	yes	The API key that will be used on the request headers
apiSecret	string	yes	The API secret that will be used on the request headers