React Native Bridge for ADBannerView
Objective-C JavaScript Python Java
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example updated example Jun 5, 2016
lib added eslint Jun 5, 2016
.editorconfig added .editorconfig Jun 5, 2016
.eslintrc added eslint Jun 5, 2016
.gitignore initial commit Aug 6, 2015
.npmignore updated .npmignore Jun 5, 2016
.travis.yml added .travis.yml Jun 5, 2016
LICENSE initial commit Aug 6, 2015
README.md updated example Jun 5, 2016
index.js added eslint Jun 5, 2016
package.json version bump Jun 5, 2016
screenshot.png initial commit Aug 6, 2015

README.md

react-native-adbannerview

Build Status npm version

This component serves as a bridge for ADBannerview. Feel free to contribute :-)

Installation

  1. npm install react-native-adbannerview --save
  2. Xcode: Right click LibrariesAdd Files to [project]
  3. Choose node_modules/react-native-adbannerview/lib/ADBannerViewManager.xcodeproj
  4. Xcode: Select the project in the navigator and add the library to the Build PhasesLink Binary With Libraries (libADBannerViewManager.a)

See: http://facebook.github.io/react-native/docs/linking-libraries-ios.html#content (Step 1 + 2)

Usage

import ADBannerView from 'react-native-adbannerview';

...

<ADBannerView />

The bannerview only appears, when an ad has been loaded successfully. Check the example below, where an additional View-Component is used to display the ADBannerView properly.

Props

Event Description
didFailToReceiveAdWithError Error loading banner
willLoadAd Before a new banner ad is loaded
didLoadAd When a new banner ad is loaded
actionDidFinish After banner view finishes executing an action

Example

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

import ADBannerView from 'react-native-adbannerview';

class Example extends Component {
  didLoadAd() {
    console.log('Ad loaded')
  }
  didFailToReceiveAdWithError() {
    console.log('Error loading ad')
  }
  render() {
    return (
      <View style={styles.stage}>
        <View style={styles.container}>
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
          <Text style={styles.instructions}>
            To get started, edit index.ios.js
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
        </View>
        <ADBannerView didLoadAd={this.didLoadAd} didFailToReceiveAdWithError={this.didFailToReceiveAdWithError} willLoadAd={() => {}} />
      </View>
    );
  }
};

const styles = StyleSheet.create({
  stage: {
    flex: 1,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('example', () => Example);

Run example

  1. Clone repo
  2. cd example
  3. npm i
  4. Xcode: hit build and run