v0.6.0 (#278)

* docs: update installation guide * update docs * docs: add docs for cache repositories * finalize docs * update facebook mediation version * feat: TestIds * remove facebook mediation dependancy * minor improvements to example AdView * undo changes * update installation guide
ammarahm-ed · May 22, 2022 · 0d504ad · 0d504ad
1 parent 5b0e6a5
commit 0d504ad
Show file tree

Hide file tree

Showing 24 changed files with 3,907 additions and 5,692 deletions.
diff --git a/android/build.gradle b/android/build.gradle
@@ -54,8 +54,8 @@ repositories {
 dependencies {
     implementation 'com.facebook.react:react-native:+'
     implementation "com.google.android.gms:play-services-ads:${safeExtGet('googlePlayServicesAdsVersion', '20.+')}"
-    implementation 'com.google.ads.mediation:facebook:6.5.1.1'
     implementation 'com.android.support:support-annotations:28.0.0'
+    implementation 'com.google.ads.mediation:facebook:6.+'
     implementation 'androidx.appcompat:appcompat:1.2.0'
     implementation 'com.android.support.constraint:constraint-layout:2.0.4'
 }
diff --git a/android/src/main/java/com/ammarahmed/rnadmob/nativeads/RNAdMobUnifiedAdQueueWrapper.java b/android/src/main/java/com/ammarahmed/rnadmob/nativeads/RNAdMobUnifiedAdQueueWrapper.java
@@ -4,9 +4,6 @@
 import android.os.Handler;
 import android.util.Log;
 
-import com.facebook.ads.Ad;
-import com.facebook.ads.AdError;
-import com.facebook.ads.NativeAdListener;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableMap;

diff --git a/android/src/main/java/com/ammarahmed/rnadmob/nativeads/Utils.java b/android/src/main/java/com/ammarahmed/rnadmob/nativeads/Utils.java
@@ -1,6 +1,7 @@
 package com.ammarahmed.rnadmob.nativeads;
 
 import android.os.Bundle;
+import android.util.Log;
 
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReadableArray;
@@ -80,6 +81,8 @@ public static void setVideoOptions(ReadableMap options, VideoOptions.Builder vid
     }
 
     public static void setMediaAspectRatio(int type, NativeAdOptions.Builder adOptions) {
+        Log.d("LOG_NATIVE_ADS" , FacebookAdapter.class.getName());
+
         adOptions.setMediaAspectRatio(type);
     }
 

diff --git a/docs/docs/admanager/repository.md b/docs/docs/admanager/repository.md
@@ -0,0 +1,34 @@
+---
+id: repository-1
+title: Repository
+sidebar_label: Repository
+---
+Repositories can be used to preload ads in the app and show them to the user when they navigate to some part of your app.
+
+### `registerRepository`
+Register a repository to preload ads
+
+#### Properties
+
+| Name                          | Type                                                                                                                 | Required |
+|-------------------------------|----------------------------------------------------------------------------------------------------------------------|----------|
+| name                          | `string`                                                                                                             | no       |
+| adUnitId                      | Ad Content Ratings                                                                                                   | yes      |
+| numOfAds                      | `number`                                                                                                             | no       |
+| requestNonPersonalizedAdsOnly | `boolean`                                                                                                            | no       |
+| expirationPeriod              | `number`                                                                                                             | no       |
+| mediationEnabled              | `boolean`                                                                                                            | no       |
+| videoOptions                  | [VideoOptions](https://ammarahm-ed.github.io/react-native-admob-native-ads/docs/nativeadview/videooptions-7)         | no       |
+| mediationOptions              | [MediationOptions](https://ammarahm-ed.github.io/react-native-admob-native-ads/docs/nativeadview/mediationoptions-5) | no       |
+| targetingOptions              | [TargetingOptions](https://ammarahm-ed.github.io/react-native-admob-native-ads/docs/nativeadview/targetingoptions-6) | no       |
+| adChoicesPlacement            | `"topLeft","topRight","bottomLeft","bottomRight"`                                                                    | no       |
+| mediaAspectRatio              | `"any","landscape","portrait","square","unknown"`                                                                    | no       |
+
+### `unRegisterRepository`
+Unregister a repository. All preloaded ads in this repository will be destroyed.
+
+### `resetCache`
+Reset all ad repositories.
+
+### `hasAd`
+Check if there is ad in a repository.
diff --git a/docs/docs/admanager/requestconfig.md b/docs/docs/admanager/requestconfig.md
@@ -4,14 +4,14 @@ title: setRequestConfiguration
 sidebar_label: setRequestConfiguration
 ---
 
-`setRequestConfiguration` is a function configures Ad requests and initializes Mobile Ads SDK. You need to call this function before you load any Ads. Generally, you call this function when the root component of your app is mounted. You need to pass a single object as an argument with at least one of the following properties.
+`setRequestConfiguration` is a function that configures Ad requests and initializes Mobile Ads SDK. You need to call this function before you load any Ads. Generally, you call this function when the root component of your app is mounted.
 
 `setRequestConfiguration` returns `Promise<MediationAdapterStatus[]>` which is each mediation adapter's initialization status.
 
 ### Properties
 
 | Name                         | Type               | Required |
-| ---------------------------- | ------------------ | -------- |
+|------------------------------|--------------------|----------|
 | testDeviceIds                | `Array<string>`    | no       |
 | maxAdContentRating           | Ad Content Ratings | no       |
 | tagForChildDirectedTreatment | `boolean`          | no       |
@@ -25,7 +25,7 @@ If you are building for iOS 14 or later, Facebook requires that you explicitly s
 ### Ad Content Ratings
 
 | Type        | Description                                                                                                                                       |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
 | G           | "General audiences." Content suitable for all audiences, including families and children.                                                         |
 | MA          | "Mature audiences." Content suitable only for mature audiences; includes topics such as alcohol, gambling, sexual content, and weapons.           |
 | PG          | "Parental guidance." Content suitable for most audiences with parental guidance, including topics like non-realistic, cartoonish violence.        |
@@ -35,7 +35,7 @@ If you are building for iOS 14 or later, Facebook requires that you explicitly s
 ### MediationAdapterStatus
 
 | Name        | Type           |
-| ----------- | -------------- |
+|-------------|----------------|
 | name        | `string`       |
 | description | `string`       |
 | state       | `AdapterState` |

diff --git a/docs/docs/components/media.md b/docs/docs/components/media.md
@@ -28,7 +28,7 @@ Style the outer `NativeMediaView` Component.
 Mute/unmute the video.
 
 | Type      | Required | Platform |
-| --------- | -------- | -------- |
+|-----------|----------|----------|
 | `boolean` | no       | All      |
 
 `default:false`
@@ -38,7 +38,7 @@ Mute/unmute the video.
 Pause/play the video
 
 | Type      | Required | Platform |
-| --------- | -------- | -------- |
+|-----------|----------|----------|
 | `boolean` | no       | All      |
 
 `default:false`
@@ -66,7 +66,7 @@ Called when the video starts playing.
 Returns with the `duration` and `currentTime` when the video is playing.
 
 | Type       | Required | Platform |
-| ---------- | -------- | -------- |
+|------------|----------|----------|
 | `Progress` | no       | All      |
 
 `Progress:{ duration: string, currentTime: string }`

diff --git a/docs/docs/installation.md b/docs/docs/installation.md
diff --git a/docs/docs/installation.mdx b/docs/docs/installation.mdx
@@ -0,0 +1,106 @@
+---
+id: installation-3
+title: Installation
+sidebar_label: Installation
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+<Tabs>
+  <TabItem value="npm" label="npm" default>
+   <pre> npm install react-native-admob-native-ads --save </pre>
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+   <pre> yarn add react-native-admob-native-ads </pre>
+  </TabItem>
+</Tabs>
+
+Install `react-native-vector-icons` to use `StarRatingView`. 
+
+<Tabs>
+  <TabItem value="npm" label="npm" default>
+   <pre>npm install react-native-vector-icons --save</pre> 
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+   <pre>yarn add react-native-vector-icons</pre>
+  </TabItem>
+</Tabs>
+
+Complete setup of [react-native-vector-icons ](https://github.com/oblador/react-native-vector-icons) for iOS & Android.
+
+
+## Android Setup
+
+Add your AdMob App ID to `AndroidManifest.xml`, as described in the [Google Mobile Ads SDK documentation](https://developers.google.com/admob/android/quick-start#update_your_androidmanifestxml).
+
+```xml
+<manifest>
+    <application>
+        <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
+        <meta-data
+            android:name="com.google.android.gms.ads.APPLICATION_ID"
+            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
+    </application>
+</manifest>
+```
+
+## iOS Setup
+
+Follow the guide to add [Google Mobile Ads SDK](https://developers.google.com/admob/ios/quick-start#import_the_mobile_ads_sdk) to your Xcode project.
+
+1. In your `Podfile`:
+
+```
+pod 'Google-Mobile-Ads-SDK'
+pod 'GoogleMobileAdsMediationFacebook'
+```
+2. Update your `info.plist` file as mentioned in [Admob Documentation](https://developers.google.com/admob/ios/quick-start#update_your_infoplist)
+
+After configuring your project run:
+
+```bash
+pod install --repo-update
+```
+
+### Requesting IDFA on iOS 14
+
+On iOS 14 onwards, you need to request IDFA access through App Tracking Transparency Dialog to show targeted ads to the user. For that you can use [react-native-tracking-transparency](https://github.com/mrousavy/react-native-tracking-transparency).
+
+## Generate your Native Ad Ids
+Before you can show any ads, you will need to generate Admob Ids on your Admob account. For debugging you can use test ad ids provided by google given below:
+
+### Android
+
+| Type                  | ID                                     |
+|-----------------------|----------------------------------------|
+| Native Advanced       | ca-app-pub-3940256099942544/2247696110 |
+| Native Advanced Video | ca-app-pub-3940256099942544/1044960115 |
+
+### iOS
+
+| Type                  | ID                                     |
+|-----------------------|----------------------------------------|
+| Native Advanced       | ca-app-pub-3940256099942544/3986624511 |
+| Native Advanced Video | ca-app-pub-3940256099942544/2521693316 |
+
+## Enable Test Device
+A test device can be registered on App launch with `AdManager`:
+
+```jsx
+import {AdManager} from "react-native-admob-native-ads";
+
+AdManager.setRequestConfiguration({
+        testDeviceIds:["Your test device id"];
+});
+```
+To get your device test ids, follow the guide for [iOS](https://developers.google.com/admob/ios/test-ads#enable_test_devices) & [Android](https://developers.google.com/admob/ios/test-ads#enable_test_devices).
+
+:::caution
+
+When you newly generate your ad ids from Admob account and implement them in the app. It can take a few hours to a day for ads to show up. So be patient or use the test ids above for testing.
+
+:::
+
+
diff --git a/docs/docs/introduction.md → docs/docs/introduction.mdx b/docs/docs/introduction.md → docs/docs/introduction.mdx
@@ -4,11 +4,11 @@ title: Introduction
 sidebar_label: Introduction
 ---
 
-If you are working on a React Native Application, you might feel limited when it comes to displaying ads that look beautiful and match your app's look and feel. Usually when you show ads in your app, they are loaded inside a `WebView` and that is why you cannot modify them except changing the width and height in some cases.
+If you are working on a React Native Application, you might feel limited when it comes to displaying ads that look beautiful and match your App's look and feel. Usually when you show ads in your app, they are loaded inside a `WebView` and that is why you cannot modify them except changing the width and height in some cases.
 
 ## How is this library different?
 
-We on the other hand do not load ads in a `WebView`. We use a more complex, [Native Advanced](https://developers.google.com/admob/android/native/start) ad format to display ads. We request Admob servers to send us the ad information such as images, headlines, videos etc. Then we send this information over the bridge to React Native and render it in React Native's `View` and `Text` components execpt a few exceptions where we use our own custom components.
+This library on the other hand do not load ads in a `WebView`. It uses [Native Advanced](https://developers.google.com/admob/android/native/start) ad format to display ads. We request Admob servers to send us the ad information such as images, headlines, videos etc. Then we send this information over the bridge and render it in `View` and `Text` components execpt a few exceptions where we use our own custom components.
 
 ## Can I design the ads myself?
 
@@ -22,10 +22,11 @@ Yes absolutely you can! There are no limiations. You can design ads that look ju
 4.  You can create your ads from ground up as you desire, **no limits.**
 5.  No need to manage any .xml or .xib layout files!
 6.  AutoRefresh ad at specific intervals
-7.  **Support for Video Ads**
-8.  Ad Mediation (Especially Facebook Ads)
-9.  Ad Targeting
-10. Typescript definations
+7.  Ad preloading
+8.  **Support for Video Ads**
+9.  Ad Mediation (Especially Facebook Ads)
+10.  Ad Targeting
+11. Typescript definations
 
 ## Benefits