Ads Sample - How to make money on your React Native app

React and React Native version

• react: 15.4.2
• react-native: 0.41.2

Ads Network

• AdMob

  • react-native-admob - A react-native component for Google AdMob banners.

  • Installation instructions for iOS

    • Install and link react-native-admob

      npm install -S git://github.com/lucianomlima/react-native-admob.git#react-native_v0.40.0-fix
      
      react-native link react-native-admob
      

    • Add Google AdMob Framework to Xcode

  • Installation instructions for Android

    • Install and link react-native-admob

      npm install -S git://github.com/lucianomlima/react-native-admob.git#react-native_v0.40.0-fix
      
      react-native link react-native-admob
      

    • Configure native projects

      • Add to android/settings.gradle

        include ':react-native-admob'
        project(':react-native-admob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-admob/android')
        

      • Add to android/app/build.gradle

        dependencies {
          ...
          compile project(':react-native-admob')
          ...
        }
        

      • Add to android/app/src/main/java/com/adssample/MainApplication.java 1, 2

        import com.sbugert.rnadmob.RNAdMobPackage;
        
        new RNAdMobPackage()
        

• Facebook Audience Network

  • react-native-fbads - Facebook Audience SDK integration for React Native.

  • Installation instructions for iOS

    • Install and link react-native-fbads

      npm install -S react-native-fbads
      
      react-native link react-native-fbads
      

    • Add Bolts.framework, FBSDKCoreKit.framework and FBAudienceNetwork.framework from Facebook SDK for iOS

    • Add to AppDelegate.m file 1, 2

      #import <FBSDKCoreKit/FBSDKCoreKit.h>
      
      [[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions];
      

  • Installation instructions for Android

    • Install and link react-native-fbads

      npm install -S react-native-fbads
      
      react-native link react-native-fbads
      

    • Configure native projects

      • Add to android/settings.gradle

        include ':react-native-fbads'
        project(':react-native-fbads').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbads/src/android')
        
        

      • Add to android/app/build.gradle

      dependencies {
        ...
        compile project(':react-native-fbads')
        compile 'com.facebook.android:facebook-android-sdk:4.+'
        ...
      }
      

      • Add to android/app/src/main/java/com/fbadssample/MainApplication.java 1, 2

      import io.callstack.react.fbads.FBAdsPackage;
      
      new FBAdsPackage()
      

      • Add to android/app/src/main/AndroidManifest.xml

      <activity
        android:name="com.facebook.ads.InterstitialAdActivity"
        android:configChanges="keyboardHidden|orientation" />
      

• Revmob

  • react-native-revmob

  • Installation instructions for iOS

    • Install and link react-native-revmob

      npm install -S RevMob/react-native-revmob
      
      react-native link react-native-revmob
      

    • Add the following frameworks to your XCode Project:

      • RevMobAds.framework from RevMob SDK for iOS
      • AdSupport.framework
      • AVFoundation.framework
      • CoreFoundation.framework (as optional)
      • CoreLocation.framework
      • Foundation.framework
      • MediaPlayer.framework
      • StoreKit.framework
      • SystemConfiguration.framework

Running

Clone & install

• Clone this repo git clone git@github.com:7kfpun/AdsReactNative.git
• cd AdsReactNative/...Sample
• run npm install || yarn install

iOS

• Run react-native run-ios

Android

• Run android avd and start an emulator
• Run react-native run-android

License

Released under the MIT License.