Support for React Native AutoLinking

[ricku44]

Description

This PR aims at reducing native CodePush installation steps:

Plugin Installation and Configuration for React Native 0.60 version and above (Android)

Step 1

1. In your android/settings.gradle file, make the following additions at the end of the file:

...
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

Step 2

2. In your android/app/build.gradle file, add the codepush.gradle file as an additional build task definition to the end of the file:

...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...

Step 3 [Required]

3. Update the MainApplication.java file to use CodePush via the following changes:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
  
        // 2. Override the getJSBundleFile method in order to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    }
}

Step 4

4. Add the Deployment key to strings.xml:

   To let the CodePush runtime know which deployment it should query for updates, open your app's strings.xml file and add a new string named CodePushDeploymentKey, whose value is the key of the deployment you want to configure this app against (like the key for the Staging deployment for the FooBar app). You can retrieve this value by running appcenter codepush deployment list -a <ownerName>/<appName> -k in the CodePush CLI (the -k flag is necessary since keys aren't displayed by default) and copying the value of the Key column which corresponds to the deployment you want to use (see below). Note that using the deployment's name (like Staging) will not work. The "friendly name" is intended only for authenticated management usage from the CLI, and not for public consumption within your app.

   

   In order to effectively make use of the Staging and Production deployments that were created along with your CodePush app, refer to the multi-deployment testing docs below before actually moving your app's usage of CodePush into production.

   Your strings.xml should looks like this:

<resources>
      <string name="app_name">AppName</string>
      <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
</resources>

Step 5 [JS side]

5. As per the note, we can set CodePush Deployment Keys using codePushOptions from React Native's side.

Note: If you need to dynamically use a different deployment, you can also override your deployment key in JS code using Code-Push options

Plugin Installation and Configuration for React Native 0.60 version and above (iOS)

Step 1 - 4 [Required]

1. Run cd ios && pod install && cd .. to install all the necessary CocoaPods dependencies.

2. Open up the AppDelegate.m` file, and add an import statement for the CodePush headers:

   #import <CodePush/CodePush.h>
   

3. Find the following line of code, which sets the source URL for bridge for production releases:

   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
   

4. Replace it with this line:

   return [CodePush bundleURL];
   

   This change configures your app to always load the most recent version of your app's JS bundle. On the first launch, this will correspond to the file that was compiled with the app. However, after an update has been pushed via CodePush, this will return the location of the most recently installed update.

   NOTE: The bundleURL method assumes your app's JS bundle is named main.jsbundle. If you have configured your app to use a different file name, simply call the bundleURLForResource: method (which assumes you're using the .jsbundle extension) or bundleURLForResource:withExtension: method instead, in order to overwrite that default behavior

   Typically, you're only going to want to use CodePush to resolve your JS bundle location within release builds, and therefore, we recommend using the DEBUG pre-processor macro to dynamically switch between using the packager server and CodePush, depending on whether you are debugging or not. This will make it much simpler to ensure you get the right behavior you want in production, while still being able to use the Chrome Dev Tools, live reload, etc. at debug-time.

   Your sourceURLForBridge method should look like this:

   - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
   {
     #if DEBUG
       return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
     #else
       return [CodePush bundleURL];
     #endif
   }
   

Step 5

5. Add the Deployment key to Info.plist:

   To let the CodePush runtime know which deployment it should query for updates against, open your app's Info.plist file and add a new entry named CodePushDeploymentKey, whose value is the key of the deployment you want to configure this app against (like the key for the Staging deployment for the FooBar app). You can retrieve this value by running appcenter codepush deployment list -a <ownerName>/<appName> -k in the AppCenter CLI (the -k flag is necessary since keys aren't displayed by default) and copying the value of the Key column which corresponds to the deployment you want to use (see below). Note that using the deployment's name (like Staging) will not work. That "friendly name" is intended only for authenticated management usage from the CLI, and not for public consumption within your app.

   

   In order to effectively make use of the Staging and Production deployments that were created along with your CodePush app, refer to the multi-deployment testing docs below before actually moving your app's usage of CodePush into production.

Step 6 [JS side]

6. As per the note, we can set CodePush Deployment Keys using codePushOptions from React Native's side.

   Note: If you need to dynamically use a different deployment, you can also override your deployment key in JS code using Code-Push options

Changes Made

1. mv -f android/app/* android/

2. In android/build.gradle file, add the codepush.gradle file as an additional build task definition to the end of the file:

   ...
   apply from: "./codepush.gradle"
   ...
   

3. Resource String for seamless compilation:

   android.buildTypes.each { buildType ->
       ...
       buildType.resValue 'string', "CodePushDeploymentKey", ""
   }
   

Testing

npx react-native init AwesomeProject
npm i react-native-code-push

Add CodePush.getJSBundleFile() and [CodePush bundleURL]

AppRegistry.registerComponent(appName, () => codePush({ deploymentKey: CODE_KEY })(App));

.

[ricku44]

@microsoft-github-policy-service agree

[velimir-jankovic]

Hi @ricku44, thanks for contribution!

I see no docs changes in your PR. Does this mean your changes do not affect existing setups?

As far as I can see, it requires at least some modifications to make use of your changes.

[ricku44]

Hi @ricku44, thanks for contribution!

I see no docs changes in your PR. Does this mean your changes do not affect existing setups?

As far as I can see, it requires at least some modifications to make use of your changes.

Hello @velimir-jankovic,

Before updating the documentation, I'd like to request a review of these changes. I've noticed the addition of setup files in the android\app folder, this seems to increase the integration steps. React Native typically uses the android folder directly for autolinking. I have no idea why this was done and just want to ensure that these changes doesn't disrupt any existing workflows. I've only tested these changes with CRA templates.

[MikhailSuendukov]

Hello @ricku44 ,

Thank you for your contribution! I have reviewed your pull request and tested it on the Android platform. During the build process, I encountered the following error:

> Task :react-native-code-push:compileDebugLibraryResources
> Task :react-native-code-push:generateDebugBuildConfig UP-TO-DATE
> Task :react-native-code-push:javaPreCompileDebug UP-TO-DATE
> Task :react-native-code-push:parseDebugLocalResources
> Task :app:javaPreCompileDebug UP-TO-DATE
> Task :react-native-code-push:generateDebugRFile UP-TO-DATE

> Task :react-native-code-push:compileDebugJavaWithJavac FAILED

> Task :app:processDebugResources
32 actionable tasks: 15 executed, 17 up-to-date

info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor 

/Users/mikhailsuendukov/Documents/vscodeProjects/RNP742/node_modules/react-native-code-push/android/src/main/java/com/microsoft/codepush/react/CodePush.java:13: error: DevInternalSettings is not public in com.facebook.react.devsupport; cannot be accessed from outside package
import com.facebook.react.devsupport.DevInternalSettings;
                                    ^
/Users/mikhailsuendukov/Documents/vscodeProjects/RNP742/node_modules/react-native-code-push/android/src/main/java/com/microsoft/codepush/react/CodePush.java:155: error: DevInternalSettings is not public in com.facebook.react.devsupport; cannot be accessed from outside package
                DevInternalSettings devInternalSettings = (DevInternalSettings)devSupportManager.getDevSettings();
                ^
/Users/mikhailsuendukov/Documents/vscodeProjects/RNP742/node_modules/react-native-code-push/android/src/main/java/com/microsoft/codepush/react/CodePush.java:155: error: DevInternalSettings is not public in com.facebook.react.devsupport; cannot be accessed from outside package
                DevInternalSettings devInternalSettings = (DevInternalSettings)devSupportManager.getDevSettings();
                                                           ^
Note: /Users/mikhailsuendukov/Documents/vscodeProjects/RNP742/node_modules/react-native-code-push/android/src/main/java/com/microsoft/codepush/react/CodePushNativeModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: /Users/mikhailsuendukov/Documents/vscodeProjects/RNP742/node_modules/react-native-code-push/android/src/main/java/com/microsoft/codepush/react/CodePushNativeModule.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
3 errors

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-code-push:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

Could you please investigate this issue? Additionally, I am curious about the rationale behind moving the code from the 'app' folder. Could you provide some insights into this decision?

Thanks again for your efforts!

[DmitriyKirakosyan]

Closing as stale.