Gate lightbox neighbor mounts on open-animation completion
Window stays at 0 (active image only) until openProgress reaches 1, then expands to ±1. Reuses the same shared-value gate as the existing orientation-unlock reaction so the heaviest decode work happens after the open transition rather than during it.
This commit is contained in:
@@ -249,9 +249,22 @@ function ImageView({
|
|||||||
const [isDragging, setIsDragging] = useState(false)
|
const [isDragging, setIsDragging] = useState(false)
|
||||||
const [showControls, setShowControls] = useState(true)
|
const [showControls, setShowControls] = useState(true)
|
||||||
const [isAltExpanded, setIsAltExpanded] = useState(false)
|
const [isAltExpanded, setIsAltExpanded] = useState(false)
|
||||||
|
const [hasFullyOpened, setHasFullyOpened] = useState(false)
|
||||||
const dismissSwipeTranslateY = useSharedValue(0)
|
const dismissSwipeTranslateY = useSharedValue(0)
|
||||||
const isFlyingAway = useSharedValue(false)
|
const isFlyingAway = useSharedValue(false)
|
||||||
|
|
||||||
|
// Hold the neighbor window at 0 until the open animation completes, so we
|
||||||
|
// only decode the active image during the most memory-constrained moment.
|
||||||
|
// Mirrors the orientation-unlock gate below.
|
||||||
|
useAnimatedReaction(
|
||||||
|
() => openProgress.get() === 1,
|
||||||
|
isOpen => {
|
||||||
|
if (isOpen) {
|
||||||
|
runOnJS(setHasFullyOpened)(true)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
const containerStyle = useAnimatedStyle(() => {
|
const containerStyle = useAnimatedStyle(() => {
|
||||||
if (openProgress.get() < 1) {
|
if (openProgress.get() < 1) {
|
||||||
return {
|
return {
|
||||||
@@ -415,7 +428,7 @@ function ImageView({
|
|||||||
style={styles.pager}>
|
style={styles.pager}>
|
||||||
{images.map((imageSrc, i) => (
|
{images.map((imageSrc, i) => (
|
||||||
<View key={`${i}-${imageSrc.uri}`}>
|
<View key={`${i}-${imageSrc.uri}`}>
|
||||||
{Math.abs(i - imageIndex) <= 1 ? (
|
{Math.abs(i - imageIndex) <= (hasFullyOpened ? 1 : 0) ? (
|
||||||
<LightboxImage
|
<LightboxImage
|
||||||
onTap={onTap}
|
onTap={onTap}
|
||||||
onZoom={onZoom}
|
onZoom={onZoom}
|
||||||
|
|||||||
Reference in New Issue
Block a user