​
Installation

​
1. Install the Package

To get started, install the SDK package:

npm install @wflock/react-native-sdk

OR

yarn add @wflock/react-native-sdk

The SDK supports React Native version 0.60 and above, which means auto-linking will handle the native dependencies without extra configuration.

​
For iOS

  1. Install CocoaPods dependencies:
cd ios && pod install
  1. Ensure your Info.plist file includes permissions for internet access, as the SDK makes network requests:
<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. Initialize the SDK

Wrap your app in the FlockSDKProvider and pass the publicAccessKey in the configuration:

import React from 'react';
import { FlockSDKProvider } from '@wflock/react-native-sdk';
import App from './App';

const Main = () => {
  return (
    <FlockSDKProvider config={{ publicAccessKey: 'your-public-access-key' }}>
      <App />
    </FlockSDKProvider>
  );
};

export default Main;

​
2. Identify Customers

The identify method should be called after the user has successfully authenticated in your app. This ensures that the user’s details are properly linked to their account in the Flock system. Here’s an example:

import { identify } from '@wflock/react-native-sdk';

const handleLoginSuccess = async (user) => {
  try {
    const response = await identify({
      externalUserId: user.id,
      email: user.email,
      name: user.name,
    });
    console.log('Identify Response:', response);
  } catch (error) {
    console.error('Identify Error:', error);
  }
};

const LoginScreen = () => {
  const onLogin = async () => {
    // Assume login logic here
    const user = await performLogin();
    handleLoginSuccess(user);
  };

  return <Button title="Login" onPress={onLogin} />;
};

export default LoginScreen;

​
3. Open Referrals WebView

To display the referral page for the referrer, use the openPage method with the referrer page type. You can also listen for events from the WebView, such as a onClose event.

import React from 'react';
import { Button, View } from 'react-native';
import { openPage } from '@wflock/react-native-sdk';

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

  return (
    <View>
      <Button title="Open Referral Page" onPress={handleOpenReferralsWebView} />
    </View>
  );
};

export default ReferralScreen;

​
4. Open Invitee WebView

To display the invitation page for the invitee, use the openPage method with the invitee page type. This method allows for additional callbacks: onSuccess for successful actions and onInvalid for invalid cases.

import React from 'react';
import { Button, View } from 'react-native';
import { openPage } from '@wflock/react-native-sdk';

const InviteeScreen = () => {
  const handleOpenInviteeWebView = () => {
    openPage('invitee', {
      onSuccess: () =>
        console.log('Invitee successfully entered a valid referral code'),
      onInvalid: () => console.log('Invitee entered an invalid referral code'),
      onClose: () => console.log('WebView closed'),
    });
  };

  return (
    <View>
      <Button
        title="Open Referral Code Input Page"
        onPress={handleOpenInviteeWebView}
      />
    </View>
  );
};

export default InviteeScreen;

​
5. Post-Success Flow for Invitees (Optional)

After a successful onboarding of an invitee, you can choose to either navigate the user to your custom success page or open a Flock-hosted success page. Use the openPage with the invitee?state=success page type for the latter option.

Example:

import { openPage } from '@wflock/react-native-sdk';

const handleInviteeSuccess = () => {
  openPage('invitee?state=success', {
    onClose: () => console.log('Hosted success page closed'),
  });
};

const InviteeScreen = () => {
  const handleOpenInviteeWebView = () => {
    openPage('invitee', {
      onSuccess: handleInviteeSuccess,
      onInvalid: () => console.log('Invalid invitation link'),
      onClose: () => console.log('WebView closed'),
    });
  };

  return (
    <View>
      <Button title="Open Invitee Page" onPress={handleOpenInviteeWebView} />
    </View>
  );
};

export default InviteeScreen;

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

​
Support

If you encounter issues, feel free to contact the Flock support team at support@withflock.com.

Thank you for using Flock SDK!