# if needed
if [[ -f "$PODS_ROOT/../.xcode.env.local" ]]; then
  source "$PODS_ROOT/../.xcode.env.local"
fi
`"$NODE_BINARY" --print "require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'"`
```
Next time, when you build your app for Release, the React Native code will be bundled using Expo CLI and embedded into the app.
Step 3: 
Edit your **Info.plist** file and make sure to add the `UIViewControllerBasedStatusBarAppearance` key with a value of `NO`, this is needed to ensure that the status bar is properly managed by React Native.
<DiffBlock source="/static/diffs/brownfield/ios/info-plist.diff" />
### Integrating with your code
Now, you need to add some native code to start the React Native runtime and tell it to render your React components.
#### Create the ReactViewController
Create a new file called **ReactViewController.swift**, this will be the `ViewController` that loads a React Native view as its `view`.
```swift ReactViewController.swift
import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider
class ReactNativeViewController: UIViewController {
  var reactNativeFactory: RCTReactNativeFactory?
  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
  override func viewDidLoad() {
    super.viewDidLoad()
    reactNativeFactoryDelegate = ReactNativeDelegate()
    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
  }
}
class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
    override func sourceURL(for bridge: RCTBridge) -> URL? {
      self.bundleURL()
    }
    override func bundleURL() -> URL? {
      #if DEBUG
      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: ".expo/.virtual-metro-entry")
      #else
      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
      #endif
    }
}
```
#### Presenting a React Native view in a rootViewController
Finally, you can present your React Native view. To do so, you need a new View Controller that can host a view in which we can load the JS content. You already have the initial `ViewController`, and you can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, let's assume that you have a button that presents React Native modally.
```swift ViewController.swift
import UIKit
class ViewController: UIViewController {
  var reactViewController: ReactViewController?
  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    self.view.backgroundColor = .systemBackground
    let button = UIButton()
    button.setTitle("Open React Native", for: .normal)
    button.setTitleColor(.systemBlue, for: .normal)
    button.setTitleColor(.blue, for: .highlighted)
    button.addAction(UIAction { [weak self] _ in
      guard let self else { return }
      if reactViewController == nil {
       reactViewController = ReactViewController()
      }
      present(reactViewController!, animated: true)
    }, for: .touchUpInside)
    self.view.addSubview(button)
    button.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
    ])
  }
}
```
## Test your integration
You have completed all the basic steps to integrate React Native with your application. Now run the following command in the React Native directory to start the [Metro bundler](https://metrobundler.dev/)
```sh
$ yarn start
```
Metro builds your TypeScript application code into a bundle, serves it through its HTTP server, and shares the bundle from `localhost` on your developer environment to a simulator or device, allowing for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading). Now you can build and run your app as normal. Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server.
## Configuration in app config
The `expo-brownfield` package provides a [config plugin](/config-plugins/introduction/) that can be used to configure the brownfield integration when using [Continuous Native Generation (CNG)](/workflow/continuous-native-generation/). This plugin allows you to customize how your Expo project is packaged and integrated into your existing native app.
<ConfigPluginExample>
```json app.json
{
  "expo": {
    "plugins": [
      [
        "expo-brownfield",
        {
          "ios": {
            "targetName": "MyBrownfieldTarget",
            "bundleIdentifier": "com.example.brownfield"
          },
          "android": {
            "group": "com.example",
            "libraryName": "brownfield",
            "package": "com.example.brownfield",
            "version": "1.0.0"
          }
        }
      ]
    ]
  }
}
```
</ConfigPluginExample>
<ConfigPluginProperties
  properties={[
    {
      name: 'ios.targetName',
      platform: 'ios',
      description:
        'Name of the Xcode target for the brownfield integration. This is used to create a separate target in your Xcode project for the React Native code.',
      default: '"<scheme>brownfield" or "<slug>brownfield"',
    },
    {
      name: 'ios.bundleIdentifier',
      platform: 'ios',
      description:
        'Bundle identifier for the brownfield target. This should be unique and different from your main app bundle identifier.',
      default: '"<ios.bundleIdentifier base>.<targetName>" or "com.example.<targetName>"',
    },
    {
      name: 'android.group',
      platform: 'android',
      description:
        'Maven group ID for the generated Android library. This is used when publishing the library to a Maven repository.',
      default: '"<package without last segment>"',
    },
    {
      name: 'android.libraryName',
      platform: 'android',
      description: 'Name of the generated Android library module.',
      default: '"brownfield"',
    },
    {
      name: 'android.package',
      platform: 'android',
      description: 'Java/Kotlin package name for the generated Android library code.',
      default: '"<android.package>.brownfield" or "com.example.brownfield"',
    },
    {
      name: 'android.version',
      platform: 'android',
      description:
        'Version string for the generated Android library. This is used when publishing to a Maven repository.',
      default: '"1.0.0"',
    },
    {
      name: 'android.publishing',
      platform: 'android',
      description:
        'Publishing configuration for the generated Android library. Supports `localMaven`, `localDirectory`, `remotePublic`, and `remotePrivate` publication types. Each type has different configuration options for specifying where and how the library is published.',
      default: '[{ type: "localMaven" }]',
    },
  ]}
/>


## Configuring lifecycle listeners

Learn about the mechanism that allows the Expo Modules API to hook into the lifecycle of your app.

Some Expo libraries need to handle system events such as deep links, push notifications, and configuration changes by implementing `Activity`/`Application` or `AppDelegate` lifecycle callbacks.
The Expo Modules API provides an easy way to manage such callbacks:
- <PlatformTag platform="android" /> `ApplicationLifecycleDispatcher` and `ReactActivityHandler`
  forward `Application` and `Activity` lifecycle events to registered listeners. Modules can provide
  `ReactActivityLifecycleListener` and `ApplicationLifecycleListener` implementations through a
  `Package` class to register callbacks.
- <PlatformTag platform="ios" /> `ExpoAppDelegate` forwards `AppDelegate` calls to registered
  subscribers. Modules can provide an `ExpoAppDelegateSubscriber` implementation to register
  callbacks.
Using these mechanisms allows modules to register behavior without requiring you to edit native entry points repeatedly.
## Configure your native project
### Android
To integrate `Application` lifecycle listeners on Android, forward the `onCreate()` and `onConfigurationChanged()` calls from your `Application` class to `ApplicationLifecycleDispatcher`:
<DiffBlock source="/static/diffs/brownfield/lifecycle-listeners/application-lifecycle-dispatcher.diff" />
### iOS
To integrate `AppDelegate` subscribers on iOS, forward the relevant calls to `ExpoAppDelegateSubscriberManager` in your existing `AppDelegate` implementation so that subscribers can respond to them:
<DiffBlock source="/static/diffs/brownfield/lifecycle-listeners/expo-app-delegate-subscriber-manager.diff" />
Alternatively, if your `AppDelegate` doesn't already extend another class, you can simplify the setup by inheriting from `ExpoAppDelegate`, which handles the forwarding automatically:
<DiffBlock source="/static/diffs/brownfield/lifecycle-listeners/expo-app-delegate.diff" />
> **Note:** Not all `UIApplicationDelegate` methods that could cause significant side effects are supported. See the Expo source (**ExpoAppDelegate.swift**) for the full list of forwarded methods if you need to rely on a specific delegate.
## Test your integration
To test if the callbacks are working correctly, install a module that relies on them. Install `expo-linking`, which uses lifecycle listeners to handle deep links:
```sh
$ npx expo install expo-linking
```
Add a listener for deep links in your code and observe the console when opening a deep link:
```jsx
import * as Linking from 'expo-linking';
import { useEffect } from 'react';
useEffect(() => {
  const listener = Linking.addEventListener('url', ({ url }) => {
    console.log('Received deep link:', url);
  });
  return listener.remove;
}, []);
```
Run the following command to open a deep link to your app:
```sh
$ npx uri-scheme open com.example.app://somepath/details --android
$ npx uri-scheme open myapp://somepath/details --ios
```