diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
index 9ce3f52420..6e045ede34 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {memo, useState} from 'react'
 import {ActivityIndicator, StyleSheet} from 'react-native'
 import {
   Gesture,
@@ -472,4 +472,4 @@ function withClampedSpring(value: any) {
   return withSpring(value, {overshootClamping: true})
 }
 
-export default React.memo(ImageItem)
+export default memo(ImageItem)
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
index 44907c8075..b4ac22d960 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -6,8 +6,8 @@
  *
  */
 
-import React, {useState} from 'react'
-import {ActivityIndicator, StyleSheet} from 'react-native'
+import {memo, useState} from 'react'
+import {ActivityIndicator} from 'react-native'
 import {
   Gesture,
   GestureDetector,
@@ -26,6 +26,7 @@ import Animated, {
 import {useSafeAreaFrame} from 'react-native-safe-area-context'
 import {Image} from 'expo-image'
 
+import {atoms as a} from '#/alf'
 import {
   type Dimensions as ImageDimensions,
   type ImageSource,
@@ -230,7 +231,11 @@ const ImageItem = ({
         animatedProps={scrollViewProps}
         centerContent>
         {showLoader && (
-          <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
+          <ActivityIndicator
+            size="small"
+            color="#FFF"
+            style={[a.absolute, a.inset_0]}
+          />
         )}
         <Animated.View style={imageCropStyle}>
           <Animated.View style={imageStyle}>
@@ -261,19 +266,6 @@ const ImageItem = ({
   )
 }
 
-const styles = StyleSheet.create({
-  loading: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  image: {
-    flex: 1,
-  },
-})
-
 const getZoomRectAfterDoubleTap = (
   imageAspect: number | undefined,
   touchX: number,
@@ -363,4 +355,4 @@ const getZoomRectAfterDoubleTap = (
   }
 }
 
-export default React.memo(ImageItem)
+export default memo(ImageItem)
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
index c33151723b..767fcadc20 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
@@ -1,6 +1,6 @@
 // default implementation fallback for web
 
-import React from 'react'
+import {memo} from 'react'
 import {View} from 'react-native'
 import {type PanGesture} from 'react-native-gesture-handler'
 import {type SharedValue} from 'react-native-reanimated'
@@ -44,4 +44,4 @@ const ImageItem = (_props: Props) => {
   return <View />
 }
 
-export default React.memo(ImageItem)
+export default memo(ImageItem)