Skip to content

Commit 0d504ad

Browse files
ammarahm-edammarahm-ed
authored
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
1 parent 5b0e6a5 commit 0d504ad

File tree

24 files changed

+3907
-5692
lines changed

24 files changed

+3907
-5692
lines changed

‎android/build.gradle

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ repositories {
5454
dependencies {
5555
implementation 'com.facebook.react:react-native:+'
5656
implementation "com.google.android.gms:play-services-ads:${safeExtGet('googlePlayServicesAdsVersion', '20.+')}"
57-
implementation 'com.google.ads.mediation:facebook:6.5.1.1'
5857
implementation 'com.android.support:support-annotations:28.0.0'
58+
implementation 'com.google.ads.mediation:facebook:6.+'
5959
implementation 'androidx.appcompat:appcompat:1.2.0'
6060
implementation 'com.android.support.constraint:constraint-layout:2.0.4'
6161
}

‎android/src/main/java/com/ammarahmed/rnadmob/nativeads/RNAdMobUnifiedAdQueueWrapper.java

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@
44
import android.os.Handler;
55
import android.util.Log;
66

7-
import com.facebook.ads.Ad;
8-
import com.facebook.ads.AdError;
9-
import com.facebook.ads.NativeAdListener;
107
import com.facebook.react.bridge.Arguments;
118
import com.facebook.react.bridge.ReactContext;
129
import com.facebook.react.bridge.ReadableMap;

‎android/src/main/java/com/ammarahmed/rnadmob/nativeads/Utils.java

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package com.ammarahmed.rnadmob.nativeads;
22

33
import android.os.Bundle;
4+
import android.util.Log;
45

56
import com.facebook.react.bridge.Arguments;
67
import com.facebook.react.bridge.ReadableArray;
@@ -80,6 +81,8 @@ public static void setVideoOptions(ReadableMap options, VideoOptions.Builder vid
8081
}
8182

8283
public static void setMediaAspectRatio(int type, NativeAdOptions.Builder adOptions) {
84+
Log.d("LOG_NATIVE_ADS" , FacebookAdapter.class.getName());
85+
8386
adOptions.setMediaAspectRatio(type);
8487
}
8588

‎docs/docs/admanager/repository.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
id: repository-1
3+
title: Repository
4+
sidebar_label: Repository
5+
---
6+
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.
7+
8+
### `registerRepository`
9+
Register a repository to preload ads
10+
11+
#### Properties
12+
13+
| Name | Type | Required |
14+
|-------------------------------|----------------------------------------------------------------------------------------------------------------------|----------|
15+
| name | `string` | no |
16+
| adUnitId | Ad Content Ratings | yes |
17+
| numOfAds | `number` | no |
18+
| requestNonPersonalizedAdsOnly | `boolean` | no |
19+
| expirationPeriod | `number` | no |
20+
| mediationEnabled | `boolean` | no |
21+
| videoOptions | [VideoOptions](https://ammarahm-ed.github.io/react-native-admob-native-ads/docs/nativeadview/videooptions-7) | no |
22+
| mediationOptions | [MediationOptions](https://ammarahm-ed.github.io/react-native-admob-native-ads/docs/nativeadview/mediationoptions-5) | no |
23+
| targetingOptions | [TargetingOptions](https://ammarahm-ed.github.io/react-native-admob-native-ads/docs/nativeadview/targetingoptions-6) | no |
24+
| adChoicesPlacement | `"topLeft","topRight","bottomLeft","bottomRight"` | no |
25+
| mediaAspectRatio | `"any","landscape","portrait","square","unknown"` | no |
26+
27+
### `unRegisterRepository`
28+
Unregister a repository. All preloaded ads in this repository will be destroyed.
29+
30+
### `resetCache`
31+
Reset all ad repositories.
32+
33+
### `hasAd`
34+
Check if there is ad in a repository.

‎docs/docs/admanager/requestconfig.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ title: setRequestConfiguration
44
sidebar_label: setRequestConfiguration
55
---
66

7-
`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.
7+
`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.
88

99
`setRequestConfiguration` returns `Promise<MediationAdapterStatus[]>` which is each mediation adapter's initialization status.
1010

1111
### Properties
1212

1313
| Name | Type | Required |
14-
| ---------------------------- | ------------------ | -------- |
14+
|------------------------------|--------------------|----------|
1515
| testDeviceIds | `Array<string>` | no |
1616
| maxAdContentRating | Ad Content Ratings | no |
1717
| tagForChildDirectedTreatment | `boolean` | no |
@@ -25,7 +25,7 @@ If you are building for iOS 14 or later, Facebook requires that you explicitly s
2525
### Ad Content Ratings
2626

2727
| Type | Description |
28-
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
28+
|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
2929
| G | "General audiences." Content suitable for all audiences, including families and children. |
3030
| MA | "Mature audiences." Content suitable only for mature audiences; includes topics such as alcohol, gambling, sexual content, and weapons. |
3131
| 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
3535
### MediationAdapterStatus
3636

3737
| Name | Type |
38-
| ----------- | -------------- |
38+
|-------------|----------------|
3939
| name | `string` |
4040
| description | `string` |
4141
| state | `AdapterState` |

‎docs/docs/components/media.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Style the outer `NativeMediaView` Component.
2828
Mute/unmute the video.
2929

3030
| Type | Required | Platform |
31-
| --------- | -------- | -------- |
31+
|-----------|----------|----------|
3232
| `boolean` | no | All |
3333

3434
`default:false`
@@ -38,7 +38,7 @@ Mute/unmute the video.
3838
Pause/play the video
3939

4040
| Type | Required | Platform |
41-
| --------- | -------- | -------- |
41+
|-----------|----------|----------|
4242
| `boolean` | no | All |
4343

4444
`default:false`
@@ -66,7 +66,7 @@ Called when the video starts playing.
6666
Returns with the `duration` and `currentTime` when the video is playing.
6767

6868
| Type | Required | Platform |
69-
| ---------- | -------- | -------- |
69+
|------------|----------|----------|
7070
| `Progress` | no | All |
7171

7272
`Progress:{ duration: string, currentTime: string }`

‎docs/docs/installation.md

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎docs/docs/installation.mdx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
id: installation-3
3+
title: Installation
4+
sidebar_label: Installation
5+
---
6+
7+
import Tabs from '@theme/Tabs';
8+
import TabItem from '@theme/TabItem';
9+
10+
11+
<Tabs>
12+
<TabItem value="npm" label="npm" default>
13+
<pre> npm install react-native-admob-native-ads --save </pre>
14+
</TabItem>
15+
<TabItem value="yarn" label="yarn">
16+
<pre> yarn add react-native-admob-native-ads </pre>
17+
</TabItem>
18+
</Tabs>
19+
20+
Install `react-native-vector-icons` to use `StarRatingView`.
21+
22+
<Tabs>
23+
<TabItem value="npm" label="npm" default>
24+
<pre>npm install react-native-vector-icons --save</pre>
25+
</TabItem>
26+
<TabItem value="yarn" label="yarn">
27+
<pre>yarn add react-native-vector-icons</pre>
28+
</TabItem>
29+
</Tabs>
30+
31+
Complete setup of [react-native-vector-icons ](https://github.com/oblador/react-native-vector-icons) for iOS & Android.
32+
33+
34+
## Android Setup
35+
36+
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).
37+
38+
```xml
39+
<manifest>
40+
<application>
41+
<!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
42+
<meta-data
43+
android:name="com.google.android.gms.ads.APPLICATION_ID"
44+
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
45+
</application>
46+
</manifest>
47+
```
48+
49+
## iOS Setup
50+
51+
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.
52+
53+
1. In your `Podfile`:
54+
55+
```
56+
pod 'Google-Mobile-Ads-SDK'
57+
pod 'GoogleMobileAdsMediationFacebook'
58+
```
59+
2. Update your `info.plist` file as mentioned in [Admob Documentation](https://developers.google.com/admob/ios/quick-start#update_your_infoplist)
60+
61+
After configuring your project run:
62+
63+
```bash
64+
pod install --repo-update
65+
```
66+
67+
### Requesting IDFA on iOS 14
68+
69+
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).
70+
71+
## Generate your Native Ad Ids
72+
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:
73+
74+
### Android
75+
76+
| Type | ID |
77+
|-----------------------|----------------------------------------|
78+
| Native Advanced | ca-app-pub-3940256099942544/2247696110 |
79+
| Native Advanced Video | ca-app-pub-3940256099942544/1044960115 |
80+
81+
### iOS
82+
83+
| Type | ID |
84+
|-----------------------|----------------------------------------|
85+
| Native Advanced | ca-app-pub-3940256099942544/3986624511 |
86+
| Native Advanced Video | ca-app-pub-3940256099942544/2521693316 |
87+
88+
## Enable Test Device
89+
A test device can be registered on App launch with `AdManager`:
90+
91+
```jsx
92+
import {AdManager} from "react-native-admob-native-ads";
93+
94+
AdManager.setRequestConfiguration({
95+
testDeviceIds:["Your test device id"];
96+
});
97+
```
98+
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).
99+
100+
:::caution
101+
102+
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.
103+
104+
:::
105+
106+

‎docs/docs/introduction.md renamed to ‎docs/docs/introduction.mdx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ title: Introduction
44
sidebar_label: Introduction
55
---
66

7-
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.
7+
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.
88

99
## How is this library different?
1010

11-
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.
11+
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.
1212

1313
## Can I design the ads myself?
1414

@@ -22,10 +22,11 @@ Yes absolutely you can! There are no limiations. You can design ads that look ju
2222
4. You can create your ads from ground up as you desire, **no limits.**
2323
5. No need to manage any .xml or .xib layout files!
2424
6. AutoRefresh ad at specific intervals
25-
7. **Support for Video Ads**
26-
8. Ad Mediation (Especially Facebook Ads)
27-
9. Ad Targeting
28-
10. Typescript definations
25+
7. Ad preloading
26+
8. **Support for Video Ads**
27+
9. Ad Mediation (Especially Facebook Ads)
28+
10. Ad Targeting
29+
11. Typescript definations
2930

3031
## Benefits
3132

0 commit comments

Comments
 (0)