Gallery
Share
Explore

Shinara React Native SDK

⁠
Shinara
⁠
is a mobile-first social referral platform tailored for in-app purchases, empowering brands to grow through influencer-driven advocacy. Manage affiliates, analysis performance, and payouts effortlessly to boost engagement and revenue with a single seamless platform.
Easily integrate our React Native SDK into your app by following these simple steps.
Note: Shinara React Native SDK currently only supports iOS

Installation

To install the Shinara SDK, run the following command in your project directory
Under the hood, this library is using
@react-native-async-storage/async-storage
⁠
and
react-native-iap
⁠
⁠

Using npm

npm install github:shinara-io/shinara-react-native-sdk @react-native-async-storage/async-storage

Using yarn

yarn add github:shinara-io/shinara-react-native-sdk @react-native-async-storage/async-storage

Link iOS

npx pod-install

Usage

Initialization

To initialize Shinara, import and create a new instance:
import ShinaraSDK from 'shinara-react-native-sdk'

useEffect(() => {
const initializeShinara = async () => {
try {
// Initialize the SDK and listen to in-app purchases
await ShinaraSDK.initialize('<SHINARA API KEY>');
} catch (error) {
// Handle error
}
};
initializeShinara();
}, []);
You can find API Key on
Shinara Integrations
⁠
Page on the Portal.

Validate Referral Code

To validate a referral code, use the validateReferralCode method. This method checks the validity of the given code.
Note: Ensure that the referral code is validated before initiating an In-App Purchase. This is crucial for proper attribution of the purchase to the referral code in the Shinara SDK.
const validateCode = async (code) => {
try {
const response = await ShinaraSDK.validateReferralCode({ code });
if (response.programId) {
// valid code
// The programId can be used to map and apply discounts for users.
} else {
// invalid code
}
} catch (error) {
console.error('Failed to validate referral code:', error);
}
}

Register User (Optional)

By default, Shinara generates a new user id and attribute to the purchase. Optionally, you can provide your own userId and other user details to make sure attribution of the purchase has the user id of your choice.
Note: Ensure that the referral code is validated before registering a user. This is crucial for proper attribution of the user to the referral code in the Shinara SDK.
const registerUser = async (userId, email, name, phone) => {
try {
await ShinaraSDK.registerUser({ userId, email, name, phone });
console.log('User registered successfully.');
} catch (error) {
console.error('Failed to register user:', error);
}
}

Purchase Tracking

The SDK automatically tracks and attributes in-app purchases. No additional code is required for basic purchase tracking. The SDK listens to StoreKit transactions and handles attribution automatically.

Example App

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, Alert, StyleSheet } from 'react-native';
import ShinaraSDK from 'path-to-your-sdk-instance';
import {
initConnection,
purchaseUpdatedListener,
requestPurchase,
getProducts,
} from 'react-native-iap';

// Define your product IDs (as configured in your App Store)
const productIds = ['com.example.product1'];

const App = () => {
const [referralCode, setReferralCode] = useState('');
const [products, setProducts] = useState([]);

useEffect(() => {
// Initialize the Shinara SDK
const initializeSDK = async () => {
try {
await ShinaraSDK.initialize('<YOUR_API_KEY>');
console.log('SDK initialized successfully.');
} catch (error) {
console.error('SDK initialization failed:', error);
Alert.alert('Error', 'Failed to initialize SDK.');
}
};

initializeSDK();

// Initialize In-App Purchase connection
const initIAP = async () => {
try {
await initConnection();
const availableProducts = await getProducts({ skus: productIds });
setProducts(availableProducts);
} catch (error) {
console.error('Failed to initialize IAP:', error);
Alert.alert('Error', 'Failed to initialize IAP.');
}
};

initIAP();

// Setup purchase listener
const purchaseListener = purchaseUpdatedListener(async (purchase) => {
// Shinara SDK will automatically listen and attribute this purchase
Alert.alert('Purchase', 'Purchase completed successfully. Purchase ID: ' + purchase.transactionId);
});

// Clean up listener on component unmount
return () => {
if (purchaseListener) {
purchaseListener.remove();
}
};
}, []);

const handleValidateReferralCode = async () => {
try {
const response = await ShinaraSDK.validateReferralCode({ code: referralCode });
console.log('Referral code validated:', response);
Alert.alert('Success', 'Referral code is valid. Program ID: ' + response.programId);
} catch (error) {
console.error('Failed to validate referral code:', error);
Alert.alert('Error', 'Failed to validate referral code.');
}
};

const handlePurchase = async (productId) => {
try {
await requestPurchase({ skus: productId });
console.log('Purchase requested for product:', productId);
} catch (error) {
console.error('Failed to request purchase:', error);
Alert.alert('Error', 'Failed to initiate purchase.');
}
};

return (
<View style={styles.container}>
<Text style={styles.title}>Enter Referral Code</Text>
<TextInput
style={styles.input}
placeholder="Referral Code"
value={referralCode}
onChangeText={setReferralCode}
/>
<Button title="Validate Referral Code" onPress={handleValidateReferralCode} />
<Text style={styles.title}>Available Products:</Text>
{products.map((product) => (
<Button key={product.productId} title={`Buy ${product.title}`} onPress={() => handlePurchase(product.productId)} />
))}
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 16,
},
title: {
fontSize: 24,
marginBottom: 16,
},
input: {
width: '80%',
borderColor: '#ccc',
borderWidth: 1,
padding: 8,
marginBottom: 16,
},
});

export default App;

Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.