Brownfield Integration

places-android/                 # the existing app, unchanged in structure
  app/
    build.gradle.kts
    src/main/java/com/irurueta/places/...
  settings.gradle.kts
  gradle.properties
package.json                    # new: React Native dependencies and scripts
index.js                        # new: the AppRegistry entry point
metro.config.js
tsconfig.json
src/                            # new: the canonical Places source layout
  app/App.tsx
  navigation/RootNavigator.tsx
  features/places/screens/PlacesListScreen.tsx
  ...

// index.js -- the brownfield entry point
import { AppRegistry } from 'react-native';
import { PlacesListRoot } from './src/app/PlacesListRoot';
import { AddPlaceRoot } from './src/app/AddPlaceRoot';

AppRegistry.registerComponent('PlacesList', () => PlacesListRoot);
AppRegistry.registerComponent('AddPlace', () => AddPlaceRoot);

// src/app/PlacesListRoot.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ThemeProvider } from '../theme/ThemeProvider';
import { PlacesListScreen } from '../features/places/screens/PlacesListScreen';
import type { PlaceCategory } from '../features/places/types';

const queryClient = new QueryClient();

export interface PlacesListRootProps {
  userId: string;
  apiBaseUrl: string;
  initialCategory?: PlaceCategory;
}

export function PlacesListRoot({ userId, apiBaseUrl, initialCategory }: PlacesListRootProps) {
  return (
    <SafeAreaProvider>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider>
          <PlacesListScreen userId={userId} apiBaseUrl={apiBaseUrl} initialCategory={initialCategory} />
        </ThemeProvider>
      </QueryClientProvider>
    </SafeAreaProvider>
  );
}

// settings.gradle (or settings.gradle.kts, adjusted for Kotlin syntax)
pluginManagement {
  includeBuild("../node_modules/@react-native/gradle-plugin")
}

plugins {
  id("com.facebook.react.settings")
}

extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
  ex.autolinkLibrariesFromCommand()
}

rootProject.name = "places-android"
include ':app'

// build.gradle (root)
plugins {
  id("com.facebook.react.rootproject")
}

// app/build.gradle
apply plugin: "com.android.application"
apply plugin: "com.facebook.react"

react {
  // Autolink every React Native library found in package.json into this module.
  autolinkLibrariesWithApp()

  // Where the JS project lives, relative to this module.
  root = file("../../")
  entryFile = file("../../index.js")
}

android {
  // ... the host app's existing configuration, untouched ...
  buildFeatures {
    buildConfig = true
  }
}

dependencies {
  implementation("com.facebook.react:react-android")
  implementation("com.facebook.react:hermes-android")
  // ... the host app's existing dependencies ...
}

# gradle.properties
newArchEnabled=true
hermesEnabled=true
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64

<!-- app/src/debug/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.INTERNET" />
  <application android:usesCleartextTraffic="true" tools:targetApi="28">
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"
              android:exported="false" />
  </application>
</manifest>

// app/src/main/java/com/irurueta/places/PlacesApplication.kt
package com.irurueta.places

import android.app.Application
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.soloader.SoLoader
import com.facebook.react.soloader.OpenSourceMergedSoMapping

class PlacesApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
    object : DefaultReactNativeHost(this) {
      override fun getPackages(): List<ReactPackage> =
        // Autolinked packages, plus the app's own HapticTapPackage.
        PackageList(this@PlacesApplication).packages.apply {
          add(HapticTapPackage())
        }

      override fun getJSMainModuleName(): String = "index"

      override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

      override val isNewArchEnabled: Boolean = true
      override val isHermesEnabled: Boolean = true
    }

  override val reactHost: ReactHost
    get() = getDefaultReactHost(applicationContext, reactNativeHost)

  override fun onCreate() {
    super.onCreate()
    // Whatever the host app already did here -- Timber, Firebase, Koin/Hilt -- stays first.
    initExistingAnalytics()
    initExistingCrashReporting()

    // React Native's own initialisation, added at the end.
    SoLoader.init(this, OpenSourceMergedSoMapping)
    DefaultNewArchitectureEntryPoint.load()
  }
}

// app/src/main/java/com/irurueta/places/places/PlacesListFragmentFactory.kt
package com.irurueta.places.places

import android.os.Bundle
import com.facebook.react.ReactFragment

/**
 * Builds the React Native fragment that renders the Places list screen
 * (registered in index.js as "PlacesList").
 */
object PlacesListFragmentFactory {

  fun create(userId: String, apiBaseUrl: String, initialCategory: String?): ReactFragment {
    val launchOptions = Bundle().apply {
      putString("userId", userId)
      putString("apiBaseUrl", apiBaseUrl)
      initialCategory?.let { putString("initialCategory", it) }
    }

    return ReactFragment.Builder()
      .setComponentName("PlacesList")
      .setLaunchOptions(launchOptions)
      .setFabricEnabled(true)
      .build()
  }
}

// app/src/main/java/com/irurueta/places/places/PlacesHostActivity.kt
package com.irurueta.places.places

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler
import com.irurueta.places.R
import com.irurueta.places.session.SessionStore

class PlacesHostActivity : AppCompatActivity(R.layout.activity_places_host),
  DefaultHardwareBackBtnHandler {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // The host app's own toolbar, tabs and drawer are set up as usual.
    setSupportActionBar(findViewById(R.id.toolbar))

    if (savedInstanceState == null) {
      val fragment = PlacesListFragmentFactory.create(
        userId = SessionStore.currentUserId,
        apiBaseUrl = BuildConfig.PLACES_API_URL,
        initialCategory = intent.getStringExtra("category"),
      )
      supportFragmentManager.beginTransaction()
        .replace(R.id.places_react_container, fragment)
        .commit()
    }
  }

  /** Lets React Native's BackHandler decide first; falls back to the activity's own behaviour. */
  override fun invokeDefaultOnBackPressed() {
    super.onBackPressed()
  }
}

# ios/Podfile -- the existing Podfile, with the React Native section added
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '16.0'
prepare_react_native_project!

target 'Places' do
  # The host app's existing pods stay exactly where they are.
  pod 'SomeExistingAnalyticsSDK'

  config = use_native_modules!
  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true,
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  post_install do |installer|
    react_native_post_install(installer, config[:reactNativePath], :mac_catalyst_enabled => false)
  end
end

// ios/Places/ReactNativeBridge.swift
import Foundation
import React
import React_RCTAppDelegate

final class PlacesReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate {

  override func sourceURL(for bridge: RCTBridge) -> URL? {
    bundleURL()
  }

  override func bundleURL() -> URL? {
    #if DEBUG
      // Metro, during development.
      return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
    #else
      // The bundle produced by the Xcode "Bundle React Native code and images" build phase.
      return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
    #endif
  }
}

/// Created once, for the lifetime of the process, and reused by every React root.
final class ReactNativeBridge {

  static let shared = ReactNativeBridge()

  private let delegate: PlacesReactNativeFactoryDelegate
  private let factory: RCTReactNativeFactory

  private init() {
    let delegate = PlacesReactNativeFactoryDelegate()
    delegate.dependencyProvider = RCTAppDependencyProvider()
    self.delegate = delegate
    self.factory = RCTReactNativeFactory(delegate: delegate)
  }

  /// Returns a React Native root view for a component registered with AppRegistry.
  func rootView(moduleName: String, initialProperties: [AnyHashable: Any]?) -> UIView {
    factory.rootViewFactory.view(withModuleName: moduleName, initialProperties: initialProperties)
  }
}

// ios/Places/Places/PlacesListViewController.swift
import UIKit

/// Hosts the React Native "PlacesList" root (src/features/places/screens/PlacesListScreen.tsx)
/// inside the app's existing UINavigationController stack.
final class PlacesListViewController: UIViewController {

  private let userId: String
  private let apiBaseUrl: String
  private let initialCategory: String?

  init(userId: String, apiBaseUrl: String, initialCategory: String? = nil) {
    self.userId = userId
    self.apiBaseUrl = apiBaseUrl
    self.initialCategory = initialCategory
    super.init(nibName: nil, bundle: nil)
  }

  required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }

  override func loadView() {
    var initialProperties: [AnyHashable: Any] = [
      "userId": userId,
      "apiBaseUrl": apiBaseUrl,
    ]
    if let initialCategory {
      initialProperties["initialCategory"] = initialCategory
    }

    view = ReactNativeBridge.shared.rootView(
      moduleName: "PlacesList",
      initialProperties: initialProperties
    )
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // The native navigation bar stays native; React Native only owns the content area.
    title = NSLocalizedString("places.title", comment: "Places")
    navigationItem.rightBarButtonItem = UIBarButtonItem(
      barButtonSystemItem: .add,
      target: self,
      action: #selector(presentAddPlace)
    )
  }

  @objc private func presentAddPlace() {
    let addPlace = AddPlaceViewController()   // the second React root
    present(UINavigationController(rootViewController: addPlace), animated: true)
  }
}

// ios/Places/Places/PlacesListViewController.mm
#import "PlacesListViewController.h"
#import <React/RCTBundleURLProvider.h>
#import <React_RCTAppDelegate/RCTReactNativeFactory.h>
#import <React_RCTAppDelegate/RCTDefaultReactNativeFactoryDelegate.h>
#import <React_RCTAppDelegate/RCTRootViewFactory.h>
#import <ReactAppDependencyProvider/RCTAppDependencyProvider.h>

@implementation PlacesListViewController

- (void)loadView
{
  // The shared factory is created once; see ReactNativeBridge above.
  RCTReactNativeFactory *factory = [PlacesReactNativeBridge sharedFactory];

  self.view = [factory.rootViewFactory viewWithModuleName:@"PlacesList"
                                        initialProperties:@{
                                          @"userId" : self.userId,
                                          @"apiBaseUrl" : self.apiBaseUrl,
                                        }];
}

@end