Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 37 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@

You must have Facebook developer account in order to start integrating your app with this library. If you don't have one sign up [here](https://developers.facebook.com/).

Follow the instructions on [react-native-fbsdk](https://github.com/facebook/react-native-fbsdk) to integrate the **Facebook SDK** into your project.
Follow the instructions on [react-native-fbsdk-next](https://github.com/thebergamo/react-native-fbsdk-next) to integrate the **Facebook SDK** into your project.
Comment thread
giautm marked this conversation as resolved.

### Get a Placement ID

Expand Down Expand Up @@ -81,6 +81,42 @@ $ react-native link react-native-fbads

</details>

## Expo installation

> This package cannot be used in the "Expo Go" app because [it requires custom native code](https://docs.expo.io/workflow/customizing/).

> First install the package with yarn, npm, or [`expo install`](https://docs.expo.io/workflow/expo-cli/#expo-install).

```sh
expo install react-native-fbsdk-next react-native-fbads
```

After installing this npm package, add the [config plugin](https://docs.expo.io/guides/config-plugins/) to the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.json` or `app.config.js`:

```json
{
"expo": {
"plugins": [
[
"react-native-fbsdk-next",
{
"appID": "48127127xxxxxxxx",
"clientToken": "c5078631e4065b60d7544a95xxxxxxxx",
"displayName": "RN SDK Demo",
"advertiserIDCollectionEnabled": false,
"autoLogAppEventsEnabled": false,
"isAutoInitEnabled": true,
"iosUserTrackingPermission": "This identifier will be used to deliver personalized ads to you."
}
],
"react-native-fbads"
]
}
}
```

Next, rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide.

## Usage

### Interstitial Ads
Expand Down
1 change: 1 addition & 0 deletions app.plugin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require("./plugin/build/withReactNativeFbads");
Comment thread
giautm marked this conversation as resolved.
10 changes: 9 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
"example": "example"
},
"scripts": {
"build:plugin": "tsc --build plugin",
"clean:plugin": "expo-module clean plugin",
"lint:plugin": "eslint plugin/src/*",
"prepare": "npm run build:plugin",
"tsc": "tsc --project .",
"lint": "tslint --project ."
},
Expand All @@ -22,11 +26,13 @@
"react-native": "*"
},
"dependencies": {
"@expo/config-plugins": "^4.0.4",
"fbemitter": "^2.1.1"
},
"devDependencies": {
"@types/fbemitter": "^2.0.32",
"@types/react-native": "^0.57.4",
"expo-module-scripts": "^2.0.0",
"tslint": "^5.11.0",
"tslint-config-airbnb": "^5.11.0",
"tslint-config-prettier": "^1.15.0",
Expand All @@ -46,6 +52,8 @@
"package.json",
"dist",
"react-native.config.js",
"ReactNativeAdsFacebook.podspec"
"ReactNativeAdsFacebook.podspec",
"app.plugin.js",
"plugin/build/"
]
}
80 changes: 80 additions & 0 deletions plugin/src/withReactNativeFbads.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import {
AndroidConfig,
ConfigPlugin,
createRunOncePlugin,
withAndroidManifest,
} from '@expo/config-plugins';
const { getMainApplicationOrThrow, prefixAndroidKeys } = AndroidConfig.Manifest;

const INTERSTITIAL_AD_ACTIVITY = 'com.facebook.ads.InterstitialAdActivity';

export const withFacebookManifest: ConfigPlugin = (config) => {
return withAndroidManifest(config, (config) => {
config.modResults = setFacebookConfig(config.modResults);
return config;
});
};

export function setFacebookConfig(
androidManifest: AndroidConfig.Manifest.AndroidManifest
) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let mainApplication = getMainApplicationOrThrow(androidManifest);
mainApplication = ensureFacebookActivity({ mainApplication });

return androidManifest;
}

function ensureFacebookActivity({
mainApplication,
}: {
mainApplication: AndroidConfig.Manifest.ManifestApplication;
}) {
if (Array.isArray(mainApplication.activity)) {
// Remove all Facebook InterstitialAdActivity first
mainApplication.activity = mainApplication.activity.filter((activity) => {
return activity.$?.['android:name'] !== INTERSTITIAL_AD_ACTIVITY;
});
} else {
mainApplication.activity = [];
}

mainApplication.activity.push(getFacebookAdActivity());
return mainApplication;
}

function buildXMLItem({
head,
children,
}: {
head: Record<string, string>;
children?: Record<string, string | any[]>;
}) {
return { ...(children ?? {}), $: head };
}

function getFacebookAdActivity() {
/**
<activity
android:name="com.facebook.ads.InterstitialAdActivity"
android:configChanges="keyboardHidden|orientation"
/>
*/
return buildXMLItem({
head: prefixAndroidKeys({
name: INTERSTITIAL_AD_ACTIVITY,
configChanges: 'keyboardHidden|orientation',
}),
}) as AndroidConfig.Manifest.ManifestActivity;
}

/**
* Apply react-native-fbads configuration for Expo SDK 44 projects.
*/
const withReactNativeFbads: ConfigPlugin = (config) => {
return withFacebookManifest(config);
};

const pkg = require('react-native-fbads/package.json');

export default createRunOncePlugin(withReactNativeFbads, pkg.name, pkg.version);
8 changes: 8 additions & 0 deletions plugin/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"extends": "expo-module-scripts/tsconfig.plugin",
"compilerOptions": {
"outDir": "./build"
},
"include": ["./src"],
"exclude": ["**/__mocks__/*", "**/__tests__/*"]
}
Loading