Skip to main content

​
Overview

FlockSDK-React Native enables seamless integration of Flock referral and rewards into your React Native applications. Effortlessly build powerful referral programs and track customer engagement in minutes.
  • Identify and track users
  • Present referral experiences as modals or full screen
  • Handle events (close, success, invalid) in-app
  • Officially supported by the Flock team

​
Requirements

  • React Native 0.60 or later (auto-linking supported)
  • iOS 13.0 or later (if targeting iOS)
  • Android 6.0 (API 23) or later (if targeting Android)
  • Node.js 14 or later

​
Installation

​
1. Install the Package

npm install @wflock/react-native-sdk
OR 
yarn add @wflock/react-native-sdk
Auto-linking handles native dependencies for React Native 0.60+.

​
For iOS

  1. Install CocoaPods dependencies:
cd ios && pod install
  1. Ensure your Info.plist file includes permissions for internet access:
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

​
For Android

Make sure AndroidManifest.xml includes the following permission: 
<uses-permission android:name="android.permission.INTERNET" />

​
Usage

​
1. Configure the SDK

Wrap your app in the FlockSDKProvider and pass the publicAccessKey and environment: 
import React from 'react';
import { FlockSDKProvider } from '@wflock/react-native-sdk';
import App from './App';

const Main = () => (
  <FlockSDKProvider publicAccessKey="<YOUR_FLOCK_PUBLIC_KEY>" environment="production">
    <App />
  </FlockSDKProvider>
);

export default Main;

​
2. Identify Your User

Call identify after your user logs in to link their identity with Flock: 
import { useFlockSDK } from '@wflock/react-native-sdk';

const handleLoginSuccess = async (user) => {
  const { identify } = useFlockSDK();
  await identify({
    externalUserId: user.id,
    email: user.email,
    name: user.name,
  });
};

​
3. Show a Flock Page

New: Use addPlacement(placementId, options) to display a referral component. Each campaign page now has a unique placementId for robust and future-proof integration.
A placement renders a Flock referral page within your app, making it easy to prompt users to share and participate in your referral program. 
import { useFlockSDK } from '@wflock/react-native-sdk';
import { Button } from 'react-native';

const ReferralButton = () => {
  const { addPlacement } = useFlockSDK();
  return (
    <Button
      title="Show Referral"
      onPress={() => addPlacement('referrer', {
        onClose: () => console.log('Modal closed'),
        onSuccess: () => console.log('Referral sent!'),
        onInvalid: () => console.log('Invalid referral'),
        showCloseButton: true,
      })}
    />
  );
};
  • The legacy openPage(type, options) method is now deprecated and will be removed in a future release.
  • Use the Placement API for all new integrations and update any usage of openPage to addPlacement.

​
Invitee Placement

To display the invitation page for the invitee, use the addPlacement method with the invitee placement ID: 
import { useFlockSDK } from '@wflock/react-native-sdk';
import { Button } from 'react-native';

const InviteeButton = () => {
  const { addPlacement } = useFlockSDK();
  return (
    <Button
      title="Open Invitee Page"
      onPress={() => addPlacement('invitee', {
        onSuccess: () => console.log('Invitee entered valid referral code'),
        onInvalid: () => console.log('Invitee entered invalid referral code'),
        onClose: () => console.log('Modal closed'),
      })}
    />
  );
};

​
Legacy API (Deprecated)

Deprecated: openPage(type, options) is now deprecated. Use addPlacement(placementId, options) for all new integrations. 
import { useFlockSDK } from '@wflock/react-native-sdk';

const { openPage } = useFlockSDK();
openPage('referrer', {
  onClose: () => console.log('WebView closed'),
});

​
Why Flock?

  • No UI to build – We handle the referral screens for you.
  • Fully managed backend and analytics.
  • Easy integration and customization.
  • Official support and regular updates.

​
FAQ

Q: What React Native version is required? A: @wflock/react-native-sdk supports React Native 0.60 and above. Q: Can I customize WebView actions? A: Yes, you can listen to messages from the WebView and define custom follow-up actions. Q: Where can I get support? A: Contact the Flock support team at [email protected].
Thank you for using Flock SDK!