Skip to main content
Before proceeding with this guide, create a free account on the RevenueFlo Platform and set up your first project and offer campaign to manage dynamic offer paywall seamlessly.

​
Requirements

Xcode 13.0+ and iOS 15.0+ or later.

​
Installation

1

Download config file

  • Go to your RevenueFlo project dashboard.
  • Select the Settings from sidebar.
  • Select SDK & Code Setup → React Native and Download RevenueFlo-Info.plist
  • Copy the RevenueFlo-Info.plist file you just downloaded into the root of your Xcode project inside the react-native project folder and add it to all targets. Copy the RevenueFlo-Info.plist to project
2

Add RevenueFlo SDK

  • Download RevenueFlo SDK
  • Unzip & Copy the RevenueFlo folder from the SDK you just downloaded into the root of your Xcode project inside the react-native project folder and add it to all targets. Copy the RevenueFlo SDK to project
3

Configure App Attest

First, you need to configure the Xcode project so that the SDK can use Apple’s App Attest API to ensure that requests sent from your app come from legitimate instances of your app.
  1. Add the App Attest capability for your app target.

     Add the App Attest capability
  2. Open the .entitlements file in your Xcode project and set the App Attest Environment value to $(ATTENV)

     Set the App Attest Environment value
  3. In Xcode’s Target Build Settings, create a user-defined setting named ATTENV and set its value to production for Release and development for Debug.

     Create a user-defined setting named ATTENV

​
Import the SDK Code

To initialize the SDK in your React Native app, include the following in your index.js:
React
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

// Add these lines
import { NativeModules, Platform } from 'react-native';
const { RevenueFlo } = NativeModules;
if (Platform.OS === 'ios') {
    RevenueFlo.configureForRN()
}
// 
AppRegistry.registerComponent(appName, () => App);

​
Present an In-app Offer

In your View, call the presentOfferForRN() method to seamlessly present an exclusive offer to your users. Ensure to configure the offer details in the campaign dashboard before invoking.
React
import { NativeEventEmitter, NativeModules, Platform } from 'react-native';
const { RevenueFlo } = NativeModules;
const eventEmitter = new NativeEventEmitter(RevenueFlo);

const App = () => {

  useEffect(() => {
    // Subscribe to RevenueFlo events
    const offerDidPresent = eventEmitter.addListener(
      'offerDidPresent',
      (body) => {
        console.log('offerDidPresent: ', body);
      }
    );

    const offerDidClose = eventEmitter.addListener(
      'offerDidClose',
      (body) => {
        console.log('offerDidClose: ', body);
      }
    );

    const offerPrimaryButtonDidClick = eventEmitter.addListener(
      'offerPrimaryButtonDidClick',
      (body) => {
        console.log('offerPrimaryButtonDidClick: ', body);
      }
    );

    // Clean up subscriptions
    return () => {
      offerDidPresent.remove();
      offerDidClose.remove();
      offerPrimaryButtonDidClick.remove();
    };
  }, []);

  // Set 5 secs delay if you're invoking on app launch.
  // if (Platform.OS === 'ios') {
  //   RevenueFlo.presentOfferForRN(5.0)
  // }

  const presentOffer = () => {
    if (Platform.OS === 'ios') {
      RevenueFlo.presentOfferForRN()
    }
  };

  return (
    <View style={{ flex: 1 }}>

      <View style={styles.contentContainer}>

        <Text style={styles.text}>Welcome to React-Native
          RevenueFlo Demo</Text>

        <View style={styles.buttonContainer}>
          <Button title="Present Offer" onPress={presentOffer} />
        </View>

      </View>

    </View>
  );
};
Make sure you have at least one campaign active in RevenueFlo and test on a real device to experience your offer paywall exactly as your users will see it.

​
Example In-app Offer

Here’s the final presented offer paywall from RevenueFlo. In-app Discount Paywall