Autoinstall Android

Example/android/app/src/main/java/com/swmansion/reanimated/example/MainApplication.java

@@ -3,23 +3,18 @@
 import android.app.Application;
 import android.content.Context;
 
-import androidx.annotation.Nullable;
-
 import com.facebook.react.ReactApplication;
-import com.facebook.react.uimanager.UIImplementationProvider;
 import com.reactnativecommunity.picker.RNCPickerPackage;
 import com.swmansion.rnscreens.RNScreensPackage;
 import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.JSIModulePackage;
 import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 import com.horcrux.svg.SvgPackage;
 import com.reactnativepagerview.PagerViewPackage;
 import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
-import com.swmansion.reanimated.ReanimatedJSIModulePackage;
 import com.swmansion.reanimated.ReanimatedPackage;
 
 import org.reactnative.maskedview.RNCMaskedViewPackage;
@@ -56,12 +51,6 @@ protected List<ReactPackage> getPackages() {
     protected String getJSMainModuleName() {
       return "index";
     }
-
-    @Nullable
-    @Override
-    protected JSIModulePackage getJSIModulePackage() {
-      return new ReanimatedJSIModulePackage();
-    }
   };
 
   @Override

android/src/main/java/com/swmansion/reanimated/ReanimatedJSIModulePackage.java

@@ -1,32 +1,33 @@
 package com.swmansion.reanimated;
 
 import android.util.Log;
+
 import com.facebook.react.bridge.JSIModulePackage;
 import com.facebook.react.bridge.JSIModuleSpec;
 import com.facebook.react.bridge.JavaScriptContextHolder;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.devsupport.LogBoxDialog;
+import com.facebook.react.devsupport.LogBoxModule;
+
 import java.util.Arrays;
 import java.util.List;
 
 public class ReanimatedJSIModulePackage implements JSIModulePackage {
+  /**
+   * @deprecated Since 2.5.0, Reanimated autoinstalls on Android - you can remove
+   * getJSIModulePackage() override in MainApplication.java.
+   */
+  @Deprecated
+  public ReanimatedJSIModulePackage() {
+    super();
+  }
 
   @Override
   public List<JSIModuleSpec> getJSIModules(
       ReactApplicationContext reactApplicationContext, JavaScriptContextHolder jsContext) {
-
-    // When debugging in chrome the JS context is not available.
-    // https://github.com/facebook/react-native/blob/v0.67.0-rc.6/ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobCollector.java#L25
-    Utils.isChromeDebugger = jsContext.get() == 0;
-
-    if (!Utils.isChromeDebugger) {
-      NodesManager nodesManager =
-          reactApplicationContext.getNativeModule(ReanimatedModule.class).getNodesManager();
-      nodesManager.initWithContext(reactApplicationContext);
-    } else {
-      Log.w(
-          "[REANIMATED]",
-          "Unable to create Reanimated Native Module. You can ignore this message if you are using Chrome Debugger now.");
-    }
+    Log.w(
+        "[REANIMATED]",
+        "Since 2.5.0, Reanimated autoinstalls on Android - you can remove getJSIModulePackage() override in MainApplication.java.");
     return Arrays.<JSIModuleSpec>asList();
   }
 }

android/src/main/java/com/swmansion/reanimated/ReanimatedModule.java

@@ -1,5 +1,6 @@
 package com.swmansion.reanimated;
 
+import android.util.Log;
 import com.facebook.react.bridge.Callback;
 import com.facebook.react.bridge.LifecycleEventListener;
 import com.facebook.react.bridge.ReactApplicationContext;
@@ -102,6 +103,21 @@ public NodesManager getNodesManager() {
     return mNodesManager;
   }
 
+  @ReactMethod(isBlockingSynchronousMethod = true)
+  public void installTurboModule() {
+    // When debugging in chrome the JS context is not available.
+    // https://github.com/facebook/react-native/blob/v0.67.0-rc.6/ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobCollector.java#L25
+    Utils.isChromeDebugger = getReactApplicationContext().getJavaScriptContextHolder().get() == 0;
+
+    if (!Utils.isChromeDebugger) {
+      this.getNodesManager().initWithContext(getReactApplicationContext());
+    } else {
+      Log.w(
+          "[REANIMATED]",
+          "Unable to create Reanimated Native Module. You can ignore this message if you are using Chrome Debugger now.");
+    }
+  }
+
   @ReactMethod
   public void animateNextTransition(int tag, ReadableMap config) {
     mTransitionManager.animateNextTransition(tag, config);

docs/docs/fundamentals/installation.md

@@ -38,37 +38,7 @@ Reanimated plugin has to be listed last.
 
 ## Android
 
-1. Turn on Hermes engine by editing `android/app/build.gradle`
-
-```java {2}
-project.ext.react = [
-  enableHermes: true  // <- here | clean and rebuild if changing
-]
-```
-
-2. Plug Reanimated in `MainApplication.java`
-
-```java {1-2,12-15}
-  import com.facebook.react.bridge.JSIModulePackage; // <- add
-  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
-  ...
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
-  ...
-
-      @Override
-      protected String getJSMainModuleName() {
-        return "index";
-      }
-
-      @Override
-      protected JSIModulePackage getJSIModulePackage() {
-        return new ReanimatedJSIModulePackage(); // <- add
-      }
-    };
-  ...
-```
-
-You can refer [to this diff](https://github.com/software-mansion-labs/reanimated-2-playground/pull/8/commits/71642dbe7bd96eb41df5b9f59d661ab15f6fc3f8) that presents the set of the above changes made to a fresh react native project in our [Playground repo](https://github.com/software-mansion-labs/reanimated-2-playground).
+No additional steps are necessary.
 
 ### Proguard
 

ios/REAModule.m

@@ -28,6 +28,8 @@ - (dispatch_queue_t)methodQueue
   return RCTGetUIManagerQueue();
 }
 
+#pragma mark-- Initialize
+
 - (void)setBridge:(RCTBridge *)bridge
 {
   [super setBridge:bridge];
@@ -40,6 +42,11 @@ - (void)setBridge:(RCTBridge *)bridge
   [bridge.uiManager.observerCoordinator addObserver:self];
 }
 
+RCT_EXPORT_METHOD(installTurboModule)
+{
+  // TODO: Move initialization from UIResponder+Reanimated to here
+}
+
 #pragma mark-- Transitioning API
 
 RCT_EXPORT_METHOD(animateNextTransition : (nonnull NSNumber *)rootTag config : (NSDictionary *)config)

src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -1,31 +1,34 @@
+import { NativeModules } from 'react-native';
 import { SharedValue } from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
 
-const InnerNativeModule = global.__reanimatedModuleProxy;
-
 export class NativeReanimated {
   native: boolean;
-  useOnlyV1: boolean;
+  private InnerNativeModule: any;
 
   constructor(native = true) {
+    if (global.__reanimatedModuleProxy === undefined) {
+      const { ReanimatedModule } = NativeModules;
+      ReanimatedModule?.installTurboModule();
+    }
+    this.InnerNativeModule = global.__reanimatedModuleProxy;
     this.native = native;
-    this.useOnlyV1 = InnerNativeModule === null;
   }
 
   installCoreFunctions(valueSetter: <T>(value: T) => void): void {
-    return InnerNativeModule.installCoreFunctions(valueSetter);
+    return this.InnerNativeModule.installCoreFunctions(valueSetter);
   }
 
   makeShareable<T>(value: T): T {
-    return InnerNativeModule.makeShareable(value);
+    return this.InnerNativeModule.makeShareable(value);
   }
 
   makeMutable<T>(value: T): SharedValue<T> {
-    return InnerNativeModule.makeMutable(value);
+    return this.InnerNativeModule.makeMutable(value);
   }
 
   makeRemote<T>(object = {}): T {
-    return InnerNativeModule.makeRemote(object);
+    return this.InnerNativeModule.makeRemote(object);
   }
 
   startMapper(
@@ -35,7 +38,7 @@ export class NativeReanimated {
     updater: () => void,
     viewDescriptors: Descriptor[] | SharedValue<Descriptor[]>
   ): number {
-    return InnerNativeModule.startMapper(
+    return this.InnerNativeModule.startMapper(
       mapper,
       inputs,
       outputs,
@@ -45,29 +48,29 @@ export class NativeReanimated {
   }
 
   stopMapper(mapperId: number): void {
-    return InnerNativeModule.stopMapper(mapperId);
+    return this.InnerNativeModule.stopMapper(mapperId);
   }
 
   registerEventHandler<T>(
     eventHash: string,
     eventHandler: (event: T) => void
   ): string {
-    return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
+    return this.InnerNativeModule.registerEventHandler(eventHash, eventHandler);
   }
 
   unregisterEventHandler(id: string): void {
-    return InnerNativeModule.unregisterEventHandler(id);
+    return this.InnerNativeModule.unregisterEventHandler(id);
   }
 
   getViewProp<T>(
     viewTag: string,
     propName: string,
     callback?: (result: T) => void
   ): Promise<T> {
-    return InnerNativeModule.getViewProp(viewTag, propName, callback);
+    return this.InnerNativeModule.getViewProp(viewTag, propName, callback);
   }
 
   enableLayoutAnimations(flag: boolean): void {
-    InnerNativeModule.enableLayoutAnimations(flag);
+    this.InnerNativeModule.enableLayoutAnimations(flag);
   }
 }

src/reanimated2/NativeReanimated/index.ts

@@ -1,18 +1,12 @@
 import reanimatedJS from '../js-reanimated';
 import { shouldBeUseWeb } from '../PlatformChecker';
-import { Platform } from 'react-native';
 import { NativeReanimated } from './NativeReanimated';
 
 let exportedModule;
 if (shouldBeUseWeb()) {
   exportedModule = reanimatedJS;
 } else {
   exportedModule = new NativeReanimated();
-  if (exportedModule.useOnlyV1 && Platform.OS === 'android') {
-    console.warn(
-      `If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`
-    );
-  }
 }
 
 export default exportedModule as NativeReanimated;

src/reanimated2/core.ts

@@ -63,7 +63,7 @@ export const checkPluginState: (throwError: boolean) => boolean = (
 export const isConfigured: (throwError?: boolean) => boolean = (
   throwError = false
 ) => {
-  return checkPluginState(throwError) && !NativeReanimatedModule.useOnlyV1;
+  return checkPluginState(throwError);
 };
 
 export const isConfiguredCheck: () => void = () => {
@@ -362,32 +362,30 @@ export function runOnJS<A extends any[], R>(
   }
 }
 
-if (!NativeReanimatedModule.useOnlyV1) {
-  NativeReanimatedModule.installCoreFunctions(
-    NativeReanimatedModule.native
-      ? (workletValueSetter as <T>(value: T) => void)
-      : (workletValueSetterJS as <T>(value: T) => void)
-  );
+NativeReanimatedModule.installCoreFunctions(
+  NativeReanimatedModule.native
+    ? (workletValueSetter as <T>(value: T) => void)
+    : (workletValueSetterJS as <T>(value: T) => void)
+);
 
-  if (!isWeb() && isConfigured()) {
-    const capturableConsole = console;
-    runOnUI(() => {
-      'worklet';
-      const console = {
-        debug: runOnJS(capturableConsole.debug),
-        log: runOnJS(capturableConsole.log),
-        warn: runOnJS(capturableConsole.warn),
-        error: runOnJS(capturableConsole.error),
-        info: runOnJS(capturableConsole.info),
+if (!isWeb() && isConfigured()) {
+  const capturableConsole = console;
+  runOnUI(() => {
+    'worklet';
+    const console = {
+      debug: runOnJS(capturableConsole.debug),
+      log: runOnJS(capturableConsole.log),
+      warn: runOnJS(capturableConsole.warn),
+      error: runOnJS(capturableConsole.error),
+      info: runOnJS(capturableConsole.info),
+    };
+    _setGlobalConsole(console);
+    if (global.performance == null) {
+      global.performance = {
+        now: global._chronoNow,
       };
-      _setGlobalConsole(console);
-      if (global.performance == null) {
-        global.performance = {
-          now: global._chronoNow,
-        };
-      }
-    })();
-  }
+    }
+  })();
 }
 
 type FeaturesConfig = {