Feat/priority caching

example/package.json

@@ -20,7 +20,7 @@
     "react-native-harness": "^1.0.0-alpha.25",
     "react-native-nitro-image": "workspace:*",
     "react-native-nitro-web-image": "workspace:*",
-    "react-native-nitro-modules": "0.35.5",
+    "react-native-nitro-modules": "0.35.7",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-screens": "^4.14.1"
   },

example/src/App.tsx

@@ -7,6 +7,7 @@
 
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { createStaticNavigation } from '@react-navigation/native'
+import { CachePriorityTab } from './CachePriorityTab'
 import { EmptyTab } from './EmptyTab'
 import { FastImageTab } from './FastImageTab'
 import { NitroImageTab } from './NitroImageTab'
@@ -17,6 +18,7 @@ const Tabs = createBottomTabNavigator({
     Empty: EmptyTab,
     FastImage: FastImageTab,
     NitroImage: NitroImageTab,
+    CachePriority: CachePriorityTab,
   },
 })
 const Navigation = createStaticNavigation(Tabs)

example/src/CachePriorityTab.tsx

@@ -0,0 +1,83 @@
+import { useCallback, useMemo, useState } from 'react'
+import { Button, FlatList, StyleSheet, Text, View } from 'react-native'
+import { NitroImage } from 'react-native-nitro-image'
+import { createImageURLs } from './createImageURLs'
+
+export function CachePriorityTab() {
+  const heroURL = useMemo(() => `https://picsum.photos/seed/hero/800`, [])
+  const thumbnailURLs = useMemo(() => createImageURLs(200), [])
+  const [heroNonce, setHeroNonce] = useState(0)
+
+  const thumbnailSources = useMemo(
+    () => thumbnailURLs.map((url) => ({ url })),
+    [thumbnailURLs],
+  )
+
+  const heroSource = useMemo(() => ({ url: heroURL }), [heroURL])
+
+  const renderItem = useCallback(
+    ({ item: source }: { item: { url: string } }) => (
+      <NitroImage
+        image={source}
+        recyclingKey={source.url}
+        style={styles.thumb}
+        resizeMode="cover"
+      />
+    ),
+    [],
+  )
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>Hero (no cachePriority)</Text>
+      <NitroImage
+        key={heroNonce}
+        image={heroSource}
+        cachePriority={2}
+        recyclingKey={`${heroURL}#${heroNonce}`}
+        style={styles.hero}
+        resizeMode="cover"
+      />
+      <View style={styles.buttonRow}>
+        <Text style={styles.counter}>
+          Remounted: {heroNonce} • check logcat: 1 SET, {heroNonce} HITs
+        </Text>
+        <Button
+          title="Reload hero"
+          onPress={() => setHeroNonce((n) => n + 1)}
+        />
+      </View>
+      <Text style={styles.label}>Thumbnails (no cachePriority)</Text>
+      <FlatList
+        numColumns={4}
+        windowSize={3}
+        data={thumbnailSources}
+        keyExtractor={(source) => source.url}
+        renderItem={renderItem}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  buttonRow: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  label: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    fontWeight: '600',
+  },
+  hero: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+  },
+  thumb: {
+    width: '25%',
+    aspectRatio: 1,
+  },
+})

packages/react-native-nitro-image/android/src/main/java/com/margelo/nitro/image/HybridImageView.kt

@@ -49,6 +49,8 @@ class HybridImageView(context: Context): HybridNitroImageViewSpec(), RecyclableV
             field = value
         }
 
+    override var cachePriority: Double? = null
+
     override fun prepareForRecycle() {
         onDisappear()
         imageView.setImageBitmap(null)

packages/react-native-nitro-image/ios/HybridImageView.swift

@@ -37,6 +37,7 @@ class HybridImageView: HybridNitroImageViewSpec {
       resetImageBeforeLoad = recyclingKey != oldValue
     }
   }
+  var cachePriority: Double?
 
   private func updateResizeMode() {
     let mode = resizeMode ?? .cover