Add Adrop to React Native

Prerequisites


Step 1: Create an Adrop project

Before you can add Adrop to your React Native app, you need to create an Adrop project to connect to your app.

Step 2: Register your app with Adrop

To use Adrop in your React Native app, you need to register your app with your Adrop project. Registering your app is often called "adding" your app to your project.

Make sure to enter the package name that your app is actually using. The package name value is case-sensitive, and it cannot be changed for this Adrop Android app after it's registered with your Adrop project.

Using React Native app builder
  1. Go to the Adrop console.

  2. In the center of the project app page, click the React icon button to launch the setup workflow.

  3. Enter your app's package name in the React package name field.

    • A package name uniquely identifies your app on the device and in the Google Play Store or App Store.

    • A package name is often referred to as an application ID.

    • Be aware that the package name value is case-sensitive, and it cannot be changed for this Adrop React app after it's registered with your Adrop project.

  4. Enter other app information: App nickname.

    • App nickname: An internal, convenience identifier that is only visible to you in the Adrop console

  5. Click Register app and then Android and Apple apps will be created respectively.

Step 3: Add an Adrop configuration file

  1. Download adrop_service.json to obtain your Adrop Android platforms config file.

Step 4: Add Adrop library to your app

  1. From your React Native project directory, run the following command to install the plugin.

npm install adrop-ads-react-native
  1. Altering CocoaPods to use frameworks

Open the file ./ios/Podfile and add this line inside your targets

use_frameworks!

adrop-ads-react-native uses use_frameworks, which has compatibility issues with Flipper.

Flipper: use_frameworks is not compatible with Flipper. You need to disable Flipper by commenting out the :flipper_configuration line in your Podfile.

  1. Autolinking & rebuilding

Once the above steps have been completed, the React Native Adrop library must be linked to your project and your application needs to be rebuilt.

Users on React Native 0.60+ automatically have access to "autolinking", requiring no further manual installation steps. To automatically link the package, rebuild your project:

# Android apps
npx react-native run-android

# iOS apps
cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

Step 5: Initialize Adrop in your app

The final step is to add initialization code to your application.

  1. Import the Adrop library and initialize.

import { Adrop } from 'adrop-ads-react-native';

// ..
Adrop.initialize(production);
  1. Add AdropNavigatorObserver to measure the frequency of ad impressions if you use @react-navigation

<NavigationContainer
    onStateChange={AdropNavigatorObserver.onStateChange}
>

Next Steps

You're all set! Please register an Ad unit to show ads to users.

Learn how to Create your Ad unit.


(Optional) Troubleshooting

# Add this line to your Podfile
use_frameworks!

# ...
post_install do |installer|
    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|

        #...
        # Add this line to your Podfile
        config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
        end
    end
end

Last updated