fix: solved some issues about carousel.

app.config.ts

@@ -42,7 +42,7 @@ export default (_: ConfigContext): ExpoConfig => {
             targetSdkVersion: 33,
             minSdkVersion: 23,
             buildToolsVersion: "33.0.0",
-            kotlinVersion: "1.6.21",
+            kotlinVersion: "1.8.0",
           },
           ios: {
             deploymentTarget: "13.0",

index.js

@@ -1,3 +1,4 @@
+import "react-native-gesture-handler";
 import { registerRootComponent } from "expo";
 
 import App from "./App";

modules/native-utils/android/build.gradle

@@ -35,19 +35,11 @@ buildscript {
   }
 }
 
-// Creating sources with comments
-task androidSourcesJar(type: Jar) {
-  classifier = 'sources'
-  from android.sourceSets.main.java.srcDirs
-}
-
 afterEvaluate {
   publishing {
     publications {
       release(MavenPublication) {
         from components.release
-        // Add additional sourcesJar to artifacts
-        artifact(androidSourcesJar)
       }
     }
     repositories {
@@ -59,6 +51,8 @@ afterEvaluate {
 }
 
 android {
+  namespace = "expo.modules.nativeutils"
+
   compileSdkVersion safeExtGet("compileSdkVersion", 33)
 
   compileOptions {
@@ -79,6 +73,12 @@ android {
   lintOptions {
     abortOnError false
   }
+
+  publishing {
+    singleVariant("release") {
+      withSourcesJar()
+    }
+  }
 }
 
 repositories {

modules/native-utils/android/src/main/AndroidManifest.xml

@@ -1,4 +1,4 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="expo.modules.nativeutils">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <queries>
         <intent>
             <action android:name="android.intent.action.VIEW" />

package.json

@@ -165,7 +165,7 @@
     "react-native-quick-base64": "2.0.5",
     "react-native-randombytes": "^3.6.1",
     "react-native-reanimated": "~3.3.0",
-    "react-native-reanimated-carousel": "^3.3.0",
+    "react-native-reanimated-carousel": "^3.5.1",
     "react-native-redash": "^18.1.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",

src/components/ImageGallery/index.tsx

@@ -1,6 +1,8 @@
-import { useState, type FC, useCallback, useEffect } from "react";
+import { useState, type FC, useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Dimensions, StyleSheet } from "react-native";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import type { ICarouselInstance } from "react-native-reanimated-carousel";
 import Carousel from "react-native-reanimated-carousel";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -9,7 +11,7 @@ import { useToastController } from "@tamagui/toast";
 import * as FileSystem from "expo-file-system";
 import { Image } from "expo-image";
 import * as MediaLibrary from "expo-media-library";
-import { Circle, Spinner, Stack } from "tamagui";
+import { Button, Circle, Spinner, Stack } from "tamagui";
 
 import { useGAWithScreenParams } from "@/hooks/ga/use-ga-with-screen-name-params";
 import { useHitSlopSize } from "@/hooks/use-hit-slop-size";
@@ -34,6 +36,7 @@ export const ImageGallery: FC<Props> = (props) => {
   const [isSavingImage, setIsSavingImage] = useState(false);
   const hitSlop = useHitSlopSize(44);
   const gaWithScreenParams = useGAWithScreenParams();
+  const ref = useRef<ICarouselInstance>(null);
 
   useEffect(() => {
     if (isVisible) {
@@ -101,12 +104,16 @@ export const ImageGallery: FC<Props> = (props) => {
     >
       <Stack flex={1}>
         <Carousel
+          ref={ref}
           data={uris}
           width={width}
+          loop={uris.length > 1}
           style={{ flex: 1 }}
           renderItem={({ item, index }) => {
             const priority = index <= 3 ? "high" : "low";
-            return <ImageItem key={index} uri={item} priority={priority} onPress={onClose}/>;
+            return (
+              <ImageItem key={index} uri={item} priority={priority} onPress={onClose}/>
+            );
           }}
         />
       </Stack>
@@ -156,10 +163,12 @@ const ImageItem: FC<{ uri: string; priority: "high" | "low";onPress: () => void
   }, []);
 
   return (
-    <Stack width={width} height={height} alignItems="center" justifyContent="center" onPress={onPress}>
-      <Image onLoadStart={onLoadStart} onLoadEnd={onLoadEnd} priority={priority} source={uri} contentFit="contain" style={styles.modalImage}/>
-      {loading && <Spinner position="absolute"/>}
-    </Stack>
+    <TouchableWithoutFeedback onPress={onPress}>
+      <Stack width={width} height={height} alignItems="center" justifyContent="center">
+        <Image onLoadStart={onLoadStart} onLoadEnd={onLoadEnd} priority={priority} source={uri} contentFit="contain" style={styles.modalImage}/>
+        {loading && <Spinner position="absolute"/>}
+      </Stack>
+    </TouchableWithoutFeedback>
   );
 };
 

src/hooks/ga/use-ga-with-screen-name-params.ts

@@ -1,9 +1,13 @@
+import { useMemo } from "react";
+
 import { useCurrentRoute } from "../use-current-route";
 
 export const useGAWithScreenParams = () => {
-  const currentRoute = useCurrentRoute();
-  return {
-    screen_class: currentRoute?.name,
-    screen_name: currentRoute?.name,
-  };
+  const screenName = useCurrentRoute()?.name;
+  const params = useMemo(() => ({
+    screen_class: screenName,
+    screen_name: screenName,
+  }), [screenName]);
+
+  return params;
 };

src/hooks/use-current-route.ts

@@ -1,11 +1,15 @@
+import { useMemo } from "react";
+
 import { useNavigation } from "@react-navigation/native";
 
 import { getActiveRoute } from "@/utils/get-active-route";
 
 export const useCurrentRoute = () => {
   const navigation = useNavigation();
-  return getActiveRoute(navigation.getState()) as {
-    name: string
-    params: Record<string, unknown>
-  } | undefined;
+  return useMemo(() => {
+    return getActiveRoute(navigation.getState()) as {
+      name: string
+      params: Record<string, unknown>
+    } | undefined;
+  }, [navigation]);
 };

yarn.lock

@@ -15657,10 +15657,10 @@ react-native-randombytes@^3.6.1:
     buffer "^4.9.1"
     sjcl "^1.0.3"
 
-react-native-reanimated-carousel@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.npmjs.org/react-native-reanimated-carousel/-/react-native-reanimated-carousel-3.3.0.tgz"
-  integrity sha512-rprUl+LqWoXyH/8OvHv+m9Kol2YORHEnz7tvRum+o4ciCUCcYnafQBbSqG44RMllOCqm3WOAcuEX5p8a7W3ZZw==
+react-native-reanimated-carousel@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.npmmirror.com/react-native-reanimated-carousel/-/react-native-reanimated-carousel-3.5.1.tgz#3605b9959ffc0aa1c6b8b8736d98f91f46e36b17"
+  integrity sha512-9BBQV6JAYSQm2lV7MFtT4mzapXmW4IZO6s38gfiJL84Jg23ivGB1UykcNQauKgtHyhtW2NuZJzItb1s42lM+hA==
 
 [email protected]:
   version "3.1.0"