Shinara React Native SDK
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
Overview
Shinara SDK in your App’s Lifecycle
Installation
To install the Shinara SDK, run the following command in your project directory
Under the hood, this library is using and
Using npm
npm install github:shinara-io/shinara-react-native-sdk @react-native-async-storage/async-storage react-native-device-info react-native-localize
Using yarn
yarn add github:shinara-io/shinara-react-native-sdk @react-native-async-storage/async-storage react-native-device-info react-native-localize
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();
}, []);
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);
}
}
Attribute Purchase
To attribute a purchase made by affiliates, use the attributePurchase method. Call this method after a successful in app purchase.
const productId = iapSubscription.productId
const transactionId = iapSubscription.transactionId || ''
await ShinaraSDK.attributePurchase(
productId,
transactionId,
);
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);
}
}
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) => {
// Attribute your purchase
if (purchase.transactionId !== null) {
await ShinaraSDK.attributePurchase(
purchase.productId,
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;
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.