make app work with reanimated 2

apps/mobile/android/app/proguard-rules.pro

@@ -47,4 +47,8 @@
 -keep class com.goterl.** { *; }
 -keepclassmembers class * extends com.sun.jna.* { public *; }
 
--keep class com.streetwriters.notesnook.BuildConfig { *; }
+-keep class com.streetwriters.notesnook.BuildConfig { *; }
+
+# Reanimated 
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }

apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/MainApplication.java

@@ -33,6 +33,8 @@ import com.facebook.react.config.ReactFeatureFlags;
 import com.streetwriters.notesnook.newarchitecture.MainApplicationReactNativeHost;
 import cl.json.RNShareModule;
 import px.tooltips.RNTooltipsModule;
+import com.facebook.react.bridge.JSIModulePackage; // <- add  
+import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
 
 public class MainApplication extends MultiDexApplication implements ReactApplication {
 
@@ -102,6 +104,10 @@ public class MainApplication extends MultiDexApplication implements ReactApplica
                 protected String getJSMainModuleName() {
                     return "index";
                 }
+
+                 @Override protected JSIModulePackage getJSIModulePackage() {        
+                     return new ReanimatedJSIModulePackage(); // <- add      
+                }
             };
 
     public ReactModuleInfo getModuleInfo(String reactClass, String className) {

apps/mobile/src/components/tabs/index.js

@@ -26,7 +26,6 @@ export default class Tabs extends Component {
   renderItem = ({ item, index }) => this.props.items[index];
 
   onMoveShouldSetResponder = event => {
-    console.log(this.locked);
     if (this.locked) return false;
     if (this.responderAllowedScroll) return false;
     this.lastOffset = this.scrollOffset;
@@ -37,7 +36,6 @@ export default class Tabs extends Component {
     let aOffset = this.props.offsets.a.toFixed(0);
     let page0Width = pOffset - aOffset;
 
-    console.log(this.page, this.currentDrawerState);
     if (
       (this.page === 0 && !this.currentDrawerState && x > 80 && x < page0Width - 80) ||
       DDS.isLargeTablet()
@@ -183,7 +181,6 @@ export default class Tabs extends Component {
   scrollEndTimeout = null;
 
   onScrollEnd = () => {
-    console.log('scroll end', this.scrollOffset);
     if (this.scrollEndTimeout) {
       clearTimeout(this.scrollEndTimeout);
       this.scrollEndTimeout = null;

apps/mobile/src/components/toast/index.js

@@ -1,34 +1,26 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Keyboard, View } from 'react-native';
-import Animated, { EasingNode, useValue } from 'react-native-reanimated';
+import Animated, { FadeInUp, FadeOutUp } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../e2e/test.ids';
-import { useThemeStore } from '../../stores/theme';
 import { DDS } from '../../services/device-detection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
-import { dHeight, getElevation } from '../../utils';
+import { useThemeStore } from '../../stores/theme';
+import { getElevation } from '../../utils';
 import { eHideToast, eShowToast } from '../../utils/events';
 import { SIZE } from '../../utils/size';
-import { sleep } from '../../utils/time';
 import { Button } from '../ui/button';
 import Heading from '../ui/typography/heading';
 import Paragraph from '../ui/typography/paragraph';
-const { timing } = Animated;
-
 let toastMessages = [];
 export const Toast = ({ context = 'global' }) => {
   const colors = useThemeStore(state => state.colors);
   const [keyboard, setKeyboard] = useState(false);
   const [data, setData] = useState({});
-  const [toastStyle, setToastStyle] = useState({
-    backgroundColor: colors.errorBg,
-    color: colors.errorText
-  });
   const insets = useSafeAreaInsets();
   const hideTimeout = useRef();
-  let toastTranslate = useValue(-dHeight);
-  let toastOpacity = useValue(0);
+  const [visible, setVisible] = useState(false);
 
   const showToastFunc = async data => {
     console.log('toast show', data.message, toastMessages.length);
@@ -41,24 +33,8 @@ export const Toast = ({ context = 'global' }) => {
     toastMessages.push(data);
     if (toastMessages?.length > 1) return;
     setData(data);
-    if (data.type === 'success') {
-      setToastStyle({
-        color: colors.successText
-      });
-    } else {
-      setToastStyle({
-        color: colors.errorText
-      });
-    }
-    toastTranslate.setValue(-dHeight);
-    toastTranslate.setValue(0);
-    await sleep(1);
-    timing(toastOpacity, {
-      toValue: 1,
-      duration: 150,
-      easing: EasingNode.ease
-    }).start();
 
+    setVisible(true);
     if (hideTimeout.current) {
       clearTimeout(hideTimeout.current);
     }
@@ -73,15 +49,6 @@ export const Toast = ({ context = 'global' }) => {
       return;
     }
     setData(data);
-    if (data.type === 'success') {
-      setToastStyle({
-        color: colors.successText
-      });
-    } else {
-      setToastStyle({
-        color: colors.errorText
-      });
-    }
     if (hideTimeout.current) {
       clearTimeout(hideTimeout.current);
     }
@@ -97,34 +64,20 @@ export const Toast = ({ context = 'global' }) => {
     let msg = toastMessages.length > 1 ? toastMessages.shift() : null;
 
     if (msg) {
-      timing(toastOpacity, {
-        toValue: 0,
-        duration: 100,
-        easing: EasingNode.in(EasingNode.ease)
-      }).start(() => {
-        showNext(msg);
-        setTimeout(() => {
-          timing(toastOpacity, {
-            toValue: 1,
-            duration: 150,
-            easing: EasingNode.in(EasingNode.ease)
-          }).start();
-        }, 300);
-      });
+      setVisible(false);
+      showNext(msg);
+      setTimeout(() => {
+        setVisible(true);
+      }, 300);
     } else {
-      timing(toastOpacity, {
-        toValue: 0,
-        duration: 150,
-        easing: EasingNode.inOut(EasingNode.ease)
-      }).start(async () => {
-        toastMessages.shift();
-        await sleep(100);
-        toastTranslate.setValue(-dHeight);
+      setVisible(false);
+      toastMessages.shift();
+      setTimeout(() => {
         setData({});
         if (hideTimeout.current) {
           clearTimeout(hideTimeout.current);
         }
-      });
+      }, 100);
     }
   };
 
@@ -138,8 +91,6 @@ export const Toast = ({ context = 'global' }) => {
 
   useEffect(() => {
     toastMessages = [];
-    toastTranslate.setValue(-dHeight);
-    toastOpacity.setValue(0);
     let sub1 = Keyboard.addListener('keyboardDidShow', _onKeyboardShow);
     let sub2 = Keyboard.addListener('keyboardDidHide', _onKeyboardHide);
     eSubscribeEvent(eShowToast, showToastFunc);
@@ -158,125 +109,121 @@ export const Toast = ({ context = 'global' }) => {
   }, [keyboard]);
 
   return (
-    <Animated.View
-      onTouchEnd={() => {
-        if (!data.func) {
-          if (hideTimeout.current) {
-            clearTimeout(hideTimeout.current);
-          }
-          hideToastFunc();
-        }
-      }}
-      style={{
-        width: DDS.isTab ? 400 : '100%',
-        alignItems: 'center',
-        alignSelf: 'center',
-        minHeight: 30,
-        top: insets.top + 10,
-        position: 'absolute',
-        zIndex: 999,
-        elevation: 15,
-        transform: [
-          {
-            translateY: toastTranslate
-          }
-        ]
-      }}
-    >
+    visible && (
       <Animated.View
-        activeOpacity={0.8}
+        onTouchEnd={() => {
+          if (!data.func) {
+            if (hideTimeout.current) {
+              clearTimeout(hideTimeout.current);
+            }
+            hideToastFunc();
+          }
+        }}
         style={{
-          ...getElevation(5),
-          ...toastStyle,
-          maxWidth: '95%',
-          backgroundColor: colors.nav,
-          minWidth: data?.func ? '95%' : '50%',
-          alignSelf: 'center',
-          borderRadius: 5,
-          opacity: toastOpacity,
-          minHeight: 30,
-          paddingVertical: 10,
-          paddingLeft: 12,
-          paddingRight: 5,
-          justifyContent: 'space-between',
-          flexDirection: 'row',
+          width: DDS.isTab ? 400 : '100%',
           alignItems: 'center',
-          width: '95%'
+          alignSelf: 'center',
+          minHeight: 30,
+          top: insets.top + 10,
+          position: 'absolute',
+          zIndex: 999,
+          elevation: 15
         }}
       >
-        <View
+        <Animated.View
+          entering={FadeInUp.springify()}
+          exiting={FadeOutUp}
           style={{
+            ...getElevation(5),
+            maxWidth: '95%',
+            backgroundColor: colors.nav,
+            minWidth: data?.func ? '95%' : '50%',
+            alignSelf: 'center',
+            borderRadius: 5,
+            minHeight: 30,
+            paddingVertical: 10,
+            paddingLeft: 12,
+            paddingRight: 5,
+            justifyContent: 'space-between',
             flexDirection: 'row',
             alignItems: 'center',
-            flexGrow: 1,
-            flex: 1
+            width: '95%'
           }}
         >
           <View
             style={{
-              height: 30,
-              borderRadius: 100,
-              justifyContent: 'center',
+              flexDirection: 'row',
               alignItems: 'center',
-              marginRight: 10
-            }}
-          >
-            <Icon
-              name={data?.type === 'success' ? 'check' : 'close'}
-              size={SIZE.lg}
-              color={data?.type === 'error' ? colors.errorText : colors.accent}
-            />
-          </View>
-
-          <View
-            style={{
               flexGrow: 1,
-              paddingRight: 25
+              flex: 1
             }}
           >
-            {data?.heading ? (
-              <Heading
-                color={colors.pri}
-                size={SIZE.md}
-                onPress={() => {
-                  hideToastFunc();
-                }}
-              >
-                {data.heading}
-              </Heading>
-            ) : null}
+            <View
+              style={{
+                height: 30,
+                borderRadius: 100,
+                justifyContent: 'center',
+                alignItems: 'center',
+                marginRight: 10
+              }}
+            >
+              <Icon
+                name={data?.type === 'success' ? 'check' : 'close'}
+                size={SIZE.lg}
+                color={data?.type === 'error' ? colors.errorText : colors.accent}
+              />
+            </View>
 
-            {data?.message ? (
-              <Paragraph
-                color={colors.pri}
-                style={{
-                  maxWidth: '100%',
-                  paddingRight: 10
-                }}
-                onPress={() => {
-                  hideToastFunc();
-                }}
-              >
-                {data.message}
-              </Paragraph>
-            ) : null}
+            <View
+              style={{
+                flexGrow: 1,
+                paddingRight: 25
+              }}
+            >
+              {data?.heading ? (
+                <Heading
+                  color={colors.pri}
+                  size={SIZE.md}
+                  onPress={() => {
+                    hideToastFunc();
+                  }}
+                >
+                  {data.heading}
+                </Heading>
+              ) : null}
+
+              {data?.message ? (
+                <Paragraph
+                  color={colors.pri}
+                  style={{
+                    maxWidth: '100%',
+                    paddingRight: 10
+                  }}
+                  onPress={() => {
+                    hideToastFunc();
+                  }}
+                >
+                  {data.message}
+                </Paragraph>
+              ) : null}
+            </View>
           </View>
-        </View>
 
-        {data.func ? (
-          <Button
-            testID={notesnook.toast.button}
-            fontSize={SIZE.md}
-            type={data.type === 'error' ? 'errorShade' : 'transparent'}
-            onPress={data.func}
-            title={data.actionText}
-            height={30}
-            style={{
-              zIndex: 10
-            }}
-          />
-        ) : null}
+          {data.func ? (
+            <Button
+              testID={notesnook.toast.button}
+              fontSize={SIZE.md}
+              type={data.type === 'error' ? 'errorShade' : 'transparent'}
+              onPress={data.func}
+              title={data.actionText}
+              height={30}
+              style={{
+                zIndex: 10
+              }}
+            />
+          ) : null}
+        </Animated.View>
       </Animated.View>
-    </Animated.View>
+    )
   );
 };

apps/mobile/src/screens/settings/usersection.js

@@ -169,7 +169,7 @@ const SettingsUserSection = ({ item }) => {
                 />
               ) : null} */}
 
-              <View>
+              {/* <View>
                 {user.subscription?.type !== SUBSCRIPTION_STATUS.BASIC ? (
                   <View>
                     <Seperator />
@@ -213,9 +213,9 @@ const SettingsUserSection = ({ item }) => {
                     </Paragraph>
                   </View>
                 ) : null}
-              </View>
+              </View> */}
 
-              {user?.subscription?.provider &&
+              {/* {user?.subscription?.provider &&
               user.subscription?.type !== SUBSCRIPTION_STATUS.PREMIUM_EXPIRED &&
               user.subscription?.type !== SUBSCRIPTION_STATUS.BASIC &&
               SUBSCRIPTION_PROVIDER[user?.subscription?.provider] ? (
@@ -240,7 +240,7 @@ const SettingsUserSection = ({ item }) => {
                   height={20}
                   type="accent"
                 />
-              ) : null}
+              ) : null} */}
             </View>
           </View>