​

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

​

2. Link the Native Dependencies

Auto-linking handles native dependencies for React Native 0.60+.

​

For iOS

1. Install CocoaPods dependencies:

cd ios && pod install

2. 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

​

Placement API (Recommended)

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 support@withflock.com.

Thank you for using Flock SDK!