misc(sample): Add react-native-macos to bare RN sample (#3785)

Author: krystofwoldrich

.github/workflows/sample-application.yml

@@ -40,20 +40,26 @@ jobs:
       matrix:
         rn-architecture: ['legacy', 'new']
         ios-use-frameworks: ['no-frameworks', 'dynamic-frameworks']
-        platform: ['android', 'ios']
+        platform: ['android', 'ios', 'macos']
         build-type: ['dev', 'production']
         include:
           - platform: ios
             runs-on: macos-14 # uses m1 https://github.blog/changelog/2024-01-30-github-actions-macos-14-sonoma-is-now-available/
             runtime: 'latest'
             device: 'iPhone 14'
+          - platform: macos
+            runs-on: macos-14
           - platform: android
             runs-on: ubuntu-latest
         exclude:
           - platform: 'android'
             ios-use-frameworks: 'dynamic-frameworks'
           - rn-architecture: 'new'
             ios-use-frameworks: 'dynamic-frameworks'
+          - rn-architecture: 'new'
+            platform: 'macos'
+          - ios-use-frameworks: 'dynamic-frameworks'
+            platform: 'macos'
     steps:
       - uses: actions/checkout@v4
 
@@ -66,7 +72,7 @@ jobs:
             samples/react-native/yarn.lock
 
       - uses: ruby/setup-ruby@v1
-        if: ${{ matrix.platform == 'ios' }}
+        if: ${{ matrix.platform == 'ios' || matrix.platform == 'macos' }}
         with:
           working-directory: samples/react-native
           ruby-version: '3.3.0' # based on what is used in the sample
@@ -96,9 +102,12 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Install App Pods
-        if: ${{ matrix.platform == 'ios' }}
-        working-directory: samples/react-native/ios
+        if: ${{ matrix.platform == 'ios' || matrix.platform == 'macos' }}
+        working-directory: samples/react-native
         run: |
+          [[ "${{ matrix.platform }}" == "ios" ]] && cd ios
+          [[ "${{ matrix.platform }}" == "macos" ]] && cd macos
+
           [[ "${{ matrix.build-type }}" == "production" ]] && ENABLE_PROD=1 || ENABLE_PROD=0
           [[ "${{ matrix.rn-architecture }}" == "new" ]] && ENABLE_NEW_ARCH=1 || ENABLE_NEW_ARCH=0
           [[ "${{ matrix.ios-use-frameworks }}" == "dynamic-frameworks" ]] && export USE_FRAMEWORKS=dynamic && export NO_FLIPPER=1
@@ -138,9 +147,28 @@ jobs:
             | tee xcodebuild.log \
             | xcbeautify --quieter --is-ci --disable-colored-output
 
+      - name: Build macOS App
+        if: ${{ matrix.platform == 'macos' }}
+        working-directory: samples/react-native/macos
+        run: |
+          [[ "${{ matrix.build-type }}" == "production" ]] && CONFIG='Release' || CONFIG='Debug'
+          echo "Building $CONFIG"
+          mkdir -p "DerivedData"
+          derivedData="$(cd "DerivedData" ; pwd -P)"
+          set -o pipefail && xcodebuild \
+            -workspace sentry-react-native-sample.xcworkspace \
+            -configuration "$CONFIG" \
+            -scheme sentry-react-native-sample-macOS \
+            -destination 'platform=macOS' \
+            ONLY_ACTIVE_ARCH=yes \
+            -derivedDataPath "$derivedData" \
+            build \
+            | tee xcodebuild.log \
+            | xcbeautify --quieter --is-ci --disable-colored-output
+
       - name: Upload logs
         if: ${{ always() }}
         uses: actions/upload-artifact@v4
         with:
           name: build-sample-${{ matrix.rn-architecture }}-${{ matrix.platform }}-${{ matrix.build-type }}-${{ matrix.ios-use-frameworks}}-logs
-          path: samples/react-native/ios/*.log
+          path: samples/react-native/${{ matrix.platform }}/*.log

.vscode/launch.json

@@ -6,7 +6,7 @@
           "type": "node",
           "request": "launch",
           "runtimeArgs": ["--inspect-brk", "${workspaceRoot}/node_modules/jest/bin/jest.js"],
-          "args": ["--runInBand", "-t", ""],
+          "args": ["--runInBand", "-t", "gesture cancel previous interaction transaction"],
           "cwd": "${workspaceRoot}",
           "console": "integratedTerminal",
           "internalConsoleOptions": "neverOpen",

samples/react-native/.gitignore

@@ -20,7 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-ios/.xcode.env.local
+*.xcode.env.local
 
 # Android/IntelliJ
 #

samples/react-native/macos/.gitignore

@@ -0,0 +1,2 @@
+# CocoaPods
+Pods/

samples/react-native/macos/.xcode.env

@@ -0,0 +1 @@
+export NODE_BINARY=$(command -v node)

samples/react-native/macos/Podfile

@@ -0,0 +1,26 @@
+require_relative '../node_modules/react-native-macos/scripts/react_native_pods'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+
+prepare_react_native_project!
+
+target 'sentry-react-native-sample-macOS' do
+  platform :macos, '10.15'
+  use_native_modules!
+
+  # Flags change depending on the env values.
+  flags = get_default_flags()
+
+  use_react_native!(
+    :path => '../node_modules/react-native-macos',
+    :hermes_enabled => false,
+    :fabric_enabled => ENV['RCT_NEW_ARCH_ENABLED'] == '1',
+    # Flipper is not compatible w/ macOS
+    :flipper_configuration => FlipperConfiguration.disabled,
+    # An absolute path to your application root.
+    :app_path => "#{Pod::Config.instance.installation_root}/.."
+  )
+
+  post_install do |installer|
+    react_native_post_install(installer)
+  end
+end

samples/react-native/macos/sentry-react-native-sample-macOS/AppDelegate.h

@@ -0,0 +1,6 @@
+#import <RCTAppDelegate.h>
+#import <Cocoa/Cocoa.h>
+
+@interface AppDelegate : RCTAppDelegate
+
+@end

samples/react-native/macos/sentry-react-native-sample-macOS/AppDelegate.mm

@@ -0,0 +1,40 @@
+#import "AppDelegate.h"
+
+#import <React/RCTBundleURLProvider.h>
+
+@implementation AppDelegate
+
+- (void)applicationDidFinishLaunching:(NSNotification *)notification
+{
+  self.moduleName = @"sentry-react-native-sample";
+  // You can add your custom initial props in the dictionary below.
+  // They will be passed down to the ViewController used by React Native.
+  self.initialProps = @{};
+
+  return [super applicationDidFinishLaunching:notification];
+}
+
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+#if DEBUG
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
+#else
+  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+}
+
+/// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
+///
+/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
+/// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
+/// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
+- (BOOL)concurrentRootEnabled
+{
+#ifdef RN_FABRIC_ENABLED
+  return true;
+#else
+  return false;
+#endif
+}
+
+@end