Add type tests for AnimatedRef and fix Animated Components regression (…

…#5308)

Requires #5320.

I induced a regression accidentally in #5031 regarding FlatList.

This PR:
- fixes this regression,
- improves the type structure of other components,
- adds a new test suite to detect such mistakes in the future.

It also automatically fixes failing future RN version typecheck CI.

All the new & old tests should work.

.eslintrc.js

@@ -12,7 +12,14 @@ module.exports = {
     'plugin:import/typescript',
     'plugin:react-hooks/recommended',
   ],
-  plugins: ['react', 'react-native', 'import', 'jest', '@typescript-eslint'],
+  plugins: [
+    'react',
+    'react-native',
+    'import',
+    'jest',
+    '@typescript-eslint',
+    'eslint-plugin-tsdoc',
+  ],
   env: {
     'react-native/react-native': true,
     'jest/globals': true,
@@ -52,5 +59,7 @@ module.exports = {
       'error',
       { fixMixedExportsWithInlineTypeSpecifier: false },
     ],
+    'tsdoc/syntax': 'error',
+    '@typescript-eslint/no-non-null-assertion': 'off',
   },
 };

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -106,7 +106,7 @@ body:
       label: Workflow
       description: How is your application managed?
       options:
-        - React Native 
+        - React Native
         - Expo Go
         - Expo Dev Client
 
@@ -123,10 +123,13 @@ body:
     id: build-type
     attributes:
       label: Build type
-      description: What mode your application is running?
+      description: What is the build configuration/variant of your native app and JavaScript bundle mode?
       options:
-        - Debug mode
-        - Release mode
+        - Debug app & dev bundle
+        - Release app & production bundle
+        - Debug app & production bundle
+        - Release app & dev bundle
+        - Other (please specify)
 
   - type: dropdown
     id: emulator

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/ReanimatedRuntime/ReanimatedHermesRuntime.h

@@ -27,12 +27,14 @@
 #include <hermes/hermes.h>
 #endif
 
+#if HERMES_ENABLE_DEBUGGER
 #if REACT_NATIVE_MINOR_VERSION >= 73
 #include <hermes/inspector-modern/chrome/Registration.h>
 #else
 #include <hermes/inspector/RuntimeAdapter.h>
 #include <hermes/inspector/chrome/Registration.h>
 #endif
+#endif // HERMES_ENABLE_DEBUGGER
 
 namespace reanimated {
 

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/Podfile.lock

@@ -504,13 +504,13 @@ PODS:
     - React-Core
   - RNGestureHandler (2.13.2):
     - React-Core
-  - RNReanimated (3.5.0):
+  - RNReanimated (3.6.0):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
     - ReactCommon/turbomodule/core
-  - RNScreens (3.25.0):
+  - RNScreens (3.27.0):
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core
-    - React-RCTImage
   - RNSVG (13.14.0):
     - React-Core
   - SocketRocket (0.6.1)
@@ -773,8 +773,8 @@ SPEC CHECKSUMS:
   RNCMaskedView: f7c74478c83c4fdfc5cf4df51f80c0dd5cf125c6
   RNCPicker: 529d564911e93598cc399b56cc0769ce3675f8c8
   RNGestureHandler: bb86e378287f7713baf3ca205423eb8109790022
-  RNReanimated: 518aef663d1661d60e50610fe05ebec14b404739
-  RNScreens: 85d3880b52d34db7b8eeebe2f1a0e807c05e69fa
+  RNReanimated: 71dba8af3fcf22b055c801febf963fd3f3da6f73
+  RNScreens: 3c2d122f5e08c192e254c510b212306da97d2581
   RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: b76f1acfda8212aa16b7e26bcce3983230c82603

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"];

Example/package.json

@@ -25,7 +25,7 @@
     "react-native-pager-view": "^5.4.25",
     "react-native-reanimated": "link:../",
     "react-native-safe-area-context": "4.7.4",
-    "react-native-screens": "^3.25.0",
+    "react-native-screens": "^3.27.0",
     "react-native-svg": "^13.14.0"
   },
   "devDependencies": {

Example/yarn.lock

@@ -5988,10 +5988,10 @@ react-native-safe-area-context@4.7.4:
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz#3dd8438971e70043d76f2428ede75b8a9639265e"
   integrity sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==
 
-react-native-screens@^3.25.0:
-  version "3.25.0"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.25.0.tgz#cf45e271ce733c9cf782fef8c9b3eb9e53faf01d"
-  integrity sha512-TSC2Ad0hh763I8QT6XxMsPXAagQ+RawDSdFtKRvIz9fCYr96AjRwwaqmYivbqlDywOgcRBkIVynkFtp0ThmlYw==
+react-native-screens@^3.27.0:
+  version "3.27.0"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.27.0.tgz#2ac39f78dee27df97d3b6fb11ebf8e5751aa986a"
+  integrity sha512-FzSUygZ7yLQyhDJZsl7wU68LwRpVtVdqOPWribmEU3Tf26FohFGGcfJx1D8lf2V2Teb8tI+IaLnXCKbyh2xffA==
   dependencies:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"

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"];