perf: minimize preferences freeze (#31)

* reduce picker scroll animation duration to minimize #29 occurrences
* only show main FAB on beers tab

.gitignore

@@ -65,4 +65,4 @@ GoogleService-Info.plist
 google-services.json
 ios/tmp.xcconfig
 fastlane/report.xml
-notifee.config.json
+notifee.*.json

src/components/Animations/Zoom/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Animated from 'react-native-reanimated'
+import { useTimingTransition } from 'react-native-redash/lib/module/v1'
+
+import { ZoomProps } from './types'
+
+export const Zoom: React.FC<ZoomProps> = ({ show, maxZoomOut = 0.01, delay = 0, style, ...rest }) => {
+  const node = useTimingTransition(show ? 1 : maxZoomOut, { duration: 200, delay })
+
+  return (
+    <Animated.View style={[{ transform: [{ scale: node }] }, style]} {...rest} />
+  )
+}

src/components/Animations/Zoom/types.ts

@@ -0,0 +1,10 @@
+import { ViewProps } from 'react-native'
+
+export interface ZoomProps extends ViewProps {
+  /** show/hide */
+  show: boolean,
+  /** max zoom out value */
+  maxZoomOut?: number,
+  /** animation delay */
+  delay?: number,
+}

src/components/Picker/helpers.ts

@@ -68,7 +68,7 @@ export const withDecay = (params: WithDecayParams) => {
   }
   const config = {
     toValue: new Value(0),
-    duration: new Value(1000),
+    duration: new Value(500),
     easing: Easing.bezier(0.22, 1, 0.36, 1),
   }
   return block([

src/routes/BottomNavigator/index.tsx

@@ -8,6 +8,7 @@ import overlay from 'util/overlay'
 import { FeedScreen } from 'screens/Feed'
 import { NotificationsScreen } from 'screens/Notifications'
 import { BeerTab } from 'screens/BeerTab'
+import { Zoom } from 'components/Animations/Zoom'
 
 import { BottomNavigatorProps } from './types'
 
@@ -87,18 +88,23 @@ export const BottomNavigator = ({ route }: BottomNavigatorProps) => {
       </Tab.Navigator>
 
       <Portal>
-        <FAB
-          visible={isFocused}
-          icon={icon}
+        <Zoom
+          show={routeName === 'BeerTab'}
+          maxZoomOut={0}
           style={{
             position: 'absolute',
             bottom: safeArea.bottom + 65,
             right: 16,
           }}
-          color='white'
-          theme={{ colors: { accent: theme.colors.primary } }}
-          onPress={handleFabPress}
-        />
+        >
+          <FAB
+            visible={isFocused}
+            icon={icon}
+            color='white'
+            theme={{ colors: { accent: theme.colors.primary } }}
+            onPress={handleFabPress}
+          />
+        </Zoom>
       </Portal>
     </>
   )

src/screens/BottomSheet/index.tsx

@@ -28,14 +28,14 @@ export const BottomSheetScreen: React.FC<BottomSheetScreenProps> = ({ navigation
     if (bsRef.current) {
       bsRef.current.snapTo(snapPoints.current.length - 2)
     }
-  }, [bsRef, snapPoints])
+  }, [])
 
   // Animate on close - onCloseEnd will be called after
   const onOverlayPress = useCallback(() => {
     if (bsRef.current) {
       bsRef.current.snapTo(snapPoints.current.length - 1)
     }
-  }, [bsRef, snapPoints])
+  }, [])
 
   // pop position in the navigation stack so the screen behind become interactive
   const handleOnCloseEnd = useCallback(() => {
@@ -56,7 +56,9 @@ export const BottomSheetScreen: React.FC<BottomSheetScreenProps> = ({ navigation
 
       BackHandler.addEventListener('hardwareBackPress', onBackPress)
 
-      return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress)
+      return () => {
+        BackHandler.removeEventListener('hardwareBackPress', onBackPress)
+      }
     }, [onOverlayPress]),
   )
 
@@ -97,6 +99,8 @@ export const BottomSheetScreen: React.FC<BottomSheetScreenProps> = ({ navigation
         initialSnap={snapPoints.current.length - 1}
         renderContent={renderBSContent}
         renderHeader={renderHeader}
+        // TODO: this callback seems not to fire randomly
+        // the use case found was in using a <Picker /> as content which also has reanimated logic. related?
         onCloseEnd={handleOnCloseEnd}
         enabledContentGestureInteraction={false}
       />

src/store/preferences/index.ts

@@ -73,6 +73,7 @@ export const preferences: StoreonModule<State, Events> = (store) => {
 
     // schedule notification
     upsertClockifyReminder(newPreferences.clockify)
+      .catch((error) => console.warn('Failed to to upsert Clockify Reminder:', error))
 
     return {
       preferences: newPreferences,