[docs] brownfield guide

docs/pages/brownfield/installing-expo-modules.mdx

@@ -4,49 +4,192 @@ description: Learn how to prepare your existing native project to install and us
 ---
 
 import InstallSection from '~/components/plugins/InstallSection';
-import { DiffBlock } from '~/ui/components/Snippet';
+import { DiffBlock, Terminal } from '~/ui/components/Snippet';
 import { YesIcon, NoIcon } from '~/ui/components/DocIcons';
 import { Collapsible } from '~/ui/components/Collapsible';
-import Step from '~/components/Step';
+import { Step } from '~/ui/components/Step';
 
 ## Prerequisites
 
-You should have a native project with React Native installed and configured to render a root view.
+You should have a native project with React Native installed and configured to render a root view. If not, you can follow [this](https://reactnative.dev/docs/integration-with-existing-apps) guide to get set up.
 
 ## Install Expo modules
 
 First, add the `expo` package to your project. Ensure you are using a version of the `expo` package that is compatible with the React Native version in your project. [Learn more](/versions/latest/#each-expo-sdk-version-depends-on-a-react-native-version).
 
-<Terminal cmdCopy="npm install expo" />
+<Terminal cmd={['npm install expo']} />
 
 ### iOS
 
 <Step label="1">
-  Next thing goes here
+  Add the following to your `Podfile` in the `ios` directory:
+  <DiffBlock
+    raw={`
+diff --git a/ios/Podfile b/ios/Podfile
+index 2d3a979..825a9d4 100644
+--- a/ios/Podfile
++++ b/ios/Podfile
+@@ -1,3 +1,4 @@
++require File.join(File.dirname(\`node --print "require.resolve('expo/package.json')"\`), "scripts/autolinking")
+ require Pod::Executable.execute_command('node', ['-p',
+   'require.resolve(
+   "react-native/scripts/react_native_pods.rb",
+@@ -14,6 +15,7 @@ if linkage != nil
+ end
+ 
+ target '<YourAppTarget>' do
++  use_expo_modules!
+   config = use_native_modules!
+  `}
+  />
 </Step>
 
 <Step label="2">
-  Next thing goes here again
+  Open your `ios` directory in XCode. From the project navigator, select your project and then
+  select your app target under `TARGETS`. In `Build Settings`, using the search bar, search for
+  `ENABLE_USER_SCRIPT_SANDBOXING`. If it is not already, set its value to `No`.
 </Step>
 
 <Step label="3">
-  And more if needed
+  Run `pod install` in the `ios` directory.
+  <Terminal cmd={['cd ios && pod install']} />
+  You will need to do this everytime you add a dependency that uses native code.
+</Step>
+
+<Step label="4">
+  (Optional) Complete the following if you would like to use Expo modules lifecycle listeners.
+  <DiffBlock
+    raw={`diff --git a/ios/<MyAppProject>/AppDelegate.swift b/ios/<MyAppProject>/AppDelegate.swift
+index ff83531..bd8651d 100644
+--- a/ios/<MyAppProject>/AppDelegate.swift
++++ b/ios/<MyAppProject>/AppDelegate.swift
+@@ -1,31 +1,29 @@
+ import UIKit
++import ExpoModulesCore
+ 
+ @main
+-class AppDelegate: UIResponder, UIApplicationDelegate {
++class AppDelegate: ExpoAppDelegate {
+ 
+-  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
++  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+-    return true
++    super.application(application, didFinishLaunchingWithOptions: launchOptions)
+   }
+ `}
+  />
 </Step>
 
 ### Android
 
 <Step label="1">
-  Next thing goes here but for Android this time
+  Add the following to the `gradle.properties` file in the `android` directory:
+  <DiffBlock
+    raw={`diff --git a/android/gradle.properties b/android/gradle.properties
+index 20e2a01..e98ad88 100644
+--- a/android/gradle.properties
++++ b/android/gradle.properties
+@@ -20,4 +20,8 @@ kotlin.code.style=official
++newArchEnabled=false
++
++hermesEnabled=true`}
+  />
+</Step>
+
+<Step label="2">
+  Add the following to the `setting.gradle` file in the `android` directory:
+  <DiffBlock
+    raw={`diff --git a/android/settings.gradle b/android/settings.gradle
+index a26c7c6..dd8802a 100644
+--- a/android/settings.gradle
++++ b/android/settings.gradle
+@@ -1,5 +1,11 @@
++apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
++useExpoModules()
++
+ include ':app'
+ includeBuild("../node_modules/@react-native/gradle-plugin")`}
+  />
+</Step>
+
+<Step label="3">
+  From the `android` directory, run the following command:
+  <Terminal cmd={['./gradlew clean']} />
+  Once this completes, run the following command:
+  <Terminal cmd={['./gradlew assembleDebug']} />
 </Step>
 
+<Step label="4">
+  (Optional) Complete the following steps if you would like to use Expo modules lifecycle listeners
+  in your app:
+<Step label="1">
+If you already have a class that extends the `Application` class you can move to step 3.
+If you do not have it, we need to create one. Add a file called `MainApplication.kt` file to your `android/app/src/main/java/com/<your-app-package>` directory with the following content:
+
+<DiffBlock raw={`diff --git a/android/app/src/main/java/com/<my-app-package>/MainApplication.kt b/android/app/src/main/java/com/<my-app-package>/MainApplication.kt
+new file mode 100644
+index 0000000..2c8525a
+--- /dev/null
++++ b/android/app/src/main/java/com/<my-app-package>/MainApplication.kt
+@@ -0,0 +1,19 @@
++package <my.app.package>
++
++import android.app.Application
++import android.content.res.Configuration
++import com.facebook.soloader.SoLoader
++import expo.modules.ApplicationLifecycleDispatcher
++
++class MainApplication() : Application() {
++    override fun onCreate() {
++        super.onCreate()
++        ApplicationLifecycleDispatcher.onApplicationCreate(this)
++    }
++
++    override fun onConfigurationChanged(newConfig: Configuration) {
++        super.onConfigurationChanged(newConfig)
++        ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
++    }
++}`} />
+</Step>
 <Step label="2">
-  Next thing goes here again
+Register the class in the `AndroidManifest.xml` file.
+<DiffBlock raw={`diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
+index a71b5e7..d6d406e 100644
+--- a/android/app/src/main/AndroidManifest.xml
++++ b/android/app/src/main/AndroidManifest.xml
+@@ -7,6 +7,7 @@
+     <application
+         android:allowBackup="true"
++        android:name=".MainApplication"
+         android:fullBackupContent="@xml/backup_rules"`} />
 </Step>
 
 <Step label="3">
-  And more if needed
+If you have your own class extending `Application`, you can add the following to it:
+
+<DiffBlock raw={`diff --git a/android/app/src/main/java/com/<my-app-package>/MainApplication.kt b/android/app/src/main/java/com/<my-app-package>/MainApplication.kt
+new file mode 100644
+index 0000000..2c8525a
+--- /dev/null
++++ b/android/app/src/main/java/com/<my-app-package>/MainApplication.kt
+@@ -0,0 +1,19 @@
+class MainApplication() : Application() {
+    override fun onCreate() {
+        super.onCreate()
++       ApplicationLifecycleDispatcher.onApplicationCreate(this)
+    }
++
++   override fun onConfigurationChanged(newConfig: Configuration) {
++       super.onConfigurationChanged(newConfig)
++       ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
++   }
+
+}`} />
+Override `onConfigurationChanged` if you have not done so already.
+
+</Step>
 </Step>
 
 ## Limitations
 
-Here we list limitations.
+Here we list limitations.