Allow different flavors JS and App (#5404)

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

tl;dr

## Test plan

### To make DEBUG bundle in RELEASE app

in `metro/Server.js` add

```js
transformOptions.dev = true;
```

below

```js
  async build(options) {
    const {
      entryFile,
      graphOptions,
      onProgress,
      resolverOptions,
      serializerOptions,
      transformOptions,
    } = splitBundleOptions(options);
```

and add `RCT_DEV=1` flag to pods in XCode

### To make RELEASE bundle in DEBUG app

```
Manually create release bundle with Metro, put it as e.g. `CUSTOM_BUNDLE.jsbundle` in `ios` and load it from file in AppDelegate.mm like this:

```mm
//#if DEBUG
// return [[RCTBundleURLProvider sharedSettings]
jsBundleURLForBundleRoot:@"index"];
//#else
return [[NSBundle mainBundle] URLForResource:@"CUSTOM_BUNDLE"
withExtension:@"jsbundle"];
//#endif
```

```

---------

Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com>

Common/cpp/LayoutAnimations/LayoutAnimationsManager.h

@@ -1,12 +1,9 @@
 #pragma once
 
+#include "JSLogger.h"
 #include "LayoutAnimationType.h"
 #include "Shareables.h"
 
-#ifndef NDEBUG
-#include "JSLogger.h"
-#endif
-
 #include <jsi/jsi.h>
 #include <stdio.h>
 #include <functional>
@@ -23,10 +20,8 @@ using namespace facebook;
 
 class LayoutAnimationsManager {
  public:
-#ifndef NDEBUG
   explicit LayoutAnimationsManager(const std::shared_ptr<JSLogger> &jsLogger)
       : jsLogger_(jsLogger) {}
-#endif
   void configureAnimation(
       int tag,
       LayoutAnimationType type,
@@ -54,8 +49,8 @@ class LayoutAnimationsManager {
   std::unordered_map<int, std::shared_ptr<Shareable>> &getConfigsForType(
       LayoutAnimationType type);
 
-#ifndef NDEBUG
   std::shared_ptr<JSLogger> jsLogger_;
+#ifndef NDEBUG
   // This set's function is to detect duplicate sharedTags on a single screen
   // it contains strings in form: "reactScreenTag:sharedTag"
   std::unordered_set<std::string> screenSharedTagSet_;

Common/cpp/NativeModules/NativeReanimatedModule.cpp

@@ -66,9 +66,8 @@ NativeReanimatedModule::NativeReanimatedModule(
         onRender(timestampMs);
       }),
       animatedSensorModule_(platformDepMethodsHolder),
-#ifndef NDEBUG
-      layoutAnimationsManager_(std::make_shared<JSLogger>(jsScheduler_)),
-#endif
+      jsLogger_(std::make_shared<JSLogger>(jsScheduler_)),
+      layoutAnimationsManager_(jsLogger_),
 #ifdef RCT_NEW_ARCH_ENABLED
       synchronouslyUpdateUIPropsFunction_(
           platformDepMethodsHolder.synchronouslyUpdateUIPropsFunction),

Common/cpp/NativeModules/NativeReanimatedModule.h

@@ -117,6 +117,10 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec {
       const jsi::Value &payload,
       double currentTime);
 
+  inline std::shared_ptr<JSLogger> getJSLogger() const {
+    return jsLogger_;
+  }
+
 #ifdef RCT_NEW_ARCH_ENABLED
   bool handleRawEvent(const RawEvent &rawEvent, double currentTime);
 
@@ -185,6 +189,7 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec {
   volatile bool renderRequested_{false};
   const std::function<void(const double)> onRenderCallback_;
   AnimatedSensorModule animatedSensorModule_;
+  const std::shared_ptr<JSLogger> jsLogger_;
   LayoutAnimationsManager layoutAnimationsManager_;
 
 #ifdef RCT_NEW_ARCH_ENABLED

Common/cpp/ReanimatedRuntime/RNRuntimeDecorator.cpp

@@ -1,7 +1,5 @@
 #include "RNRuntimeDecorator.h"
-#ifndef NDEBUG
 #include "ReanimatedVersion.h"
-#endif // NDEBUG
 
 namespace reanimated {
 
@@ -32,7 +30,7 @@ void RNRuntimeDecorator::decorate(
   rnRuntime.global().setProperty(rnRuntime, "_IS_FABRIC", isFabric);
 
 #ifndef NDEBUG
-  checkJSVersion(rnRuntime);
+  checkJSVersion(rnRuntime, nativeReanimatedModule->getJSLogger());
 #endif // NDEBUG
 
   rnRuntime.global().setProperty(

Common/cpp/Tools/JSLogger.cpp

@@ -1,18 +1,16 @@
-#ifndef NDEBUG
-
 #include "JSLogger.h"
 #include <memory>
 
 namespace reanimated {
 
 void JSLogger::warnOnJS(const std::string &warning) const {
+#ifndef NDEBUG
   jsScheduler_->scheduleOnJS([warning](jsi::Runtime &rt) {
     auto console = rt.global().getPropertyAsObject(rt, "console");
     auto warn = console.getPropertyAsFunction(rt, "warn");
     warn.call(rt, jsi::String::createFromUtf8(rt, warning));
   });
+#endif // NDEBUG
 }
 
 } // namespace reanimated
-
-#endif // NDEBUG

Common/cpp/Tools/JSLogger.h

@@ -1,5 +1,3 @@
-#ifndef NDEBUG
-
 #pragma once
 
 #include "JSScheduler.h"
@@ -20,5 +18,3 @@ class JSLogger {
 };
 
 } // namespace reanimated
-
-#endif // NDEBUG

Common/cpp/Tools/ReanimatedVersion.cpp

@@ -1,6 +1,8 @@
 #include "ReanimatedVersion.h"
+#include <memory>
 #include <regex>
 #include <string>
+#include "JSLogger.h"
 
 #ifdef REANIMATED_VERSION
 #define STRINGIZE(x) #x
@@ -41,26 +43,30 @@ bool matchVersion(const std::string &version1, const std::string &version2) {
   }
 }
 
-void checkJSVersion(jsi::Runtime &rnRuntime) {
+void checkJSVersion(
+    jsi::Runtime &rnRuntime,
+    const std::shared_ptr<JSLogger> &jsLogger) {
   auto cppVersion = getReanimatedCppVersion();
 
   auto maybeJSVersion =
       rnRuntime.global().getProperty(rnRuntime, "_REANIMATED_VERSION_JS");
   if (maybeJSVersion.isUndefined()) {
-    throw std::runtime_error(
+    jsLogger->warnOnJS(
         std::string(
             "[Reanimated] C++ side failed to resolve JavaScript code version\n") +
         "See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#c-side-failed-to-resolve-javascript-code-version` for more details.");
+    return;
   }
 
   auto jsVersion = maybeJSVersion.asString(rnRuntime).utf8(rnRuntime);
 
   if (!matchVersion(cppVersion, jsVersion)) {
-    throw std::runtime_error(
+    jsLogger->warnOnJS(
         std::string(
             "[Reanimated] Mismatch between C++ code version and JavaScript code version (") +
         cppVersion + " vs. " + jsVersion + " respectively).\n" +
         "See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-c-code-version-and-javascript-code-version` for more details.");
+    return;
   }
 
   rnRuntime.global().setProperty(

Common/cpp/Tools/ReanimatedVersion.h

@@ -1,17 +1,17 @@
 #pragma once
 
 #include <jsi/jsi.h>
+#include <memory>
 #include <string>
+#include "JSLogger.h"
 
 using namespace facebook;
 
 namespace reanimated {
 
 std::string getReanimatedCppVersion();
 
-#ifndef NDEBUG
 bool matchVersion(const std::string &, const std::string &);
-void checkJSVersion(jsi::Runtime &);
-#endif // NDEBUG
+void checkJSVersion(jsi::Runtime &, const std::shared_ptr<JSLogger> &);
 
 }; // namespace reanimated

Example/ios/ReanimatedExample.xcodeproj/project.pbxproj

@@ -487,7 +487,10 @@
 			baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-ReanimatedExample-ReanimatedExampleTests.debug.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
-				GCC_PREPROCESSOR_DEFINITIONS = "$(inherited)";
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
 				INFOPLIST_FILE = ReanimatedExampleTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -621,6 +624,7 @@
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_OPTIMIZATION_LEVEL = 0;
 				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
 					"$(inherited)",
 					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
 				);

Example/ios/ReanimatedExample/AppDelegate.mm

@@ -16,7 +16,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
-#ifndef NDEBUG
+#if DEBUG
   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
 #else
   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

FabricExample/ios/FabricExample.xcodeproj/project.pbxproj

@@ -482,7 +482,10 @@
 			baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-FabricExample-FabricExampleTests.debug.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
-				GCC_PREPROCESSOR_DEFINITIONS = "$(inherited)";
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
 				INFOPLIST_FILE = FabricExampleTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -616,6 +619,7 @@
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_OPTIMIZATION_LEVEL = 0;
 				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
 					"$(inherited)",
 					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
 				);

FabricExample/ios/FabricExample/AppDelegate.mm

@@ -16,7 +16,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
-#ifndef NDEBUG
+#if DEBUG
   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
 #else
   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

MacOSExample/ios/MacOSExample.xcodeproj/project.pbxproj

@@ -433,7 +433,10 @@
 			baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-MacOSExample-MacOSExampleTests.debug.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
-				GCC_PREPROCESSOR_DEFINITIONS = "$(inherited)";
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
 				INFOPLIST_FILE = MacOSExampleTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -567,6 +570,7 @@
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_OPTIMIZATION_LEVEL = 0;
 				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
 					"$(inherited)",
 					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
 				);

MacOSExample/ios/MacOSExample/AppDelegate.mm

@@ -16,7 +16,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
-#ifndef NDEBUG
+#if DEBUG
   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
 #else
   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

MacOSExample/macos/MacOSExample-macOS/AppDelegate.mm

@@ -16,7 +16,7 @@ - (void)applicationDidFinishLaunching:(NSNotification *)notification
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
-#ifndef NDEBUG
+#if DEBUG
   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
 #else
   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

MacOSExample/macos/MacOSExample.xcodeproj/project.pbxproj

@@ -474,6 +474,7 @@
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_OPTIMIZATION_LEVEL = 0;
 				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
 					"$(inherited)",
 					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
 				);

TVOSExample/ios/TVOSExample.xcodeproj/project.pbxproj

@@ -680,7 +680,10 @@
 			baseConfigurationReference = 36771B2C8C43AC6099096637 /* Pods-TVOSExample-TVOSExampleTests.debug.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
-				GCC_PREPROCESSOR_DEFINITIONS = "$(inherited)";
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
 				INFOPLIST_FILE = TVOSExampleTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -912,7 +915,10 @@
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_OPTIMIZATION_LEVEL = 0;
-				GCC_PREPROCESSOR_DEFINITIONS = "$(inherited)";
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
 				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;

TVOSExample/ios/TVOSExample/AppDelegate.mm

@@ -87,7 +87,7 @@ - (NSDictionary *)prepareInitialProps
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
-#ifndef NDEBUG
+#if DEBUG
   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
 #else
   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

__tests__/checkVersion.test.ts

@@ -14,12 +14,18 @@ describe('checkCppVersion', () => {
   });
 
   it('checks version successfully', () => {
-    expect(checkCppVersion).not.toThrow();
+    jest.spyOn(console, 'warn').mockImplementation();
+    checkCppVersion();
+    expect(console.warn).not.toBeCalled();
+    jest.clearAllMocks();
   });
 
   it('throws error when version is undefined', () => {
+    jest.spyOn(console, 'warn').mockImplementation();
     delete global._REANIMATED_VERSION_CPP;
-    expect(checkCppVersion).toThrow();
+    checkCppVersion();
+    expect(console.warn).toBeCalled();
+    jest.clearAllMocks();
   });
 });
 

app/src/examples/AboutExample.tsx

@@ -18,8 +18,8 @@ function getPlatformVersion() {
   return Platform.Version;
 }
 
-function getMode() {
-  return __DEV__ ? 'Debug' : 'Release';
+function getBundle() {
+  return __DEV__ ? 'dev' : 'production';
 }
 
 function getRuntime() {
@@ -54,7 +54,7 @@ export default function AboutExample() {
         {getPlatformVersion()}
       </Text>
       <Text style={styles.text}>
-        <Text style={styles.bold}>Build type:</Text> {getMode()}
+        <Text style={styles.bold}>Bundle:</Text> {getBundle()}
       </Text>
       {!isWeb() && (
         <>

src/reanimated2/platform-specific/checkCppVersion.ts

@@ -4,16 +4,17 @@ import { jsVersion } from './jsVersion';
 export function checkCppVersion() {
   const cppVersion = global._REANIMATED_VERSION_CPP;
   if (cppVersion === undefined) {
-    throw new Error(
+    console.warn(
       `[Reanimated] Couldn't determine the version of the native part of Reanimated.
-See \`https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#couldnt-determine-the-version-of-the-native-part-of-reanimated\` for more details.`
+    See \`https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#couldnt-determine-the-version-of-the-native-part-of-reanimated\` for more details.`
     );
+    return;
   }
   const ok = matchVersion(jsVersion, cppVersion);
   if (!ok) {
     throw new Error(
       `[Reanimated] Mismatch between JavaScript part and native part of Reanimated (${jsVersion} vs ${cppVersion}).
-See \`https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-javascript-part-and-native-part-of-reanimated\` for more details.`
+    See \`https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-javascript-part-and-native-part-of-reanimated\` for more details.`
     );
   }
 }