Move to reanimated 3 (#2593)

* Move to reanimated 3

* Improve wording

Author: M-i-k-e-l

android/app/src/main/java/com/rnuilib/MainApplication.java

@@ -10,7 +10,6 @@
 import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.react.NavigationReactNativeHost;
 import com.wix.reactnativeuilib.UiLibPackageList;
-import com.swmansion.reanimated.ReanimatedJSIModulePackage;
 
 import java.util.List;
 
@@ -23,11 +22,6 @@ protected String getJSMainModuleName() {
             return "demo";
         }
 
-        @Override
-        protected JSIModulePackage getJSIModulePackage() {
-            return new ReanimatedJSIModulePackage();
-        }
-
         @Override
         public boolean getUseDeveloperSupport() {
             return BuildConfig.DEBUG;

demo/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
 import {Assets, Colors, View, Button, Text, Incubator} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions, renderBooleanOption, renderRadioGroup} from '../ExampleScreenPresenter';
+import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 const {Toast} = Incubator;
 
@@ -18,7 +19,8 @@ const TOAST_MESSAGES = {
   offline: 'Check Your Internet Connection'
 };
 
-export default class ToastsScreen extends Component {
+// TODO: "ReactImageView: Image source "null" doesn't exist" (Android + preset "none")
+class ToastsScreen extends Component {
   showToast = false; // keep this state in class instance for immediate response
   state = {
     visible: false,
@@ -179,6 +181,8 @@ export default class ToastsScreen extends Component {
   }
 }
 
+export default gestureHandlerRootHOC(ToastsScreen);
+
 const styles = StyleSheet.create({
   scrollView: {
     paddingBottom: 80

demo/src/screens/incubatorScreens/TouchableOpacityScreen.js

@@ -2,6 +2,9 @@ import React, {Component} from 'react';
 import {TouchableOpacity} from 'react-native';
 import {View, Text, Colors, Incubator} from 'react-native-ui-lib';
 
+// TODO: Android - multiple clicks on the example that allows long press button (maybe dragging is also involved) -->
+// long press on it --> sometimes the counter just start ticking up
+// (happens on 2.17.0 as well but more rare, with gestureHandlerRootHOC)
 class TouchableOpacityScreen extends Component {
   state = {
     counter: 0,

package.json

@@ -111,7 +111,7 @@
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-navigation": "7.32.1",
-    "react-native-reanimated": "2.14.0",
+    "react-native-reanimated": "3.1.0",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "^13.7.0",
     "react-native-svg-transformer": "^0.14.3",

src/components/sortableList/SortableListItem.tsx

@@ -29,6 +29,10 @@ const animationConfig = {
   duration: 350
 };
 
+// Reanimated 3 - Solving the following error:
+// ReanimatedError: Trying to access property `$backgroundDefault` of an object which cannot be sent to the UI runtime., js engine: reanimated
+const LIST_ITEM_BACKGROUND = Colors.$backgroundDefault;
+
 const SortableListItem = (props: Props) => {
   const {children, index} = props;
 
@@ -159,7 +163,7 @@ const SortableListItem = (props: Props) => {
       : defaultItemShadow.value;
 
     return {
-      backgroundColor: Colors.$backgroundDefault, // required for elevation to work in Android
+      backgroundColor: LIST_ITEM_BACKGROUND, // required for elevation to work in Android
       zIndex,
       transform: [{translateY: translateY.value}, {scale}],
       opacity,