Replace custom KeyboardShift with react-native-avoid-softinput (#50)

* feat: replace custom KeyboardShift with AvoidSoftInput

* deps: remove react-native-reanimated

* build: remove react-native-reanimated from metro

* fix: testId on Android, test mock for AvoidSoftInput

* fix: AvoidSoftInput on Android hiding add photos button

* fix: set color scheme when app loads

* feat: loading spinner when selecting photos

* test: fix GPS watch life cycle sub

* chore: remove KeyboardShift

* test: fix warning from LocationEmitter unsubscribe

apps/mobile/App.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Appearance } from "react-native";
 import { StatusBar } from "expo-status-bar";
 import "react-native-gesture-handler";
 import { NativeBaseProvider } from "./src/providers";
@@ -8,6 +9,7 @@ import {
   useAlgaeRecords,
   AlgaeRecordsContext,
 } from "./src/hooks/useAlgaeRecords";
+import { getAppSettings } from "./AppSettings";
 
 export function App() {
   const [algaeRecords] = useAlgaeRecords();
@@ -24,6 +26,8 @@ export function App() {
     return null;
   }
 
+  Appearance.setColorScheme(getAppSettings().colorMode);
+
   return (
     <AlgaeRecordsContext.Provider value={algaeRecords}>
       <NativeBaseProvider>

apps/mobile/app.json

@@ -30,6 +30,7 @@
       }
     },
     "android": {
+      "softwareKeyboardLayoutMode": "resize",
       "package": "com.livingsnowproject.livingsnowproject",
       "versionCode": 1,
       "permissions": [

apps/mobile/babel.config.js

@@ -2,6 +2,5 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ["babel-preset-expo", "@babel/preset-typescript"],
-    plugins: ["react-native-reanimated/plugin"],
   };
 };

apps/mobile/jesttest.setup.js

@@ -7,6 +7,18 @@ jest.mock("@react-native-community/netinfo", () => mockRNCNetInfo);
 
 jest.mock("@react-native-async-storage/async-storage", () => mockAsyncStorage);
 
+jest.mock("react-native-avoid-softinput", () => {
+  const mock = require("react-native-avoid-softinput/jest/mock");
+
+  /**
+   * If needed, override mock like so:
+   *
+   * return Object.assign(mock, { useSoftInputState: jest.fn(() => ({ isSoftInputShown: true, softInputHeight: 300 })) });
+   */
+
+  return mock;
+});
+
 // useNativeDriver for animations doesn't exist in test environment
 // https://github.com/ptomasroos/react-native-scrollable-tab-view/issues/642
 jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");

apps/mobile/package.json

@@ -47,11 +47,11 @@
     "react-dom": "18.2.0",
     "react-is": "^17.0.1",
     "react-native": "0.74.1",
+    "react-native-avoid-softinput": "^5.0.0",
     "react-native-calendars": "1.1293.0",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "~1.11.0",
     "react-native-picker-select": "^8.0.4",
-    "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",

apps/mobile/src/components/forms/ExpoPhotoSelector.tsx

@@ -15,15 +15,20 @@ type ExpoPhotoSelectorProps = {
   recordId: string;
   photos: SelectedPhoto[];
   setSelectedPhotos: (selectedPhotos: SelectedPhoto[]) => void;
+  setStatus: (status: "Idle" | "Loading") => void;
 };
 
 export function ExpoPhotoSelector({
   recordId,
   photos,
   setSelectedPhotos,
+  setStatus,
 }: ExpoPhotoSelectorProps) {
   const toast = useToast();
+
   const handleOnPress = async () => {
+    setStatus("Loading");
+
     try {
       const permission = await MediaLibrary.getPermissionsAsync();
 
@@ -44,7 +49,6 @@ export function ExpoPhotoSelector({
 
       // TODO: should "cancel" unselect all? there is no way to go back to 0 selected after first selection
       if (!result.canceled) {
-        // TODO: start an ActivityIndicator
         const assets: MediaLibrary.Asset[] = [];
 
         await result.assets.reduce(async (promise, current) => {
@@ -87,6 +91,8 @@ export function ExpoPhotoSelector({
           message="We ran into an error preparing photos for upload."
         />
       );
+    } finally {
+      setStatus("Idle");
     }
   };
 

apps/mobile/src/components/forms/GpsCoordinatesInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useRef } from "react";
+import React, { useCallback, useEffect, useReducer, useRef } from "react";
 import { Pressable, View } from "native-base";
 import {
   Accuracy,
@@ -131,19 +131,16 @@ export function GpsCoordinatesInput({
     Number(coordinate.toFixed(precision));
 
   // watch location callback
-  const onCoordinatesWatch = ({
-    latitude,
-    longitude,
-  }: {
-    latitude: number;
-    longitude: number;
-  }) => {
-    const lat = clipCoordinate(latitude);
-    const long = clipCoordinate(longitude);
-
-    dispatch({ type: "UPDATE", displayValue: `${lat}, ${long}` });
-    setCoordinates({ latitude: lat, longitude: long });
-  };
+  const onCoordinatesWatch = useCallback(
+    ({ latitude, longitude }: { latitude: number; longitude: number }) => {
+      const lat = clipCoordinate(latitude);
+      const long = clipCoordinate(longitude);
+
+      dispatch({ type: "UPDATE", displayValue: `${lat}, ${long}` });
+      setCoordinates({ latitude: lat, longitude: long });
+    },
+    [dispatch, setCoordinates]
+  );
 
   // typed user input
   const onCoordinatesChanged = (value: string) => {
@@ -200,9 +197,7 @@ export function GpsCoordinatesInput({
     })();
 
     return stopWatchPosition;
-    // only subscribe to the location subscription on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [usingGps, onCoordinatesWatch]);
 
   const enableManualEntry = () => {
     stopWatchPosition();

apps/mobile/src/components/forms/index.ts

@@ -2,7 +2,6 @@ export * from "./CustomTextInput";
 export * from "./DateSelector";
 export * from "./ExpoPhotoSelector";
 export * from "./GpsCoordinatesInput";
-export * from "./KeyboardShift";
 export * from "./PhotoSelector";
 export * from "./TextArea";
 export * from "./TypeSelector";

apps/mobile/src/components/screens/TimelineRow.tsx

@@ -44,7 +44,7 @@ export function TimelineRow({ record, photos, actionsMenu }: TimelineRowProps) {
   return (
     <>
       <Pressable
-        testID={record.id}
+        testID={`${record.id}`}
         onPress={() =>
           navigate("RecordDetails", { record: JSON.stringify(recordDetail) })
         }