Merge pull request #500 from Adyen/example_rn74

Migrate Example app to RN 74

.gitignore

@@ -31,7 +31,7 @@ DerivedData
 *.xcuserstate
 project.xcworkspace
 Pods/
-*.xcode.env
+*.xcode.env.local
 
 # Android/IJ
 .idea

example/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

example/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

example/.watchmanconfig

@@ -0,0 +1 @@
+{}

example/src/App.js → example/App.tsx

@@ -15,14 +15,14 @@ import {
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import { Button, Alert, useColorScheme } from 'react-native';
-import CseView from './Views/CseView';
-import SettingView from './Views/SettingsView';
-import Result from './Views/ResultView';
-import SessionsCheckout from './Views/Checkout/SessionsCheckout';
-import AdvancedCheckout from './Views/Checkout/AdvancedCheckout';
-import Home from './Views/HomeView';
-import AppContextProvider from './Utilities/AppContext';
-import { DEFAULT_CONFIGURATION } from './Configuration';
+import CseView from './src/Views/CseView';
+import SettingView from './src/Views/SettingsView';
+import Result from './src/Views/ResultView';
+import SessionsCheckout from './src/Views/Checkout/SessionsCheckout';
+import AdvancedCheckout from './src/Views/Checkout/AdvancedCheckout';
+import Home from './src/Views/HomeView';
+import AppContextProvider from './src/Utilities/AppContext';
+import { DEFAULT_CONFIGURATION } from './src/Configuration';
 
 const Stack = createNativeStackNavigator();
 

example/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
+# bound in the template on Cocoapods with next React Native release.
+gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'

example/README.md

@@ -1,7 +1,75 @@
-# Example App
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
 
-## How to run
+# Getting Started
 
-1. provide your credentials in `src/Configuration.js`
-2. run `yarn` on repo's root folder and wait for binaries to be created in *lib/* folder
-3. run `yarn ios` or `yarn android` on repo's root or *example/* folder
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Build librarty
+
+Before begining with the app, make sure you have build binaries in the root folder.
+
+```bash
+# using npm
+npm install
+
+# OR using Yarn
+yarn install
+```
+
+This will fetch dependencies and generate compressed binaries in *lib/* folder.
+
+## Step 2: Provide credentials
+
+ In `src/Configuration.js` replace following placeholders with your keys:
+
+ | Key | Value |
+ | --- | --- |
+ | {YOUR_DEMO_SERVER_API_KEY} | Your [API key](https://docs.adyen.com/development-resources/how-to-get-the-api-key) | 
+ | {YOUR_CLIENT_KEY} | Your [Client Key](https://docs.adyen.com/development-resources/client-side-authentication#get-your-client-key) |
+ | {YOUR_MERCHANT_ACCOUNT} | Your [Merchant Account](https://docs.adyen.com/account/account-structure/#merchant-accounts) |
+
+> [!NOTE]
+> For debugging purposes, this app is set up to directly contact the Adyen API. 
+> Do not reach out to the Adyen API directly from your client and never store the `API key` in your source code.
+
+## Step 3: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the *example/* folder:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 4: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see the app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

example/android/app/build.gradle

@@ -1,8 +1,7 @@
 apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
 
-import com.android.build.OutputFile
-
 /**
  * This is the configuration block to customize your React Native Android app.
  * By default you don't need to apply any configuration, just uncomment the lines you need.
@@ -13,8 +12,8 @@ react {
     // root = file("../")
     //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
     // reactNativeDir = file("../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen
-    // codegenDir = file("../node_modules/react-native-codegen")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+    // codegenDir = file("../node_modules/@react-native/codegen")
     //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
     // cliFile = file("../node_modules/react-native/cli.js")
 
@@ -52,14 +51,6 @@ react {
     // hermesFlags = ["-O", "-output-source-map"]
 }
 
-/**
- * Set this to true to create four separate APKs instead of one,
- * one for each native architecture. This is useful if you don't
- * use App Bundles (https://developer.android.com/guide/app-bundle/)
- * and want to have separate APKs to upload to the Play Store.
- */
-def enableSeparateBuildPerCPUArchitecture = false
-
 /**
  * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
  */
@@ -78,20 +69,10 @@ def enableProguardInReleaseBuilds = false
  */
 def jscFlavor = 'org.webkit:android-jsc-intl:+'
 
-/**
- * Private function to get the list of Native Architectures you want to build.
- * This reads the value from reactNativeArchitectures in your gradle.properties
- * file and works together with the --active-arch-only flag of react-native run-android.
- */
-def reactNativeArchitectures() {
-    def value = project.getProperties().get("reactNativeArchitectures")
-    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
-}
-
 android {
     ndkVersion rootProject.ext.ndkVersion
-
-    compileSdkVersion rootProject.ext.compileSdkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
 
     namespace "com.adyenexample"
     defaultConfig {
@@ -100,16 +81,6 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
-        multiDexEnabled true
-    }
-
-    splits {
-        abi {
-            reset()
-            enable enableSeparateBuildPerCPUArchitecture
-            universalApk false  // If true, also generate a universal APK
-            include (*reactNativeArchitectures())
-        }
     }
     signingConfigs {
         debug {
@@ -131,39 +102,17 @@ android {
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
-
-    // applicationVariants are e.g. debug, release
-    applicationVariants.all { variant ->
-        variant.outputs.each { output ->
-            // For each separate APK per architecture, set a unique version code as described here:
-            // https://developer.android.com/studio/build/configure-apk-splits.html
-            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
-            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
-            def abi = output.getFilter(OutputFile.ABI)
-            if (abi != null) {  // null for the universal-debug, universal-release variants
-                output.versionCodeOverride =
-                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
-            }
-
-        }
-    }
 }
 
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
 
-    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
-    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
-        exclude group:'com.squareup.okhttp3', module:'okhttp'
-    }
-
-    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
     } else {
         implementation jscFlavor
     }
 }
 
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

example/android/app/src/debug/AndroidManifest.xml

@@ -2,12 +2,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
     <application
         android:usesCleartextTraffic="true"
         tools:targetApi="28"
-        tools:ignore="GoogleAppIndexingWarning">
-        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>
+        tools:ignore="GoogleAppIndexingWarning"/>
 </manifest>