Appcenter-sdk-react-native: RN v0.60 autolinking compatibility

[thymikee]

Description

Hi! I'm one of the maintainers of https://github.com/react-native-community/cli and one of the biggest features we ship in 0.60 is autolinking.

tl;dr: autolinking makes installing native packages as easy as running yarn add or npm install. It works by discovering native modules through CLI, passing them to native build tools scripts (CocoaPods and Gradle) and constructing the native imports/definitions automatically during build/installation time. The automatic handling comes with some constraints and assumptions, that we try to make true for most of the packages.

Details

We'd really like Appcenter to work with it, however there are some blockers:

1. On Android, the AppCenterReactNativePackage takes MainApplication.this argument, which is now not available. Is it possible for you to restructure the app entry to have no arguments passed through constructor? (on a side note: passing params in constructor may also cause problems in future TurboModules).
2. postlink/prelink hooks are not compatible with autolinking approach and we're not providing support for it. If there are any extra steps expected from users (e.g. creating config files), they need to be documented and applied manually.

It's also possible to use legacy react-native link and to disable autolinking (it's turned on by default in 0.60) through react-native.config.js on the user side:

module.exports = {
  dependencies: {
    appcenter: {
      platforms: {
        android: null,
      },
    },
  },
};

Please let me know your thoughts and possible paths forward. Thanks!

[dhei]

Hello @thymikee,

First of all, I want to thank you and your team for opening this issue. We really appreciate the heads up of a breaking change like this. React Native community is awesome.

We have been looking into supporting RN v0.60 autolinking since v0.60.0-rc.0 was out. We did some initial investigation and came up with a plan to support to v0.60.

TODOs for autolinking with App Center RN SDK:

1. Create a react-native.config.js to each SDK module and remove the rnpm section from package.json.

2. Update postlink script to drop the logic that insert App Center Cocoapods dependencies into Podfile. With autolinking, react-native link no longer use dependencies Podfile but from node_modules paths.

3. Document the additional manual steps that were previously done by postlink script.

Regarding your concerns,

On Android, the AppCenterReactNativePackage takes MainApplication.this argument, which is now not available. Is it possible for you to restructure the app entry to have no arguments passed through constructor? (on a side note: passing params in constructor may also cause problems in future TurboModules).

Luckily this won't be a problem for us. We can use getApplication() in the constructor of new AppCenterReactNativePackage(getApplication()) to replace new AppCenterReactNativePackage(MainApplication.this).

postlink/prelink hooks are not compatible with autolinking approach and we're not providing support for it. If there are any extra steps expected from users (e.g. creating config files), they need to be documented and applied manually.

Yes we are aware of the lack of postlink hooks. I totally agree with your comment (https://github.com/react-native-community/cli/issues/429#issuecomment-504648534) that postlink scripts bring inconsistent developer experience and they are often misused as a hack or workaround. I am personally in favor of getting rid of postlink script from App Center RN SDK for simplicity in the future. Hopefully we can move towards that direction soon.

Lastly, I have a question for you @thymikee,

It's also possible to use legacy react-native link and to disable autolinking

How do you disable autolinking in v0.60?

Thanks,
Di

[thymikee]

Thank you for such a welcoming response!

Luckily this won't be a problem for us. We can use getApplication() in the constructor

I'm so happy you've found a way to simplify Android configs to work with autolinking. Janic have done something similar recently for react-native-fbsdk package. Also, if you need any help with reviewing the docs for manual work, let me know :)

How do you disable autolinking in v0.60?

For now it's only possible from the user side (to disable from library config we'd need to adjust some things, but it's not impossible), per package or per package's platform. Here's an example (a PR waiting to be merged): https://github.com/react-native-community/cli/pull/444/files#diff-e170f7cfd11ce7d2abb04a47b02a4caa.

It basically looks like the config I provided in original post.

TODOs for autolinking with App Center RN SDK

This looks legit. If you'd like to keep some parts of the scripts that really make sense from the ease of use perspective, you can always provide a bin entry in package.json and ask users to run yarn appcenter setup after installing the package.

Regarding removing "rnpm" – if you want to provide compat with older RN versions, it's not necessary to remove it, CLI will detect react-native.config.js and use that instead, without triggering a warning. We added this handling on purpose to support libs in transition period where they can address multiple RN versions. I can imagine however it's going to be problematic to have actual support for both RN 0.60 and pre-0.60 because of AndroidX transition (possible with jetifier though – worth checking that and recommend to the users if necessary).

[kelset]

👋 everyone - RN 0.60.0 is out, is there any estimate on when a compatible version of appcenter will be out?

EDIT:
just for clarification, the appcenter packs to behave properly in a fresh 0.60 project. Main issue I could detect until now is the "rnpm" warning.

[dhei]

Thanks @kelset.

We are actively working on the support of RN 0.60.0. The ETA is our SDK July release.

Will share more information once we are ready for the release.

[AndriiChubariev]

Hi guys, updating from the RN 0.57 to RN 0.60 here, lots of fun.

Could you please tell, is it possible to add appcenter on top of the fresh RN 0.60.3 install? Or should I wait for July release?

My steps:

1. react-native init AwesomeProject
2. yarn add appcenter appcenter-analytics appcenter-crashes --exact
3. cd ios pod install cd ..
4. adding react-native.config.js to the root of the AwesomeProject with content from a first post.
5. then I am executing react-native link but nothing happens, only rnpm warnings.

Also, there is neither appcenter-config.json nor AppCenter-Config.plist files automatically creat
ed.

[thymikee]

@AndriiChubariev react-native.config.js affects regular linking as well, so first do react-native link ... --platforms android (if it wasn't linked before) and then add the config once all is set.

You'll also need to adjust the MainApplication.java:

    @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
+      packages.add(new AppCenterReactNativeCrashesPackage(MainApplication.this, getResources().getString(R.string.appCenterCrashes_whenToSendCrashes)));
+      packages.add(new AppCenterReactNativeAnalyticsPackage(MainApplication.this, getResources().getString(R.string.appCenterAnalytics_whenToEnableAnalytics)));
+      packages.add(new AppCenterReactNativePackage(MainApplication.this));

      return packages;
    }

Then you can disable linking for appcenter and related libs: https://github.com/microsoft/appcenter-sdk-react-native/issues/613#issuecomment-512577621

[vinaypuppal]

Hi @thymikee I tried above suggestions and I am getting below error

app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java |  
-- | --
error: cannot find symbol class MainApplication |  
error: cannot find symbol class MainApplication |  

[thymikee]

@vinaypuppal once you hit that (provided the library is linked properly as it was before, with gradle imports etc), you need to disable autolinking on android for this lib: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md#how-can-i-disable-autolinking-for-unsupported-library

// react-native.config.js
module.exports = {
  dependencies: {
    'appcenter': {
      platforms: { android: null },
    },
    // ...and the rest of appcenter libs
  },
};

[bobber205]

For people reading this in the near future -- this works. Ulink, relink on android only then add the .config.js file

Don't make the mistake I did and make it react-native-config.js It's not -config it's .config !

[dhei]

Hello everyone,

Thanks for the patience.

App Center RN SDK v2.2.0 (https://github.com/microsoft/appcenter-sdk-react-native/releases/tag/2.2.0) is released with RN v0.60 support.

Please check it out and let us know if you still run into issues with v0.60 integration.

[dhei]

App Center RN SDK documentation will be updated very soon.

The super-short version of how to integrate App Center SDK,

• If your app's RN version < 0.60.0, after installing npm packages, you will need to run react-native link to link App Center packages for Android and iOS.
• If your app's RN version >= 0.60.0, after installing npm pacakges, you will need to run pod install from your iOS directory.

[eroSanyn]

Am just starting to integrate the SDK into my app.

my package.json got the latest :

    "appcenter": "2.2.0",
    "appcenter-analytics": "2.2.0",
    "appcenter-crashes": "2.2.0",

did a pod install and saw

Installing appcenter (2.2.0)
Installing appcenter-analytics (2.2.0)
Installing appcenter-crashes (2.2.0)

I dont see any analytics data in the dashboard though. I might be missing something.

[Alewex]

I ran pod install from the iOS directory, but strangely, no pods were added to my Podfile 🤔

[eroSanyn]

@Alewex you could try pod update or specific pod update for the necessary

[LuisRodriguezLD]

@Alewex I want to share something I found out while updating to RN .60

It's true, pod install does not add the pod to your podfile but RN does link them, he knows about them. This is mainly because of the change you made in your podfile while updating:

require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
use_native_modules!

I have been able to build on iOS my problem was Android, hopefully this update solves it

[Alewex]

@LuisRodriguezLD Man, you've saved me hours, thanks a lot 🙇

[bobber205]

What does y'alls AppDelegate.m file look like now?

[LuisRodriguezLD]

@bobber205 I recommend you try this tool my friend. There, you can compare your react native version and the one you want to upgrade to.

Depending your latest version, one of the latest changes in the AppDelegate.m file is the use of a bridge:

#import <React/RCTBridge.h>

RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
            moduleName:@"RnDiffApp"
            initialProperties:nil];

[bobber205]

I was thinking more along the lines of the AppCenter includes in AppDelegate.m

That's where my current errors lie.

[bobber205]

Either one of these fails now

// #import <AppCenterReactNativePush/AppCenterReactNativePush.h>
// #import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
// #import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
// #import <AppCenterReactNative/AppCenterReactNative.h>

// #import <AppCenterReactNative.h>
// #import <AppCenterReactNativeAnalytics.h>
// #import <AppCenterReactNativeCrashes.h>
// #import <AppCenterReactNativePush.h>

back from the manual linking days.

Without any reference though I just get

/AppDelegate.m:35:4: use of undeclared identifier 'AppCenterReactNativePush'

etc

[Alewex]

@bobber205 Mine just looks like this.

#import "AppDelegate.h"

 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 #import <ReactNativeNavigation/ReactNativeNavigation.h>

 @implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
     NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
     [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];

     return YES;
 }

 @end

[bobber205]

Couple of things I've noticed:

Forgot to add require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' when updating my Podfile. Was easy to miss.

I took out all reference to app center in AppDelegate.m and it's compiling now. But when my app boots up I get

`AppCenterPushNotificationReceived` is not a supported event type for AppCenterReactNativePush. Supported events are: `(null)`

So strange. Anyone know if the docs are up to date now?

[bobber205]

From reading https://github.com/Microsoft/AppCenter-SDK-React-Native/issues/287

it looks like this is because I am not calling [AppCenterReactNativePush register];. That makes sense. Does anyone have an example using auto linking on how I would import AppCenterReactNativePush?

[dylinmaust]

@dhei I'm trying to integrate App Center with a new RN 0.60.4 project. I've installed packages through npm and installed the pods for iOS. But how do I configure my app secrets in the new workflow? The appcenter-config.json and AppCenter-Config.plist files were not generated, which makes me suspicious if the workflow processed correctly. Is it now a manual step to add these files?

[danfri86]

I got my AppCenter 2.2.0 running on react-native 0.60.4.
Update all AppCenter versions to 2.2.0 in package.json then run yarn install.
Go to ios folder and install pods:
cd ios/ && pod install && cd ..
I see all AppCenter 2.2.0 packages install.

My AppDelegate.m look like before

#import <AppCenterReactNativePush.h>
#import <AppCenterReactNativeCrashes.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNative.h>

...
// Inside didFinishLaunchingWithOptions
[AppCenterReactNativePush register];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNative register];

This far I've only run my app in the simulator and it works without errors.

@dylinmaust What I've done is to add it manually. Don't know if it's correct though but hey, it works :). Follow 3.2.4 this part of the documentation

[bobber205]

@dylinmaust Great thing to point out!
I looked back in our git history and it looks like those files were only generated when we ran the link process.

I wonder if it's worthing trying to link the package(s) just to generate those files then unlink them?

[guperrot]

@dhei I'm trying to integrate App Center with a new RN 0.60.4 project. I've installed packages through npm and installed the pods for iOS. But how do I configure my app secrets in the new workflow? The appcenter-config.json and AppCenter-Config.plist files were not generated, which makes me suspicious if the workflow processed correctly. Is it now a manual step to add these files?

Your suspicion is correct: https://docs.microsoft.com/en-us/appcenter/sdk/getting-started/react-native#31-integrate-the-sdk-automatically-for-react-native-060 the config files need to manually created on RN 0.60.

[guperrot]

@dylinmaust https://github.com/microsoft/appcenter-sdk-react-native/issues/613#issuecomment-517474259

[guperrot]

This issue will now be closed as the SDK was updated to implement the feature request.
If you run into further issues, please create new issues using the template.

[thymikee]

Thank you @guperrot!