Draft: Upgrade example to React Native 0.75

.gitignore

@@ -56,3 +56,11 @@ buck-out/
 ## Package
 .env
 lib
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -1,13 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
- - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
- spec: "@yarnpkg/plugin-workspace-tools"
- - path: .yarn/plugins/@yarnpkg/plugin-constraints.cjs
- spec: "@yarnpkg/plugin-constraints"
- - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
- spec: "@yarnpkg/plugin-typescript"
- - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
- spec: "@yarnpkg/plugin-interactive-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-berry.cjs
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

apps/example/.eslintrc.js

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

apps/example/.gitignore

@@ -20,7 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-ios/.xcode.env.local
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -56,8 +56,11 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher
-.metro-health-check*
+.metro-health-check*
+
+# testing
+/coverage

apps/example/Gemfile

@@ -1,6 +1,8 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '>= 2.6.10'
+ruby ">= 2.6.10"
 
-gem 'cocoapods', '>= 1.11.3'
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'

apps/example/Gemfile.lock

@@ -95,7 +95,8 @@ PLATFORMS
  ruby
 
 DEPENDENCIES
- cocoapods (>= 1.11.3)
+ activesupport (>= 6.1.7.5, != 7.1.0)
+ cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
 
 RUBY VERSION
  ruby 2.6.10p210

apps/example/README.md

@@ -13,41 +13,42 @@ The Project name in this example is `Example`, which you should replace with you
 
 Create a new `AppDelegate.swift` file, once prompted, click *Create bridging headers for Swift*.
 
-Paste the following code to the `AppDelegate.swift`, it includes Flipper code.
+Paste the following code to the `AppDelegate.swift`.
 
 ```swift
 // ios/AppDelegate.swift
 import UIKit
 import CarPlay
 import React
-#if DEBUG
-#if FB_SONARKIT_ENABLED
-import FlipperKit
-#endif
-#endif
 
 @main
 class AppDelegate: UIResponder, UIApplicationDelegate, RCTBridgeDelegate {
 
- var window: UIWindow?
- var bridge: RCTBridge?;
- var rootView: RCTRootView?;
+ var rootView: UIView?
+
+ override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
+ moduleName = "RNCarPlayScene"
+ initialProps = [:]
 
- static var shared: AppDelegate { return UIApplication.shared.delegate as! AppDelegate }
+ let app = super.application(application, didFinishLaunchingWithOptions: launchOptions)
+ self.rootView = self.createRootView(
+ with: self.bridge!,
+ moduleName: self.moduleName!,
+ initProps: self.initialProps!
+ )
+ return app
+ }
 
- func sourceURL(for bridge: RCTBridge!) -> URL! {
+ override func bundleURL() -> URL? {
  #if DEBUG
- return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index");
+ return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
  #else
  return Bundle.main.url(forResource:"main", withExtension:"jsbundle")
  #endif
  }
 
- func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
- initializeFlipper(with: application)
- self.bridge = RCTBridge.init(delegate: self, launchOptions: launchOptions)
- self.rootView = RCTRootView.init(bridge: self.bridge!, moduleName: "Example", initialProperties: nil)
- return true
+ override func sourceURL(for bridge: RCTBridge) -> URL? {
+ return bundleURL()
  }
 
  func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
@@ -64,47 +65,22 @@ class AppDelegate: UIResponder, UIApplicationDelegate, RCTBridgeDelegate {
 
  func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
  }
-
- private func initializeFlipper(with application: UIApplication) {
- #if DEBUG
- #if FB_SONARKIT_ENABLED
- let client = FlipperClient.shared()
- let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
- client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
- client?.add(FKUserDefaultsPlugin(suiteName: nil))
- client?.add(FlipperKitReactPlugin())
- client?.add(FlipperKitNetworkPlugin(networkAdapter: SKIOSNetworkAdapter()))
- client?.start()
- #endif
- #endif
- }
 }
 ```
 
 Paste the following to your bridging header file `Example-Bridging-Header.h`:
 
 ```objc
 // ios/Example-Bridging-Header.h
+#import <RCTAppDelegate.h>
 #import "RNCarPlay.h"
-
-#ifdef DEBUG
-#ifdef FB_SONARKIT_ENABLED
-#import <FlipperKit/FlipperClient.h>
-#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
-#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
-#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
-#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
-#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
-#endif
-#endif
 ```
 
-### 3. Add flags for Swift compiler in debug mode
+### 3. Add flag for Swift compiler in debug mode
 
-Go to XCode project, hit `Build Settings`, search for `Swift Compiler - Custom Flags` and then under `Active Compilation Conditions`, add the following flags to `Debug` only:
+Go to XCode project, hit `Build Settings`, search for `Swift Compiler - Custom Flags` and then under `Active Compilation Conditions`, add the following flag to `Debug` only:
 
  - DEBUG
- - FB_SONARKIT_ENABLED
 
 ### 4. Create Phone Scene
 
@@ -119,11 +95,16 @@ import SwiftUI
 class PhoneSceneDelegate: UIResponder, UIWindowSceneDelegate {
  var window: UIWindow?
  func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
+
+ if session.role != .windowApplication {
+ return
+ }
+
  guard let appDelegate = (UIApplication.shared.delegate as? AppDelegate) else { return }
  guard let windowScene = (scene as? UIWindowScene) else { return }
 
  let rootViewController = UIViewController()
- rootViewController.view = appDelegate.rootView;
+ rootViewController.view = appDelegate.rootView
 
  let window = UIWindow(windowScene: windowScene)
  window.rootViewController = rootViewController
@@ -146,14 +127,15 @@ import CarPlay
 class CarSceneDelegate: UIResponder, CPTemplateApplicationSceneDelegate {
  func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene,
  didConnect interfaceController: CPInterfaceController) {
- RNCarPlay.connect(with: interfaceController, window: templateApplicationScene.carWindow);
+ RNCarPlay.connect(with: interfaceController, window: templateApplicationScene.carWindow)
  }
 
  func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene, didDisconnectInterfaceController interfaceController: CPInterfaceController) {
  RNCarPlay.disconnect()
  }
 }
 
+
 ```
 
 ### 6. Update the manifest in Info.plist

apps/example/android/app/build.gradle

@@ -1,22 +1,22 @@
+
 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.
  */
 react {
  /* Folders */
- // The root of your project, i.e. where "package.json" lives. Default is '..'
- // 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 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")
+ // The root of your project, i.e. where "package.json" lives. Default is '../..'
+ // 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 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")
 
  /* Variants */
  // The list of variants to that are debuggable. For those we're going to
@@ -50,15 +50,10 @@ react {
  //
  // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
  // 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
+ /* Autolinking */
+ autolinkLibrariesWithApp()
+}
 
 /**
  * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
@@ -78,20 +73,10 @@ def enableProguardInReleaseBuilds = false
  */
 def jscFlavor = 'org.webkit:android-jsc:+'
 
-/**
- * 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.rncarplayscene"
  defaultConfig {
@@ -101,15 +86,6 @@ android {
  versionCode 1
  versionName "1.0"
  }
-
- splits {
- abi {
- reset()
- enable enableSeparateBuildPerCPUArchitecture
- universalApk false // If true, also generate a universal APK
- include (*reactNativeArchitectures())
- }
- }
  signingConfigs {
  debug {
  storeFile file('debug.keystore')
@@ -130,41 +106,15 @@ 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")
 
- implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
-
- 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)

apps/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" android:exported="false" />
- </application>
+ tools:ignore="GoogleAppIndexingWarning"/>
 </manifest>