Feature: Create Expo managed workflow plugin

README.md

@@ -26,10 +26,31 @@ Drop-in and Components require a [client key][client.key], that should be provid
 ## Installation
 
 Add `@adyen/react-native` to your react-native project.
+
 ```bash
 yarn add @adyen/react-native
 ```
 
+### Expo integration (experimental)
+
+> ❕ Please pay attention that this library is not compatible with ExpoGo. You can use it only with **Expo managed workflow**.
+
+Add `@adyen/react-native` plugin to your `app.json`:
+
+```json
+{
+  "expo": {
+    "plugins": ["@adyen/react-native"]
+  }
+}
+```
+
+> In case you are facing issues with the plugin, please pre-build your app and investigate the files generated:
+>
+> ```bash
+> npx expo prebuild --clean
+> ```
+
 ### iOS integration
 
 1. run `pod install`

app.plugin.js

@@ -0,0 +1,75 @@
+const {
+  withAndroidManifest,
+  withMainActivity,
+  withAppDelegate,
+} = require('@expo/config-plugins');
+
+const withAdyenAndroid = (config) => {
+  const configWithMainActivity = withMainActivity(config, async (newConfig) => {
+    const mainActivity = newConfig.modResults;
+    mainActivity.contents = mainActivity.contents.replace(
+      'public class MainActivity extends ReactActivity {',
+      'import com.adyenreactnativesdk.AdyenCheckout;\n\npublic class MainActivity extends ReactActivity {'
+    );
+    mainActivity.contents = mainActivity.contents.replace(
+      'super.onCreate(null);\n  }',
+      'super.onCreate(null);\n    AdyenCheckout.setLauncherActivity(this);\n  }'
+    );
+    return newConfig;
+  });
+
+  const configWithManifest = withAndroidManifest(
+    configWithMainActivity,
+    async (newConfig) => {
+      const mainActivity = newConfig.modResults;
+      // Add com.adyenreactnativesdk.component.dropin.AdyenCheckoutService service
+      // after com.facebook.react.HeadlessJsTaskService
+      mainActivity.manifest.application = [
+        // @ts-expect-error - manifest is not well typed
+        {
+          ...mainActivity.manifest.application?.[0],
+          service: [
+            {
+              $: {
+                'android:name':
+                  'com.adyenreactnativesdk.component.dropin.AdyenCheckoutService',
+                'android:exported': 'false',
+              },
+            },
+          ],
+        },
+      ];
+      return newConfig;
+    }
+  );
+
+  return configWithManifest;
+};
+
+const withAdyenIos = (config, iosFramework) => {
+  const importLine =
+    iosFramework === 'static'
+      ? '#import <adyen_react_native/ADYRedirectComponent.h>'
+      : '#import <adyen-react-native/ADYRedirectComponent.h>';
+  const appDelegate = withAppDelegate(config, async (newConfig) => {
+    const appDelegateModResults = newConfig.modResults;
+    appDelegateModResults.contents = appDelegateModResults.contents.replace(
+      '#import "AppDelegate.h"\n\n',
+      `#import "AppDelegate.h"\n\n${importLine}\n`
+    );
+    appDelegateModResults.contents = appDelegateModResults.contents.replace(
+      /\/\/ Linking API.*\n.*\n.*\n}/g,
+      `// Linking API
+- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
+  // Adyen SDK
+  return [ADYRedirectComponent applicationDidOpenURL:url];
+}`
+    );
+    return newConfig;
+  });
+  return appDelegate;
+};
+
+module.exports = function (config, iosFramework = 'dynamic') {
+  return withAdyenIos(withAdyenAndroid(config), iosFramework);
+};

example-expo/.gitignore

@@ -0,0 +1,37 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+ios/
+android/
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

example-expo/App.js

@@ -0,0 +1,20 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text>Open up App.js to start working on your app!</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

example-expo/app.json

@@ -0,0 +1,31 @@
+{
+  "expo": {
+    "name": "ExampleExpo",
+    "slug": "ExampleExpo",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.ExampleExpo"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.ExampleExpo"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": ["@adyen/react-native"]
+  }
+}

example-expo/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

example-expo/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "exampleexpo",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@adyen/react-native": "file:../",
+    "expo": "~49.0.15",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "expo-splash-screen": "~0.20.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}