Upgrade Example to RN 0.64 (#83)

* ReactLogger: Also log function

* Run SwiftFormat & SwiftLint in example project

* Upgrade to RN 0.64 1/2

* Update lockfiles

* Upgrade a few packages

* index.tsx -> index.js

* Upgrade docusaurus

* Fix line length violation

* Update CameraView.swift

* Update gradle plugin

* Fix example to prefer higher res cameras

* Remove unused log line

* Update App.tsx

example/src/App.tsx

@@ -9,8 +9,8 @@ import {
   TapGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
 import { Navigation, NavigationFunctionComponent } from 'react-native-navigation';
-import type { CameraDevice, CameraDeviceFormat, CameraRuntimeError, PhotoFile, VideoFile } from 'react-native-vision-camera';
-import { Camera, frameRateIncluded, sortDevices, sortFormatsByResolution, filterFormatsByAspectRatio } from 'react-native-vision-camera';
+import type { CameraDeviceFormat, CameraRuntimeError, PhotoFile, VideoFile } from 'react-native-vision-camera';
+import { Camera, frameRateIncluded, sortFormatsByResolution, filterFormatsByAspectRatio } from 'react-native-vision-camera';
 import { useIsScreenFocused } from './hooks/useIsScreenFocused';
 import { CONTENT_SPACING, MAX_ZOOM_FACTOR, SAFE_AREA_PADDING } from './Constants';
 import Reanimated, { Extrapolate, interpolate, useAnimatedGestureHandler, useAnimatedProps, useSharedValue } from 'react-native-reanimated';
@@ -23,6 +23,7 @@ import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import { useSelector } from 'pipestate';
 import { FpsSelector } from './state/selectors';
+import { useCameraDevice } from './hooks/useCameraDevice';
 
 // TODO: Remove once https://github.com/software-mansion/react-native-reanimated/pull/1697 gets merged
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -51,8 +52,8 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
   const [enableNightMode, setEnableNightMode] = useState(false);
 
   // camera format settings
-  const [devices, setDevices] = useState<CameraDevice[]>([]); // All available camera devices, sorted by "best device" (descending)
-  const device = useMemo<CameraDevice | undefined>(() => devices.find((d) => d.position === cameraPosition), [cameraPosition, devices]);
+  const devices = useCameraDevice();
+  const device = devices[cameraPosition];
   const formats = useMemo<CameraDeviceFormat[]>(() => {
     if (device?.formats == null) return [];
     const filtered = filterFormatsByAspectRatio(device.formats);
@@ -83,7 +84,7 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
     return targetFps;
   }, [device?.supportsLowLightBoost, enableHdr, enableNightMode, formats, targetFps]);
 
-  const supportsCameraFlipping = useMemo(() => devices.some((d) => d.position === 'back') && devices.some((d) => d.position === 'front'), [devices]);
+  const supportsCameraFlipping = useMemo(() => devices.back != null && devices.front != null, [devices.back, devices.front]);
   const supportsFlash = device?.hasFlash ?? false;
   const supportsHdr = useMemo(() => formats.some((f) => f.supportsVideoHDR), [formats]);
   const canToggleNightMode = enableNightMode
@@ -181,29 +182,10 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
   //#endregion
 
   //#region Effects
-  useEffect(() => {
-    const loadDevices = async (): Promise<void> => {
-      try {
-        const availableCameraDevices = await Camera.getAvailableCameraDevices();
-        console.log(`Devices: ${availableCameraDevices.map((d) => d.name).join(', ')}`);
-        const sortedDevices = availableCameraDevices.sort(sortDevices);
-        console.debug(`Devices (sorted): ${sortedDevices.map((d) => d.name).join(', ')}`);
-        setDevices(sortedDevices);
-      } catch (e) {
-        console.error('Failed to get available devices!', e);
-      }
-    };
-    loadDevices();
-  }, []);
   useEffect(() => {
     // Run everytime the neutralZoomScaled value changes. (reset zoom when device changes)
     zoom.value = neutralZoomScaled;
   }, [neutralZoomScaled, zoom]);
-
-  useEffect(() => {
-    // Run everytime the camera gets set to isActive = false. (reset zoom when tab switching)
-    if (!isActive) zoom.value = neutralZoomScaled;
-  }, [neutralZoomScaled, isActive, zoom]);
   //#endregion
 
   //#region Pinch to Zoom Gesture

example/src/hooks/useCameraDevice.ts

@@ -0,0 +1,45 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Camera, CameraDevice, sortDevices } from 'react-native-vision-camera';
+
+/**
+ * A custom hook that's just like `useCameraDevices` from VisionCamera, but ignores `'telephoto-camera'` devices since those often have poor quality.
+ */
+export const useCameraDevice = (): {
+  front: CameraDevice | undefined;
+  back: CameraDevice | undefined;
+} => {
+  const [backDevice, setBackDevice] = useState<CameraDevice>();
+  const [frontDevice, setFrontDevice] = useState<CameraDevice>();
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadDevice = async (): Promise<void> => {
+      const devices = await Camera.getAvailableCameraDevices();
+      if (!isMounted) return;
+
+      // use any device
+      const filtered = devices.filter((d) => !d.devices.includes('telephoto-camera'));
+      const sorted = filtered.sort(sortDevices);
+      const back = sorted.find((d) => d.position === 'back');
+      const front = sorted.find((d) => d.position === 'front');
+      setBackDevice(back);
+      setFrontDevice(front);
+
+      console.log(`Devices: ${sorted.map((d) => d.name).join(', ')}`);
+    };
+    loadDevice();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return useMemo(
+    () => ({
+      back: backDevice,
+      front: frontDevice,
+    }),
+    [backDevice, frontDevice],
+  );
+};