Platform Specifics: iOS, macOS, visionOS

This page applies to:

Android	iOS	macOS	visionOS	Windows
✗	>=0.0.5	>=v0.0.16	>=v3.3.0	✗

Dependencies

• Xcode
• CocoaPods
• [dev] Homebrew
• [dev] Node LTS
• [dev] Yarn

Clang Sanitizers

For security reasons, Clang sanitizers are enabled by default in the Debug configuration. You can disable them via build settings when building with xcodebuild:

xcodebuild \
	-workspace Example.xcworkspace \
	-scheme Example \
	-configuration Debug \
	CLANG_ADDRESS_SANITIZER=NO \
	CLANG_UNDEFINED_BEHAVIOR_SANITIZER=NO \
	OTHER_CFLAGS='$(inherited) -fstack-protector-strong' \
	OTHER_LDFLAGS='$(inherited) -fstack-protector-strong' \
	build

CocoaPods

Additional dependencies can be added for any of the three targets, app, tests, and ui_tests, by passing a block to use_test_app!:

require_relative '../node_modules/react-native-test-app/test_app.rb'

workspace 'Example.xcworkspace'

use_test_app! do |target|
  target.app do
    pod 'AFNetworking', '~> 2.6'
    pod 'ORStackView', '~> 3.0'
    pod 'SwiftyJSON', '~> 2.3'
  end
  target.tests do
    pod 'Example-Tests', :path => '..'
  end
  target.ui_tests do
    pod 'Example-UITests', :path => '..'
  end
end

Custom Bundle Identifier

You can set your own bundle identifier in the manifest.

 {
   "$schema": "https://raw.githubusercontent.com/microsoft/react-native-test-app/trunk/schema.json",
   "name": "Example",
   "displayName": "Example",
   "components": [...],
+  "ios": {
+    "bundleIdentifier": "com.contoso.Example"
+  },
+  "macos": {
+    "bundleIdentifier": "com.contoso.Example"
+  },
   "resources": {...}
 }

Extra Resources

Since react-native-test-app generates the Xcode project for you, you cannot add resources directly to the project. You can, however, add resources to a Podspec, then add the Podspec to your project.

Example:

# AwesomeResources.podspec
Pod::Spec.new do |s|
  s.name             = 'AwesomeResources'
  s.version          = '0.0.1-dev'
  s.author           = { 'Douglas Quaid' => 'douglas@contoso.com' }
  s.license          = 'MIT'
  s.homepage         = 'https://github.com/microsoft/react-native-test-app#react-native-test-app'
  s.source           = { :git => 'https://github.com/microsoft/react-native-test-app.git' }
  s.summary          = 'Resources for AwesomeApp'
  s.resource_bundles = {
    'AwesomeApp' => [
      'iOS/**/*.{png,storyboard,lproj,xib}',
      'shared/Assets.xcassets'
    ]
  }
end

Add the Podspec to your Podfile:

# Podfile
require_relative '../node_modules/react-native-test-app/test_app.rb'

use_test_app! do |target|
  target.app do
    pod 'AwesomeResources', :path => '.'
  end
end

Hermes

As of v0.3.7, you can enable Hermes by passing :hermes_enabled => true to use_test_app! like below:

 require_relative '../node_modules/react-native-test-app/test_app.rb'

 workspace 'Example.xcworkspace'

-use_test_app!
+use_test_app! :hermes_enabled => true

Then run pod install to update the Xcode project. You should see a few new pods being added, including Hermes.

New Architecture (previously Fabric, TurboModule, or Bridgeless)

You can enable New Architecture if you're on React Native 0.71 or greater. Bridgeless mode can be enabled starting from 0.73.

Set the environment variables when running pod install:

RCT_NEW_ARCH_ENABLED=1 USE_BRIDGELESS=0 pod install

Alternatively, pass the appropriate option to use_test_app! like below:

 require_relative '../node_modules/react-native-test-app/test_app.rb'

 workspace 'Example.xcworkspace'

-use_test_app!
+use_test_app! :fabric_enabled => true, :bridgeless_enabled => false

Then run pod install to update the Xcode project.

Warning

Note that New Architecture is still experimental. You can find more information in the documentation.

Notifications

Notifications are fired for the following events:

Notification	Event
@"ReactTestAppDidInitializeNotification"	AppDelegate.application(_:didFinishLaunchingWithOptions:) is called
@"ReactTestAppDidInitializeReactNativeNotification"	RCTBridge has been successfully instantiated
@"ReactTestAppSceneDidOpenURLNotification"	UISceneDelegate.scene(_:openURLContexts:) is called
@"ReactTestAppWillInitializeReactNativeNotification"	A RCTBridge is about to be instantiated

See also ReactTestApp-DevSupport.h for the string literals that are used.

Supported URL Schemes

• linkedin
• ms-outlook
• ms-sfb
• msauth
• msauthv2
• msauthv3

Additional schemes can be added to Info.plist.

Using View Controllers

On iOS/macOS, you can have native view controllers on the home screen by using their Objective-C names when declaring components (Swift classes can declare Objective-C names with the @objc attribute):

"components": [
  {
    "appKey": "RTAMyViewController",
    "displayName": "App"
  }
]

The view controller must implement an initializer that accepts a ReactNativeHost instance:

@interface MyViewController : NSObject
- (instancetype)initWithHost:(ReactNativeHost *)host;
@end

Or in Swift:

@objc(MyViewController)
class MyViewController: UIViewController {
    @objc init(host: ReactNativeHost) {
        // Initialize
    }
}

Flipper (deprecated as of 3.0)

As of 0.1.13, Flipper is enabled by default if you're on React Native 0.62 or greater. You don't have to make any changes locally. If you need to use a specific version or want to disable it, add use_flipper! to your Podfile just above use_test_app!.

 require_relative '../node_modules/react-native-test-app/test_app.rb'

 workspace 'Example.xcworkspace'

+# To use Flipper 0.33.1:
+use_flipper!({ 'Flipper' => '~> 0.33.1' })

 # To disable Flipper, just pass `false` instead:
 #use_flipper!(false)

 use_test_app!