React Native

In React Native the offerwall is rendered with react-native-webview. The same URL works on both iOS and Android.

Install the dependency

bash

npm install react-native-webview

    # iOS only
    cd ios && pod install && cd ..

Component

jsx

import React from 'react';
    import { SafeAreaView, StyleSheet } from 'react-native';
    import { WebView } from 'react-native-webview';

    const APP_ID = '1042';
    const BASE_URL = 'http://adplusmedia.com';

    export default function Offerwall({ userId }) {
        const uri = `${BASE_URL}/app/iframe/${APP_ID}/${encodeURIComponent(userId)}`;

        return (
            <SafeAreaView style={styles.container}>
                <WebView
                    source={{ uri }}
                    javaScriptEnabled
                    domStorageEnabled
                    startInLoadingState
                    originWhitelist={['*']}
                    setSupportMultipleWindows={false}
                />
            </SafeAreaView>
        );
    }

    const styles = StyleSheet.create({
        container: { flex: 1 },
    });

Props that matter

Prop	Value	Why
`javaScriptEnabled`	`true`	Required. The wall is a JavaScript application.
`domStorageEnabled`	`true`	Persists the user's language and platform filter.
`originWhitelist`	`['*']`	Offers redirect through advertiser domains. Restricting this breaks conversions.
`setSupportMultipleWindows`	`false`	Android only. Keeps `target="_blank"` offers inside the same web view.

Handling store links

Let App Store and Play Store links open natively so installs are attributed correctly:

jsx

import { Linking } from 'react-native';

    const STORE_PATTERN = /^(itms-apps:|market:|https:\/\/apps\.apple\.com|https:\/\/play\.google\.com)/;

    <WebView
        source={{ uri }}
        onShouldStartLoadWithRequest={(request) => {
            if (STORE_PATTERN.test(request.url)) {
                Linking.openURL(request.url);
                return false;
            }
            return true;
        }}
    />

The userId you pass here must be the same stable identifier you expect to receive back as {user_id} on your postback.

Do not reload the web view on every render. Memoise the uri or keep the component mounted, otherwise the user loses their place in the wall each time your state changes.