Android App

.gitignore

@@ -17,4 +17,5 @@ web-build/
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
 
-ios/
+ios/
+android/

app.config.ts

@@ -9,9 +9,7 @@ module.exports = {
     slug: "hydra",
     version: packageJson.version,
     newArchEnabled: true,
-    runtimeVersion: {
-      policy: 'appVersion',
-    },
+    runtimeVersion: packageJson.version,
     orientation: "portrait",
     icon: "./assets/images/icon.png",
     scheme: "hydra",
@@ -33,6 +31,7 @@ module.exports = {
       },
     },
     android: {
+      package: "com.dmilin.hydra",
       adaptiveIcon: {
         foregroundImage: "./assets/images/adaptive-icon.png",
         backgroundColor: "#000000"

app/index.tsx

@@ -11,7 +11,8 @@ import { registerRootComponent } from "expo";
 import { useFonts } from "expo-font";
 import { SplashScreen } from "expo-router";
 import React, { useEffect, useState } from "react";
-import { AppState, LogBox } from "react-native";
+import { AppState, LogBox, Platform } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { enableFreeze } from "react-native-screens";
 
@@ -59,7 +60,9 @@ Sentry.init({
 SplashScreen.preventAutoHideAsync();
 
 // Tells non visble tabs and screens to not rerender in the background
-enableFreeze(true);
+if (Platform.OS !== "android") {
+  enableFreeze(true);
+}
 
 function RootLayout() {
   const { success: migrationsComplete, error } = useMigrations(db, migrations);
@@ -105,34 +108,36 @@ function RootLayout() {
     migrationsComplete &&
     fontsLoaded &&
     dbMaintenanceDone && (
-      <SafeAreaProvider>
-        <AccountProvider>
-          <SubscriptionsProvider>
-            <SettingsProvider>
-              <TabScrollProvider>
-                <NavigationProvider>
-                  <ActionSheetProvider>
-                    <ActionSheetBgProvider>
-                      <InboxProvider>
-                        <ModalProvider>
-                          <MediaViewerProvider>
-                            <SubredditProvider>
-                              <StartupModalProvider>
-                                <SubscribeToHydra />
-                                <Tabs />
-                              </StartupModalProvider>
-                            </SubredditProvider>
-                          </MediaViewerProvider>
-                        </ModalProvider>
-                      </InboxProvider>
-                    </ActionSheetBgProvider>
-                  </ActionSheetProvider>
-                </NavigationProvider>
-              </TabScrollProvider>
-            </SettingsProvider>
-          </SubscriptionsProvider>
-        </AccountProvider>
-      </SafeAreaProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <SafeAreaProvider>
+          <AccountProvider>
+            <SubscriptionsProvider>
+              <SettingsProvider>
+                <TabScrollProvider>
+                  <NavigationProvider>
+                    <ActionSheetProvider>
+                      <ActionSheetBgProvider>
+                        <InboxProvider>
+                          <ModalProvider>
+                            <MediaViewerProvider>
+                              <SubredditProvider>
+                                <StartupModalProvider>
+                                  <SubscribeToHydra />
+                                  <Tabs />
+                                </StartupModalProvider>
+                              </SubredditProvider>
+                            </MediaViewerProvider>
+                          </ModalProvider>
+                        </InboxProvider>
+                      </ActionSheetBgProvider>
+                    </ActionSheetProvider>
+                  </NavigationProvider>
+                </TabScrollProvider>
+              </SettingsProvider>
+            </SubscriptionsProvider>
+          </AccountProvider>
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
     )
   );
 }

components/Modals/QuickSubredditSearch.tsx

@@ -99,6 +99,7 @@ export default function QuickSubredditSearch({
 
   return (
     <Animated.View
+      pointerEvents={show ? "auto" : "none"}
       style={[
         styles.container,
         {

contexts/ActionSheetBgProvider.tsx

@@ -27,15 +27,16 @@ export function ActionSheetBgProvider({ children }: React.PropsWithChildren) {
 
   return (
     <ActionSheetBgContext.Provider value={value}>
-      <Animated.View
-        style={[
-          styles.actionSheetBg,
-          {
-            opacity: actionSheetBgOpacity,
-            pointerEvents: isActionSheetShowing ? "auto" : "none",
-          },
-        ]}
-      />
+      {isActionSheetShowing && (
+        <Animated.View
+          style={[
+            styles.actionSheetBg,
+            {
+              opacity: actionSheetBgOpacity,
+            },
+          ]}
+        />
+      )}
       {children}
     </ActionSheetBgContext.Provider>
   );

contexts/ModalContext.tsx

@@ -1,12 +1,5 @@
-import {
-  ReactNode,
-  createContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { Animated, StyleSheet, useWindowDimensions } from "react-native";
+import { ReactNode, createContext, useMemo, useState } from "react";
+import { StyleSheet, View } from "react-native";
 
 type ModalContextType = {
   setModal: (modal?: ReactNode) => void;
@@ -20,16 +13,6 @@ export const ModalContext = createContext(initialModalContext);
 
 export function ModalProvider({ children }: React.PropsWithChildren) {
   const [modal, setModal] = useState<ReactNode>(null);
-  const { height } = useWindowDimensions();
-  const modalPosition = useRef(new Animated.Value(height)).current;
-
-  useEffect(() => {
-    Animated.spring(modalPosition, {
-      toValue: modal ? 0 : height,
-      bounciness: 2,
-      useNativeDriver: true,
-    }).start();
-  }, [modal]);
 
   /**
    * Since this provider only provides functions, we need to memoize the value
@@ -44,28 +27,19 @@ export function ModalProvider({ children }: React.PropsWithChildren) {
 
   return (
     <ModalContext.Provider value={value}>
-      <Animated.View
-        style={[
-          styles.modalContainer,
-          {
-            transform: [
-              {
-                translateY: modalPosition,
-              },
-            ],
-          },
-        ]}
-      >
-        {modal}
-      </Animated.View>
       {children}
+      {modal && <View style={styles.modalContainer}>{modal}</View>}
     </ModalContext.Provider>
   );
 }
 
 const styles = StyleSheet.create({
   modalContainer: {
-    position: "relative",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     zIndex: 1000,
   },
 });

contexts/StackFutureContext.tsx

@@ -16,7 +16,7 @@ import {
   useEffect,
   useRef,
 } from "react";
-import { Animated, useWindowDimensions } from "react-native";
+import { Animated, Platform, useWindowDimensions } from "react-native";
 
 import { StackParamsList } from "../app/stack";
 
@@ -66,46 +66,50 @@ export function StackFutureProvider({
         clearFuture: () => (futureRoutes.current = []),
       }}
     >
-      <Animated.View
-        style={{
-          width: "100%",
-          height: "100%",
-        }}
-        onStartShouldSetResponderCapture={(e) => {
-          gestureStart.current = {
-            x: e.nativeEvent.pageX,
-            y: e.nativeEvent.pageY,
-          };
-          return false;
-        }}
-        onMoveShouldSetResponder={() =>
-          !!gestureStart.current &&
-          width - gestureStart.current.x < 30 &&
-          futureRoutes.current.length > 0
-        }
-        onResponderMove={(e) => {
-          if (!gestureStart.current) return false;
-          const deltaX = gestureStart.current.x - e.nativeEvent.pageX;
-          const deltaY = e.nativeEvent.pageY - gestureStart.current.y;
-          const angleDegrees = Math.abs(
-            Math.atan2(deltaY, deltaX) * (180 / Math.PI),
-          );
-          if (angleDegrees > 15 && deltaY > 30) {
-            gestureStart.current = null;
+      {Platform.OS === "android" ? (
+        children
+      ) : (
+        <Animated.View
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+          onStartShouldSetResponderCapture={(e) => {
+            gestureStart.current = {
+              x: e.nativeEvent.pageX,
+              y: e.nativeEvent.pageY,
+            };
             return false;
+          }}
+          onMoveShouldSetResponder={() =>
+            !!gestureStart.current &&
+            width - gestureStart.current.x < 30 &&
+            futureRoutes.current.length > 0
           }
-          if (deltaX > 15 && angleDegrees < 15) {
-            const popped = futureRoutes.current.pop();
-            if (!popped) return false;
-            navigation.push(popped.name as any, popped.params as any);
-            gestureStart.current = null;
-            return true;
-          }
-          return false;
-        }}
-      >
-        {children}
-      </Animated.View>
+          onResponderMove={(e) => {
+            if (!gestureStart.current) return false;
+            const deltaX = gestureStart.current.x - e.nativeEvent.pageX;
+            const deltaY = e.nativeEvent.pageY - gestureStart.current.y;
+            const angleDegrees = Math.abs(
+              Math.atan2(deltaY, deltaX) * (180 / Math.PI),
+            );
+            if (angleDegrees > 15 && deltaY > 30) {
+              gestureStart.current = null;
+              return false;
+            }
+            if (deltaX > 15 && angleDegrees < 15) {
+              const popped = futureRoutes.current.pop();
+              if (!popped) return false;
+              navigation.push(popped.name as any, popped.params as any);
+              gestureStart.current = null;
+              return true;
+            }
+            return false;
+          }}
+        >
+          {children}
+        </Animated.View>
+      )}
     </StackFutureContext.Provider>
   );
 }