New navigation model (#1)

* Flatten all routing into a single stack

* Replace router with custom implementation

* Add shell header and titles

* Add tab selector

* Add back/forward history menus on longpress

* Fix: don't modify state during render

* Add refresh() to navigation and reroute navigations to the current location to refresh instead of add to history

* Cache screens during navigation to maintain scroll position and improve load-time for renders

1 files changed, 36 insertions, 0 deletions

diff --git a/src/view/com/util/BottomSheetCustomBackdrop.tsx b/src/view/com/util/BottomSheetCustomBackdrop.tsx
new file mode 100644
index 000000000..e175b33a5
--- /dev/null
+++ b/src/view/com/util/BottomSheetCustomBackdrop.tsx
@@ -0,0 +1,36 @@
+import React, {useMemo} from 'react'
+import {GestureResponderEvent, TouchableWithoutFeedback} from 'react-native'
+import {BottomSheetBackdropProps} from '@gorhom/bottom-sheet'
+import Animated, {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated'
+
+export function createCustomBackdrop(
+  onClose?: ((event: GestureResponderEvent) => void) | undefined,
+): React.FC<BottomSheetBackdropProps> {
+  const CustomBackdrop = ({animatedIndex, style}: BottomSheetBackdropProps) => {
+    // animated variables
+    const opacity = useAnimatedStyle(() => ({
+      opacity: interpolate(
+        animatedIndex.value, // current snap index
+        [-1, 0], // input range
+        [0, 0.5], // output range
+        Extrapolate.CLAMP,
+      ),
+    }))
+
+    const containerStyle = useMemo(
+      () => [style, {backgroundColor: '#000'}, opacity],
+      [style, opacity],
+    )
+
+    return (
+      <TouchableWithoutFeedback onPress={onClose}>
+        <Animated.View style={containerStyle} />
+      </TouchableWithoutFeedback>
+    )
+  }
+  return CustomBackdrop
+}