Posted   by 

React Native Visual Studio



This extension targets a platform (React Native) that is rapidly evolving and therefore is currently in early preview. It has been designed for use with React Native 0.19.0 and above. Earlier versions of React Native are missing out-of-box support for selecting non-global versions of Node.js for iOS and may not be patched properly to prevent the build from hanging for iOS.

Dynamic & responsive. Users nowadays expect a first-class experience across a range of screen sizes from 4 to 40 inches. React Studio has an advanced visual layout engine that lets you create smart keylines, use relative sizes together with device-independent offsets, and position elements on screen relative to screen edges, keylines, or preceding elements. Visual Studio dev tools & services make app development easy for any platform & language. Try our Mac & Windows code editor, IDE, or Azure DevOps for free.

Install React Native Tools Extension (provided by Microsoft) to VS Code. This is a nice add on to VS Code's capabilities for React Native. Then go to Debug option from left menu and click on Add Configuration. If it initially says No Configuration then you can click on Add Configuration and then choose React Native option.

React Native is an exciting new technology that allows you to bring awesome native app experiences to Android and iOS using a consistent developer experience based on JavaScript and React. Visual Studio Team Services (formerly Visual Studio Online) and Team Foundation Services (TFS) 2015 can be used to building and test React Native apps in a Continuous Integration (CI) environment thanks to a new cross-platform agent that supports OSX and Linux. When you are developing your React Native app you'll be able to take advantage of the React Native packager but in a CI environment or for actual app deployments you'll want to create an offline 'bundle' that present a few challenges that need to be resolved.

This extension provides a 'React Native Prepare' task to simplify setup and deal with two specific problems:

  • In this video I walk through the various packages I have installed in my text editor (Visual Studio Code) to enable me to build React Native apps.
  • Upon saving the above package.json file, Visual Studio will automatically download the dependencies into a local nodemodules directory, via npm: I expect that the react, react-dom, webpack, and babel-. dependencies are already familiar to you, as they’re commonly used with React.
  1. Node.js version headaches - The task will fetch and configure the build to use a compatible version of Node.js if not found globally installed.
  2. Preventing the 'Packager' from starting up as a server and hanging and/or failing your native Xcode build for iOS.

Combined with a 'Bundle' task it should provide you with all the tools you need to get your React Native App up and running in a CI environment.

Quick Start

  1. After installing the extension, upload your project to VSTS, TFS, or GitHub.

  2. Go to your VSTS or TFS project, click on the Build tab, and create a new build definition (the '+' icon). You can use the Empty template.

  3. Click Add build step... and add the following tasks to your build definition:

    1. Add npm from the Package category. Specify install as the Command, --no-optional under Advanced > Arguments to speed up the build, and set Advanced > Working Directory to the location of your package.json file if not in the repository root. You may need to add --force if you encounter EPERM issues due to a npm bug.

    2. Add React Native Prepare from the Build category and select the appropriate platform. Set Working Directory to the location of your package.json file and update the Xcode Project(s) or react.gradle Path option if your React Native project structure is not in the repisotry root.

    3. Add Xcode Build for iOS or Gradle for Android from the Build category and configure your native build. Check out the tool tips for handy inline documentation along with the Xcode and secure app signing tutorials for more details.

  4. [Optional] While typically not required for React Native 0.19.0 and up, you can also add the React Native Bundle task from the Build category to create your offline bundle if you've modified the default generated projects.

In addition, be sure you are running version 0.3.10 or higher of the cross-platform agent and the latest Windows agent as these are required for VS Team Services extension to function. The VSTS hosted agent and MacinCloud agents will already be on this version.

Windows Agent Notes:

  • curl also needs to be in the path on Windows if Node.js < 4.0.0 is globally installed. You can get curl by installing the Git Command Line Tools.

##Additional Details###React Native Prepare TaskThe React Native Prepare task has two primary functions. Note that if you are running into problems have deviated from the default project provided by React Native init using 0.19.0 or above you may need to make some tweaks. The task is designed to do the following:

  1. Acquire and setup the appropriate version of Node.js for use in the build. This is particularly useful in environments you may not control.
  2. Disable the React Native Packager from starting as a server when building iOS as this provides no value in a CI workflow and will hang the agent and can result in port conflict issues failing the build.

Under the hood, here is what is happening:

  1. Android: It modifies react.gradle to call node node_modules/react-native/local-cli/cli.js using the correct version of Node.js instead of just blindly calling 'react-native bundle'. This solves both the node version problem and avoids having to have react-native-cli installed globally.
  2. iOS: For iOS, two changes were required:
    1. It modifies the Bundle React Native code and images Build Phase in your Xcode project ensure export NODE_BINARY is set to the correct path for Node.js before calling ../node_modules/react-native/packager/react-native-xcode.sh. If the export is missing it is added.
    2. It disables the startup of the React Native Packager as a local server in the Build Phases of node_modules/react-native/React.xcodeproj by modifying the embedded shell script to exit as this provides no value in a CI workflow and will hang the agent.

###React Native Bundle TaskThis task is a thin UI layer on top of the standard React Native bundle command from the React Native CLI. It is provided as a convenience mechanism and is not required when using stock projects for 0.19.0 and up as the provided Gradle build and Xcode projects trigger bundling when doing a release build by default.

###FAQQ: Is there anything I need to do when upgrading a project to 0.19.0+ or up to ensure the project builds?

A: If your project has a different folder setup than a typical React Native project, you may need to update the Working Directory and the Xcode Project(s) or react.gradle Path options in the React Native Prepare task. The Working Directory should be pointed to where your package.json is present and you will be running npm install. Next, check to see if your iOS project has a 'Bundle React Native code and images' Build Phase that is calling ../node_modules/react-native/packager/react-native-xcode.sh. If not, you likely also need to use the React Native Bundle task to generate your offline bundle.

Q: After Feb 14th, I am seeing the following error when referencing P12 file in the Xcode Build task: 'Command failed: /bin/sh -c /usr/bin/security find-identity -v -p codesigning ...'

A: This is due to the Apple's WWDR certificate expiring on this date and an old certificate still being present on the system. To resolve, follow the steps outlined by Apple here: https://developer.apple.com/support/certificates/expiration/ In particular, be sure to see 'What should I do if Xcode doesn’t recognize my distribution certificate?' and be sure to remove any expired certificates as this can cause the error to occur even after you've installed updated certificates. This also affects development certs despite the title.

Q: I am using my own Mac for a cross-platform agent and have it configured to run as a daemon. Signing is failing. How can I resolve this problem?

A: Configure the agent as a launch agent (./svc.sh install agent) or run it as an interactive process (node agent/vsoagent.js) to ensure Xcode is able to access the appropriate keychains. See the secure app signing tutorial for additional details. You could also opt to use MacinCloud instead.

Installation for TFS 2015 Update 1 or Earlier

See the source code repository for instructions on installing these tasks on TFS 2015 Update 1 or earlier.

Contact Us

Studio-->

The App Center SDK uses a modular architecture so you can use any or all of the services.

Native

Let's get started with setting up App Center React Native SDK in your app to use App Center Analytics and App Center Crashes.

1. Prerequisites

Before you begin, make sure that the following prerequisites are met:

  • You're using a React Native project that runs React Native 0.34 or later.
  • You're targeting devices that are running on Android Version 5.0/API level 21 or later, or iOS version 9.0 or later.
  • You're not using any other library that provides Crash Reporting functionality on iOS.
  • For iOS, the default way to use the SDK requires CocoaPods. (If you haven't installed CocoaPods, follow the CocoaPods Getting Started to do so). Nonetheless, it's possible to link the SDK manually.

2. Create your app in the App Center Portal to obtain the App Secret

If you've already created your app in the App Center portal, you can skip this step.

  1. Head over to appcenter.ms.
  2. Sign up or log in and hit the blue button on the top right corner of the portal that says Add new and select Add new app from the dropdown menu.
  3. Enter a name and an optional description for your app.
  4. Select the appropriate OS (Android or iOS) and select React Native as the platform.
  5. Hit the button at the bottom right that says Add new app.

Once you've created an app, you can obtain its App Secret on the Settings page on the App Center Portal. At the top right hand corner of the Settings page, click on the triple vertical dots and select Copy app secret to get your App Secret.

3. Add the App Center SDK modules

The default integration of the SDK uses CocoaPods for iOS. If you're not using CocoaPods in your app, you need to integrate the React Native SDK manually for your iOS app.

Open a Terminal and navigate to the root of your React Native project, then enter the following line to add App Center Analytics and Crashes to the app:

In case you prefer yarn over npm, use the following command to install App Center:

The App Center SDK uses a modular approach, where you just add the modules for App Center services that you want to use. appcenter-analytics and appcenter-crashes make sense to add to almost every app, as they provide value with no additional setup required. appcenter provides general purpose App Center APIs, useful for multiple services.

3.1 Integrate the SDK automatically for React Native 0.60

3.1.1 Integrate React Native iOS

  1. Run pod install --repo-update from iOS directory to install CocoaPods dependencies.

  2. Create a new file with the name AppCenter-Config.plist with the following content and replace {APP_SECRET_VALUE} with your app secret value. Don't forget to add this file to the Xcode project (right-click the app in Xcode and click Add files to ...).

  3. Modify the app's AppDelegate.m file to include code for starting SDK:

    • Add these lines to import section above the #if DEBUG or #ifdef FB_SONARKIT_ENABLED declaration (if present):
    • Add these lines to the didFinishLaunchingWithOptions method

React Native Visual Studio 2019

3.1.2 Integrate React Native Android

  1. Create a new file with the name appcenter-config.json in android/app/src/main/assets/ with the following content and replace {APP_SECRET_VALUE} with your app secret value.

Note: If the folder named assets doesn't exist, it should be created under 'project_root/android/app/src/main/assets'

  1. Modify the app's res/values/strings.xml to include the following lines:

3.2 Integrate the SDK automatically for React Native lower than 0.60

Note

If you have your React modules linked using relative path inside your Podfile but not referenced in the project, the linking script will fail because it links App Center using static pod versions. You either must follow the steps from the React Native troubleshooting section if you've already run the linking script, or link it yourself

  1. Link the plugins to the React Native app by using the react-native link command.

    For iOS, it will try to download the App Center SDK for iOS and macOS from CocoaPods, if you see an error like:

    Run the following command:

    And then retry running react-native link.

    Note

    App Center SDK doesn't set up mocks automatically for App Center modules during the linking process. If you're using Jest test framework in your application and experience errors caused by the App Center SDK while running tests with Jest, add the following to the jest section of package.json file (include only modules in use):

    Note

    Whether processing of crashes is automatic or triggered by Javascript methods, crashes are always processed after the restart of the application. Crashes can't be processed at the time the application crashes.

  2. Edit the project's android/app/src/main/assets/appcenter-config.json and replace the YOUR_APP_SECRET placeholder value with your App Center project's application secret.

  3. Edit the project's ios/{YourAppName}/AppCenter-Config.plist file, and replace the YOUR_APP_SECRET placeholder value with your App Center project's application secret. If AppCenter-Config.plist already exists but not part of your Xcode project, you must add it to the Xcode project manually (right-click the app in XCode and click Add files to ...).

3.3 [iOS only] Integrate the SDK manually for React Native without react-native link or CocoaPods

Do this integration, if you don't want to use CocoaPods.We strongly recommend integrating the SDK via CocoaPods as described above. Nonetheless, it's also possible to integrate the iOS native SDK manually.

Note

The latest App Center React Native SDK doesn't necessarily depend on the latest App Center iOS SDK, because the iOS SDK is updated and released before the React Native one.

Code

The consequence is that you must know which version of the iOS SDK the React Native SDK depends on.

  1. Download the App Center SDK for React Native frameworks provided as a zip file and unzip it.

  2. You'll see a folder named AppCenterReactNativeShared which contains a single framework for the required React Native iOS bridge.

  3. Download the corresponding App Center SDK for iOS frameworks provided as a zip file and unzip it.

  4. You'll see a folder called AppCenter-SDK-Apple/iOS that contains different frameworks for each App Center service. The framework called AppCenter is required in the project as it contains code that's shared between the different modules.

  5. [Optional] Create a subdirectory for 3rd-party libraries.

    • As a best practice, 3rd-party libraries usually reside inside a subdirectory (it's often called Vendor), so if you don't have your project organized with a subdirectory for libraries, create a Vendor subdirectory now (under the ios directory of your project).
    • Create a group called Vendor inside your Xcode project to mimic your file structure on disk.

  6. Open Finder and copy the previously unzipped AppCenter-SDK-Apple/iOS and AppCenterReactNativeShared folders into your project's folder at the location where you want it to reside.

  7. Add the SDK frameworks to the project in Xcode:

    • Make sure the Project Navigator is visible (⌘+1).
    • Drag and drop the AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework and AppCenterReactNativeShared.framework files from the Finder (in the location from the previous step) into Xcode's Project Navigator. The AppCenter.framework and AppCenterReactNativeShared.framework files are required to start the SDK, make sure they're added to your project, otherwise the other modules won't work and your app won't compile.
    • A dialog will appear, make sure your app target is checked, then click Finish.

  8. Link AppCenter React Native plugins projects to your app's project:

    • Make sure the Project Navigator is visible (⌘+1).

    • For each AppCenter React Native plugin navigate to the folder containing source code. Paths respectively will be

      • /node_modules/appcenter/ios
      • /node_modules/appcenter-analytics/ios
      • /node_modules/appcenter-crashes/ios
      • /node_modules/appcenter-push/ios

    • Drag and drop .xcodeproj files from the Finder into Xcode's Project Navigator. Typically under Libraries group.

  9. Link libraries for AppCenter React Native plugins.Open your project settings and under General tab in the Linked Frameworks and Libraries section add new items referencing target libraries added on the previous step:

    • libAppCenterReactNative.a
    • libAppCenterReactNativeAnalytics.a
    • libAppCenterReactNativeCrashes.a
    • libAppCenterReactNativePush.a

  10. Modify Header Search Paths to find headers from the AppCenter React Native plugins projects.Open your project settings and under Build Settings tab in the Header Search Paths section add new locations for header files:

  • $(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
  • $(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
  • $(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes
  • $(SRCROOT)/../node_modules/appcenter-push/ios/AppCenterReactNativePush

  1. Modify the app's AppDelegate.m file to include code for starting SDK:

    • Add these lines to import section above the #if DEBUG or #ifdef FB_SONARKIT_ENABLED declaration (if present):
    • Add these lines to the didFinishLaunchingWithOptions method

  2. Create new file with the name AppCenter-Config.plist with the following content and replace {APP_SECRET_VALUE} with your app secret value. Don't forget to add this file to the XCode project (right-click the app in XCode and click Add files to ...).

Note

The next two steps are only for the apps that use React Native 0.60 and above.

  1. Disable autolinking for React Native 0.60 and above:

    • Inside the node_modules folder in each App Center package open react-native.config.js and set dependency.platforms.ios to null:

  2. Modify Header Search Paths to find React Native headers from the App Center React Native plugins projects:

    • Make sure the Project Navigator is visible (⌘+1).
    • For each AppCenter React Native plugins project that you've added to the Libraries group in step 8:
      • Select the project and under Build Settings tab in the Header Search Paths section add new locations for header files with a recursive option: ${SRCROOT}/../../../ios/Pods/Headers

3.4 [Android only] Integrate the SDK manually for React Native lower than 0.60 without react-native link

Integration steps without the react-native link command.

  1. Open android/settings.gradle file and insert the following lines. Include the dependencies that you want in your project. Each SDK module needs to be added as a separate dependency in this section. If you want to use App Center Analytics and Crashes, add the following lines:

Note

Due to termination of jCenter support all our assemblies were moved to the Maven Central repository. Please follow this guide about migration from jCenter to Maven Central.

  1. Open the project's app level build.gradle file (android/app/build.gradle) and add the following lines into dependencies section:

  2. Modify the app's MainApplication.java file to include code for starting SDK:

    • Add these lines to the import section
    • Add AppCenter packages to the List<ReactPackage> getPackages() method

  3. Open strings.xml file (android/app/src/main/res/values) and add the following lines inside <resources></resources> tags:

  4. Create a new file with the name appcenter-config.json in android/app/src/main/assets/ with the following content and replace APP_SECRET_VALUE with your app secret value.

3.5 If you use auto-backup to avoid getting incorrect information about device, follow the next steps:

Note

Apps that target Android 6.0 (API level 23) or higher have Auto Backup automatically enabled.

Note

If you already have a custom file with backup rule, switch to the third step.

a. Create appcenter_backup_rule.xml file in the android/app/src/main/res/xml folder.

b. Open the project's AndroidManifest.xml file. Add the android:fullBackupContent attribute to the <application> element. It should point to the appcenter_backup_rule.xml resource file.

c. Add the following backup rules to the appcenter_backup_rule.xml file:

4. Start the SDK

React Native Visual Studio

Now you can build and launch your application either from command line or Xcode/Android Studio.

4.1 Build and run your application from command line

You may build and launch your iOS application by the following command:

Tip

React Native Visual Studio Code

You can launch it on an iOS simulator or iOS device by specifying the iOS device name in react-native run-ios --device 'myDeviceName'.

You may build and launch your Android application by the following command:

Tip

React Native Visual Studio Code

You can launch it on an android emulator or android device by specifying the device id in react-native run-android --deviceId 'myDeviceId' (deviceId from adb devices command).

4.2 Build and run your application from Xcode or Android Studio

For iOS, open your project's ios/{appname}.xcworkspace or ios/{appname}.xcodeproj file in Xcode and build from there.

Note

If you linked App Center automatically via react-native link (as in step 3.1), you should open the project's ios/{appname}.xcworkspace file in Xcode. Because App Center CocoaPods dependencies only works with xcworkspace not xcodeproj, and the ios/{appname}.xcodeproj file won't have App Center CocoaPods dependencies linked.

React native visual studio code

For Android, import your android project in Android Studio and build from there.

You're all set to visualize Analytics and Crashes data on the portal that the SDK collects automatically. There's no additional setup required. Look at Analytics and Crashes section for APIs guides and walkthroughs to learn what App Center can do.