Android lightbox minor perf improvement (#9274)

* minor perf improvement on android for lightbox

* Use correct `cachePolicy` when prefetching lightbox images (#9275)

* use `memory` cachePolicy when prefetching

* use `memory` cache policy on iOS lightbox images
This commit is contained in:
Samuel Newman
2025-11-03 19:18:26 +02:00
committed by GitHub
parent ca505fbbd2
commit feab782ba9
3 changed files with 16 additions and 4 deletions
+4 -1
View File
@@ -64,7 +64,10 @@ export function ImageEmbed({
} }
const onPressIn = (_: number) => { const onPressIn = (_: number) => {
InteractionManager.runAfterInteractions(() => { InteractionManager.runAfterInteractions(() => {
Image.prefetch(items.map(i => i.uri)) Image.prefetch(
items.map(i => i.uri),
'memory',
)
}) })
} }
@@ -252,6 +252,7 @@ const ImageItem = ({
onLoad({width: e.source.width, height: e.source.height}) onLoad({width: e.source.width, height: e.source.height})
} }
} }
cachePolicy="memory"
/> />
</Animated.View> </Animated.View>
</Animated.View> </Animated.View>
+11 -3
View File
@@ -39,7 +39,7 @@ export type ListProps<ItemT = any> = Omit<
sideBorders?: boolean sideBorders?: boolean
progressViewOffset?: number progressViewOffset?: number
} }
export type ListRef = React.MutableRefObject<FlatList_INTERNAL | null> export type ListRef = React.RefObject<FlatList_INTERNAL | null>
const SCROLLED_DOWN_LIMIT = 200 const SCROLLED_DOWN_LIMIT = 200
@@ -61,7 +61,7 @@ let List = React.forwardRef<ListMethods, ListProps>(
const isScrolledDown = useSharedValue(false) const isScrolledDown = useSharedValue(false)
const t = useTheme() const t = useTheme()
const dedupe = useDedupe(400) const dedupe = useDedupe(400)
const {activeLightbox} = useLightbox() const scrollsToTop = useAllowScrollToTop()
function handleScrolledDownChange(didScrollDown: boolean) { function handleScrolledDownChange(didScrollDown: boolean) {
onScrolledDownChange?.(didScrollDown) onScrolledDownChange?.(didScrollDown)
@@ -168,7 +168,7 @@ let List = React.forwardRef<ListMethods, ListProps>(
contentOffset={contentOffset} contentOffset={contentOffset}
refreshControl={refreshControl} refreshControl={refreshControl}
onScroll={scrollHandler} onScroll={scrollHandler}
scrollsToTop={!activeLightbox} scrollsToTop={scrollsToTop}
scrollEventThrottle={1} scrollEventThrottle={1}
style={style} style={style}
// @ts-expect-error FlatList_INTERNAL ref type is wrong -sfn // @ts-expect-error FlatList_INTERNAL ref type is wrong -sfn
@@ -181,3 +181,11 @@ List.displayName = 'List'
List = memo(List) List = memo(List)
export {List} export {List}
// We only want to use this context value on iOS because the `scrollsToTop` prop is iOS-only
// removing it saves us a re-render on Android
const useAllowScrollToTop = isIOS ? useAllowScrollToTopIOS : () => undefined
function useAllowScrollToTopIOS() {
const {activeLightbox} = useLightbox()
return !activeLightbox
}