Add Browser component with progress and cancellation (#725)

* Make mobile app address editable * Add Browser component with progress, canceling --------- Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>
Howdju · Aug 30, 2024 · 143382b · 143382b
1 parent c88953d
commit 143382b
Show file tree

Hide file tree

Showing 6 changed files with 1,744 additions and 1,275 deletions.
diff --git a/howdju-mobile-app/package.json b/howdju-mobile-app/package.json
@@ -6,12 +6,12 @@
     "android": "react-native run-android",
     "android-release": "react-native run-android --variant release",
     "bundle": "react-native webpack-bundle",
-    "check": "typecheck && lint && check-format && test",
+    "check": "yarn run typecheck && yarn run lint && yarn run check-format && yarn run test",
     "check-format": "yarn run prettier --check .",
     "debugger": "react-devtools",
     "fix-format": "yarn run lint --fix && yarn run prettier --write .",
     "install-pods": "npx pod-install",
-    "ios": "react-native run-ios --simulator='iPhone 14'",
+    "ios": "react-native run-ios --simulator='iPhone 15'",
     "ios-release": "react-native run-ios --configuration Release",
     "ios-release-device": "react-native run-ios --configuration Release --device ${0}",
     "lint": "eslint --ignore-path=.gitignore .",
@@ -36,8 +36,10 @@
     "react-native-safe-area-context": "^4.5.0",
     "react-native-screens": "^3.15.0",
     "react-native-share-menu": "github:Howdju/react-native-share-menu#ff9c65e456cf80b23b881ed2e1247f14337260ec",
+    "react-native-url-polyfill": "^2.0.0",
     "react-native-vector-icons": "^9.2.0",
     "react-native-webview": "^11.15.0",
+    "use-deep-compare-effect": "^1.8.1",
     "validator": "^13.9.0"
   },
   "devDependencies": {

diff --git a/howdju-mobile-app/src/App.tsx b/howdju-mobile-app/src/App.tsx
@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { useColorScheme } from "react-native";
+import {
+  useColorScheme,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+} from "react-native";
 import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import ShareMenu, { ShareResponse } from "react-native-share-menu";
@@ -42,7 +47,7 @@ const App = (): JSX.Element => {
     };
   }, [handleShare]);
 
-  const items = shareResponse?.items;
+  const shareDataItems = shareResponse?.items;
   const extraData = shareResponse?.extraData as Record<string, unknown>;
   const isDark = useColorScheme() === "dark";
   const theme = isDark ? darkTheme : lightTheme;
@@ -59,78 +64,91 @@ const App = (): JSX.Element => {
     <PaperProvider theme={theme}>
       <AppSettings>
         <SafeAreaProvider>
-          <NavigationContainer
-            theme={isDark ? darkNavigationTheme : lightNavigationTheme}
+          <KeyboardAvoidingView
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            style={styles.container}
           >
-            <Tab.Navigator>
-              {/* TODO(62): ensure using a render callback does not introduce
-            performance issues
-            https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props
-        */}
-              <Tab.Screen
-                name="Browser"
-                options={{
-                  tabBarLabel: "Browser",
-                  headerShown: false,
-                  tabBarIcon: function TabBarIcon({ color, size, focused }) {
-                    return (
-                      <MaterialCommunityIcons
-                        name="web"
-                        color={color}
-                        size={size}
-                        style={{ fontWeight: focused ? "bold" : "normal" }}
-                      />
-                    );
-                  },
-                }}
-              >
-                {(props) => <BrowserScreen {...props} items={items} />}
-              </Tab.Screen>
-              <Tab.Screen
-                name="ShareDebug"
-                options={{
-                  tabBarLabel: "Debug",
-                  tabBarIcon: function TabBarIcon({ color, size, focused }) {
-                    return (
-                      <MaterialCommunityIcons
-                        name={focused ? "bug" : "bug-outline"}
-                        color={color}
-                        size={size}
-                      />
-                    );
-                  },
-                }}
-              >
-                {(props) => (
-                  <ShareDebugScreen
-                    {...props}
-                    items={items}
-                    extraData={extraData}
-                  />
-                )}
-              </Tab.Screen>
-              <Tab.Screen
-                name="Settings"
-                component={SettingsScreen}
-                options={{
-                  tabBarLabel: "Settings",
-                  tabBarIcon: function TabBarIcon({ color, size, focused }) {
-                    return (
-                      <MaterialCommunityIcons
-                        name={focused ? "cog" : "cog-outline"}
-                        color={color}
-                        size={size}
-                      />
-                    );
-                  },
-                }}
-              />
-            </Tab.Navigator>
-          </NavigationContainer>
+            <NavigationContainer
+              theme={isDark ? darkNavigationTheme : lightNavigationTheme}
+            >
+              <Tab.Navigator>
+                {/* TODO(62): ensure using a render callback does not introduce
+                    performance issues
+                    https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props
+                */}
+                <Tab.Screen
+                  name="Browser"
+                  options={{
+                    tabBarLabel: "Browser",
+                    headerShown: false,
+                    tabBarIcon: function TabBarIcon({ color, size, focused }) {
+                      return (
+                        <MaterialCommunityIcons
+                          name="web"
+                          color={color}
+                          size={size}
+                          style={{ fontWeight: focused ? "bold" : "normal" }}
+                        />
+                      );
+                    },
+                  }}
+                >
+                  {(props) => (
+                    <BrowserScreen {...props} shareDataItems={shareDataItems} />
+                  )}
+                </Tab.Screen>
+                <Tab.Screen
+                  name="ShareDebug"
+                  options={{
+                    tabBarLabel: "Debug",
+                    tabBarIcon: function TabBarIcon({ color, size, focused }) {
+                      return (
+                        <MaterialCommunityIcons
+                          name={focused ? "bug" : "bug-outline"}
+                          color={color}
+                          size={size}
+                        />
+                      );
+                    },
+                  }}
+                >
+                  {(props) => (
+                    <ShareDebugScreen
+                      {...props}
+                      items={shareDataItems}
+                      extraData={extraData}
+                    />
+                  )}
+                </Tab.Screen>
+                <Tab.Screen
+                  name="Settings"
+                  component={SettingsScreen}
+                  options={{
+                    tabBarLabel: "Settings",
+                    tabBarIcon: function TabBarIcon({ color, size, focused }) {
+                      return (
+                        <MaterialCommunityIcons
+                          name={focused ? "cog" : "cog-outline"}
+                          color={color}
+                          size={size}
+                        />
+                      );
+                    },
+                  }}
+                />
+              </Tab.Navigator>
+            </NavigationContainer>
+          </KeyboardAvoidingView>
         </SafeAreaProvider>
       </AppSettings>
     </PaperProvider>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
 export default App;