Add navigation buttons to media viewer (#187)

Add nav buttons with scroll to index to media viewer

Closes #164

Co-authored-by: Ken-ichi Ueda <kenichi.ueda@gmail.com>

package-lock.json

@@ -16627,7 +16627,6 @@
         "@realm.io/common": "^0.1.4",
         "bindings": "^1.5.0",
         "bson": "4.4.1",
-        "clang-format": "^1.6.0",
         "command-line-args": "^5.1.1",
         "deepmerge": "2.1.0",
         "fs-extra": "^4.0.3",
@@ -16650,7 +16649,7 @@
         "npm": ">=7"
       },
       "peerDependencies": {
-        "react-native": ">=0.66.0"
+        "react-native": ">=0.64"
       },
       "peerDependenciesMeta": {
         "react-native": {
@@ -31800,7 +31799,6 @@
         "@realm.io/common": "^0.1.4",
         "bindings": "^1.5.0",
         "bson": "4.4.1",
-        "clang-format": "^1.6.0",
         "command-line-args": "^5.1.1",
         "deepmerge": "2.1.0",
         "fs-extra": "^4.0.3",

src/components/MediaViewer/HorizontalScroll.js

@@ -2,9 +2,12 @@
 
 import DeletePhotoDialog from "components/SharedComponents/DeletePhotoDialog";
 import PhotoCarousel from "components/SharedComponents/PhotoCarousel";
+import { Pressable } from "components/styledComponents";
 import type { Node } from "react";
 import React, { useRef, useState } from "react";
 import { Dimensions, FlatList } from "react-native";
+import Icon from "react-native-vector-icons/MaterialIcons";
+import colors from "tailwindcss/colors";
 
 import Photo from "../../models/Photo";
 import CustomImageZoom from "./CustomImageZoom";
@@ -25,6 +28,9 @@ const HorizontalScroll = ( {
   const horizontalScroll = useRef( null );
   const [selectedPhotoIndex, setSelectedPhotoIndex] = useState( initialPhotoSelected );
 
+  const atFirstPhoto = selectedPhotoIndex === 0;
+  const atLastPhoto = selectedPhotoIndex === photoUris.length - 1;
+
   const scrollToIndex = index => {
     // when a user taps a photo in the carousel, the UI needs to automatically
     // scroll to the index of the photo they selected
@@ -45,12 +51,12 @@ const HorizontalScroll = ( {
   } );
 
   const handleScrollLeft = index => {
-    if ( selectedPhotoIndex === 0 ) { return; }
+    if ( atFirstPhoto ) { return; }
     setSelectedPhotoIndex( index );
   };
 
   const handleScrollRight = index => {
-    if ( selectedPhotoIndex === photoUris.length - 1 ) { return; }
+    if ( atLastPhoto ) { return; }
     setSelectedPhotoIndex( index );
   };
 
@@ -72,6 +78,16 @@ const HorizontalScroll = ( {
     }
   };
 
+  const handleArrowPressLeft = ( ) => {
+    if ( atFirstPhoto ) { return; }
+    scrollToIndex( selectedPhotoIndex - 1 );
+  };
+
+  const handleArrowPressRight = ( ) => {
+    if ( atLastPhoto ) { return; }
+    scrollToIndex( selectedPhotoIndex + 1 );
+  };
+
   return (
     <>
       <FlatList
@@ -86,6 +102,22 @@ const HorizontalScroll = ( {
         ref={horizontalScroll}
         onMomentumScrollEnd={handleScrollEndDrag}
       />
+      {!atFirstPhoto && (
+        <Pressable
+          className="p-5 absolute top-1/2 -mt-24 left-0"
+          onPress={handleArrowPressLeft}
+        >
+          <Icon name="arrow-back-ios" color={colors.white} size={16} />
+        </Pressable>
+      )}
+      {!atLastPhoto && (
+        <Pressable
+          className="p-5 absolute top-1/2 -mt-24 right-0"
+          onPress={handleArrowPressRight}
+        >
+          <Icon name="arrow-forward-ios" color={colors.white} size={16} />
+        </Pressable>
+      )}
       <PhotoCarousel
         photoUris={photoUris}
         selectedPhotoIndex={selectedPhotoIndex}