feat(mobile): lightbox (#3882)

* feat(mobile): lightbox

* chore: auto-fix linting and formatting issues

* feat: enhance back handler to close lightbox when active

* feat: integrate Lightbox component and move SafeAreaProvider to RootProviders

* refactor: update renderItem function to use destructured props

* feat: add Android manifest plugin to enable large heap size

* fix: add rounded corners to AspectRatioImage

* feat: set priority to high for image loading in ImageItem component

* chore: remove unused zIndex from ImageViewing

* feat: update ImageDefaultHeader and LightboxFooter for improved layout

* chore: simplify renderItem function signature in PagerList and Subscriptions components

* refactor: update galeria

* chore: tweak component

* feat: integrate lightbox functionality for media previews

Author: lawvs

apps/mobile/app.config.ts

@@ -131,6 +131,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
       ],
 
       require("./plugins/with-gradle-jvm-heap-size-increase.js"),
+      require("./plugins/with-android-manifest-plugin.js"),
       "expo-secure-store",
       "@react-native-firebase/app",
       "@react-native-firebase/crashlytics",

apps/mobile/plugins/with-android-manifest-plugin.js

@@ -0,0 +1,13 @@
+const { withAndroidManifest } = require("expo/config-plugins")
+
+// Ported from https://github.com/bluesky-social/social-app/blob/a5e25a7a16cdcde64628e942c073a119bc1d7a1e/plugins/withAndroidManifestPlugin.js
+module.exports = function withAndroidManifestPlugin(appConfig) {
+  return withAndroidManifest(appConfig, (decoratedAppConfig) => {
+    try {
+      decoratedAppConfig.modResults.manifest.application[0].$["android:largeHeap"] = "true"
+    } catch (e) {
+      console.error(`withAndroidManifestPlugin failed`, e)
+    }
+    return decoratedAppConfig
+  })
+}

apps/mobile/src/components/lightbox/ImageViewing/@types/index.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { TransformsStyle } from "react-native"
+import type { MeasuredDimensions } from "react-native-reanimated"
+
+export type Dimensions = {
+  width: number
+  height: number
+}
+
+export type Position = {
+  x: number
+  y: number
+}
+
+export type ImageSource = {
+  uri: string
+  dimensions: Dimensions | null
+  thumbUri: string
+  thumbDimensions: Dimensions | null
+  thumbRect: MeasuredDimensions | null
+  alt?: string
+  type: "image" | "circle-avi" | "rect-avi"
+}
+
+export type Transform = Exclude<TransformsStyle["transform"], string | undefined>

apps/mobile/src/components/lightbox/ImageViewing/components/ImageDefaultHeader.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { ViewStyle } from "react-native"
+import { StyleSheet, TouchableOpacity, View } from "react-native"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+
+import { CloseCuteReIcon } from "@/src/icons/close_cute_re"
+
+type Props = {
+  onRequestClose: () => void
+}
+
+const ImageDefaultHeader = ({ onRequestClose }: Props) => {
+  const insets = useSafeAreaInsets()
+  return (
+    <View style={[styles.root, { marginTop: insets.top, marginRight: insets.right }]}>
+      <TouchableOpacity
+        style={[styles.closeButton, styles.blurredBackground]}
+        onPress={onRequestClose}
+        hitSlop={16}
+        accessibilityRole="button"
+        accessibilityLabel={`Close image`}
+        accessibilityHint={`Closes viewer for header image`}
+        onAccessibilityEscape={onRequestClose}
+      >
+        <CloseCuteReIcon color="#fff" />
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: "flex-end",
+    pointerEvents: "box-none",
+  },
+  closeButton: {
+    marginRight: 10,
+    marginTop: 10,
+    width: 44,
+    height: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 22,
+    backgroundColor: "#00000077",
+  },
+  blurredBackground: {
+    backdropFilter: "blur(10px)",
+    WebkitBackdropFilter: "blur(10px)",
+  } as ViewStyle,
+})
+
+export default ImageDefaultHeader