Merge pull request #24 from NativoPlatform/feature-native

Merge with master

.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

ErrorBoundary.js

@@ -0,0 +1,33 @@
+import React, { type Node, type ComponentType } from 'react'
+import {View} from 'react-native';
+
+type Props = {
+    children: Node,
+    onError?: Function
+}
+
+type State = { error: Error | null, hasError: boolean }
+
+class ErrorBoundary extends React.Component<Props, State> {
+    state = { error: null, hasError: false }
+
+    static getDerivedStateFromError (error: Error) {
+        return { error, hasError: true }
+    }
+
+    componentDidCatch (error: Error, info: { componentStack: string }) {
+        if (typeof this.props.onError === 'function') {
+            this.props.onError.call(this, error, info.componentStack)
+        }
+    }
+
+    resetError: Function = () => {
+        this.setState({ error: null, hasError: false })
+    }
+
+    render () {
+        return this.state.hasError ?  <View/> : this.props.children
+    }
+}
+
+export default ErrorBoundary

NativoAd.android.js

@@ -0,0 +1,38 @@
+import React, {Component} from 'react';
+import ErrorBoundary from "./ErrorBoundary";
+import NativoAdComponentInternal from "./sdk_components/NativoAdComponentInternal";
+import PropTypes from 'prop-types';
+
+class NativoAd extends Component<props> {
+
+    constructor(props) {
+        super(props);
+        this._nodes = new Map();
+    }
+
+    render() {
+        return (
+            <ErrorBoundary>
+                <NativoAdComponentInternal ref={c => this._nodes.set(this.props.index, c)} {...this.props}
+                                           sectionUrl={this.props.sectionUrl}
+                                           index={this.props.index}
+                                           nativeAdTemplate={this.props.nativeAdTemplate}
+                                           nativeVideoAdTemplate={this.props.videoAdTemplate}
+                                           standardDisplayAdTemplate={this.props.standardDisplayAdTemplate}/>
+            </ErrorBoundary>
+        )
+    }
+}
+
+NativoAd.propTypes = {
+    sectionUrl: PropTypes.string,
+    index: PropTypes.number,
+    nativeAdTemplate: PropTypes.func,
+    videoAdTemplate: PropTypes.func,
+    standardDisplayAdTemplate: PropTypes.func,
+    onNativeAdClick: PropTypes.func,
+    onDisplayAdClick: PropTypes.func,
+    onAdRemoved: PropTypes.func
+};
+
+export default NativoAd;

NativoAd.ios.js

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {requireNativeComponent, AppRegistry } from 'react-native';
+
+const _registeredTemplates = [];
+
+function NativoAdComponent(props) {
+    const { nativeAdTemplate, videoAdTemplate, standardDisplayAdTemplate, ...other } = props;
+
+    _onNativeAdClick = (event) => {
+        if (!props.onNativeAdClick) {
+            console.log("Nativo ad at index "+ props.index +" was clicked but 'onNativeAdClick' not implemented");
+            return;
+        }
+        props.onNativeAdClick(event.nativeEvent);
+    }
+    _onDisplayAdClick = (event) => {
+        if (!props.onDisplayAdClick) {
+            console.log("Nativo ad at index "+ props.index +" was clicked but 'onDisplayAdClick' not implemented");
+            return;
+        }
+        props.onDisplayAdClick(event.nativeEvent);
+    }
+    _onAdRemoved = (event) => {
+        if (!props.onAdRemoved) { return; }
+        props.onAdRemoved(event.nativeEvent);
+    }
+
+    // Register templates with app registry root views
+    const allTemplates = [nativeAdTemplate, videoAdTemplate, standardDisplayAdTemplate];
+    allTemplates.forEach((template) => {
+        if (template != null) {
+            if ( !_registeredTemplates.includes(template.name) ) {
+                AppRegistry.registerComponent(template.name, () => template);
+                _registeredTemplates.push(template.name);
+            }
+        }
+    });
+
+    return (
+        <NativoAd {...other} 
+            onNativeAdClick={_onNativeAdClick} 
+            onDisplayAdClick={_onDisplayAdClick} 
+            onAdRemoved={_onAdRemoved} 
+            nativeAdTemplate={nativeAdTemplate.name} 
+            videoAdTemplate={videoAdTemplate.name} 
+            stdDisplayAdTemplate={standardDisplayAdTemplate.name}>
+        </NativoAd>
+    );
+}
+
+NativoAdComponent.propTypes = {
+    sectionUrl: PropTypes.string,
+    index: PropTypes.number,
+    nativeAdTemplate: PropTypes.func,
+    videoAdTemplate: PropTypes.func,
+    standardDisplayAdTemplate: PropTypes.func,
+    onNativeAdClick: PropTypes.func,
+    onDisplayAdClick: PropTypes.func,
+    onAdRemoved: PropTypes.func
+};
+const NativoAd = requireNativeComponent('NativoAd', NativoAdComponent);
+
+export default NativoAdComponent;

NativoVideo.android.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import NativoVideoControls from "./view_components/NativoVideoControls";
+import Video from "react-native-video";
+
+function NativoVideo(props) {
+    return (
+        <View style={styles.container}>
+            <Video nativeID={'videoView'} useTextureView={true} style={styles.backgroundVideo} source={{uri: ''}}/>
+            <NativoVideoControls/>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    backgroundVideo: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+    },
+
+});
+
+export default NativoVideo;

NativoVideo.ios.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { View } from 'react-native';
+
+function NativoVideo(props) {
+    return (<View {...props} nativeID={'videoView'} />);
+}
+
+export default NativoVideo;

NativoWebContent.android.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import ErrorBoundary from "./ErrorBoundary";
+import NativoLandingPageComponentInternal from "./sdk_components/NativoLandingPageComponentInternal";
+import NativoStandardDisplay from "./sdk_components/NativoStandardDisplay";
+
+class NativoWebContent extends Component<props> {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <ErrorBoundary>
+                {typeof(this.props.webViewForSD) == "undefined" &&
+                <NativoLandingPageComponentInternal ref={(el) => (this._landingContainer = el)}
+                                                    adId={this.props.index}
+                                                    containerHash={this.props.containerHash}
+                                                    url={this.props.sectionUrl}
+                                                    onClickExternalLink={this.props.onClickExternalLink}
+                                                    onFinishLoading={this.props.onFinishLoading}
+                                                    {...this.props}/> }
+                {this.props.webViewForSD && <NativoStandardDisplay {...this.props}/>}
+            </ErrorBoundary>
+        )
+    }
+
+}
+
+NativoWebContent.propTypes = {
+    sectionUrl: PropTypes.string,
+    index: PropTypes.number,
+    containerHash: PropTypes.number,
+    shouldScroll: PropTypes.bool,
+    onFinishLoading: PropTypes.func,
+    onClickExternalLink: PropTypes.func
+};
+
+export default NativoWebContent;

NativoWebContent.ios.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {requireNativeComponent } from 'react-native';
+
+function NativoWebComponent(props) {
+    const [sectionUrl, setSectionUrl] = React.useState();
+    const [index, setIndex] = React.useState();
+    const [shouldScroll, setShouldScroll] = React.useState(false);
+
+    _onClickExternalLink = (event) => {
+        if (!props.onClickExternalLink) {
+          return;
+        }
+        props.onClickExternalLink(event.nativeEvent);
+    }
+    _onFinishLoading = (event) => {
+        if (!props.onFinishLoading) {
+          return;
+        }
+        props.onFinishLoading(event.nativeEvent);
+    }
+    return (<NativoWebContent {...props} onClickExternalLink={this._onClickExternalLink} onFinishLoading={this._onFinishLoading} />);
+}
+
+NativoWebComponent.propTypes = {
+    sectionUrl: PropTypes.string,
+    index: PropTypes.number,
+    shouldScroll: PropTypes.bool,
+    onFinishLoading: PropTypes.func,
+    onClickExternalLink: PropTypes.func
+};
+const NativoWebContent = requireNativeComponent('NativoWebContent', NativoWebComponent);
+
+export default NativoWebComponent;

README.md

@@ -1,44 +1,58 @@
 
-# NativoSDK-ReactNative
+# react-native-nativo-ads
 
-## Getting started
-
-`$ npm install react-native-nativo-sdk-react-native --save`
-
-### Mostly automatic installation
-
-`$ react-native link react-native-nativo-sdk-react-native`
-
-### Manual installation
-
-
-#### iOS
+Monetize your app with Nativo for React Native. Requires React Native `0.60.5` or greater. 
 
-1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
-2. Go to `node_modules` ➜ `react-native-nativo-sdk-react-native` and add `RNNativoSdkReactNative.xcodeproj`
-3. In XCode, in the project navigator, select your project. Add `libRNNativoSdkReactNative.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
-4. Run your project (`Cmd+R`)<
-
-#### Android
-
-1. Open up `android/app/src/main/java/[...]/MainActivity.java`
-  - Add `import RNNativoSdkReactNativePackage;` to the imports at the top of the file
-  - Add `new RNNativoSdkReactNativePackage()` to the list returned by the `getPackages()` method
-2. Append the following lines to `android/settings.gradle`:
-  	```
-  	include ':react-native-nativo-sdk-react-native'
-  	project(':react-native-nativo-sdk-react-native').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-nativo-sdk-react-native/android')
-  	```
-3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
-  	```
-      compile project(':react-native-nativo-sdk-react-native')
-  	```
+## Getting started
+```bash
+npm install react-native-nativo-ads --save
+cd ios
+pod install
+```
 
 ## Usage
 ```javascript
-import RNNativoSdkReactNative from 'react-native-nativo-sdk-react-native';
-
-// TODO: What to do with the module?
-RNNativoSdkReactNative;
+import { NativoSDK, NativoAd } from 'react-native-nativo-ads';
+
+NativoSDK.enableDevLogs();
+NativoSDK.enableTestAdvertisementsWithType(NativoSDK.AdTypes.NATIVE);
+
+needsDisplayClickOutURL = (event) => {
+    this.props.navigation.navigate('ClickOutScreen', {
+        url: event.url,
+    });
+};
+
+displayLandingPage = (event) => {
+    this.props.navigation.navigate('NativoLandingScreen', event);
+};
+
+const NativeAdTemplate = (props) => {
+    return (
+        <View nativeID={'nativoAdView'} style={styles.nativeCard}>
+            <Text style={{color: '#1A1AFF', fontWeight: 'bold'}}>Sponsored Content</Text>
+            <Image style={styles.cardImage} nativeID={'articleImage'}/>
+            <View>
+                <Text nativeID={'articleDate'} style={{textAlign: 'right', height: 30}}>{props.adDate} </Text>
+                <Text editable={false} nativeID={'articleTitle'}
+                      style={{textAlign: 'center', fontWeight: 'bold', height: 35}}>{props.adTitle}</Text>
+                <Text numberOfLines={2} multiline={true} editable={false} nativeID={'articleDescription'}
+                      style={{textAlign: 'center', height: 50}}>{props.adDescription} </Text>
+            </View>
+            <View style={styles.textRow}>
+                <Image nativeID={'authorImage'} style={{height: 30, width: 30}}/>
+                <Text nativeID={'authorName'}>{props.adAuthorName}</Text>
+            </View>
+        </View>
+    );
+};
+
+<NativoAd 
+    sectionUrl={ "www.mypub.com" }
+    index={ 8 }
+    nativeAdTemplate={ NativeAdTemplate }
+    onNativeAdClick={ this.displayLandingPage }
+    onDisplayAdClick={ this.needsDisplayClickOutURL }
+     />
 ```
-  # NativoSDK-ReactNative
+