acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Use compiler-safe Reanimated get/set APIs (#6391)

Browse Source 
* Convert lightbox to get/set

* Work around software-mansion/react-native-reanimated#6613

* Use get/set in more places

* Port MainScrollProvider to get/set

* Port more to get/set

* Port composer to get/set

* Remove unnecessary thread hops in composer

* Port more things to get/set

* Convert more to get/set, remove redundant runOnJS

* Convert remaining cases to get/set
This commit is contained in:
dan
2024-11-17 15:06:28 +00:00
committed by GitHub
parent d575a2fdaa
commit 474c4eff29
26 changed files with 352 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+41 -40
View File
@@ -87,11 +87,11 @@ const ImageItem = ({
// Note: DO NOT move any logic reading animated values outside this function.
useAnimatedReaction(
() => {
if (pinchScale.value !== 1) {
if (pinchScale.get() !== 1) {
// We're currently pinching.
return true
}
const [, , committedScale] = readTransform(committedTransform.value)
const [, , committedScale] = readTransform(committedTransform.get())
if (committedScale !== 1) {
// We started from a pinched in state.
return true
@@ -147,10 +147,10 @@ const ImageItem = ({
.onStart(e => {
'worklet'
const screenSize = measureSafeArea()
pinchOrigin.value = {
pinchOrigin.set({
x: e.focalX - screenSize.width / 2,
y: e.focalY - screenSize.height / 2,
}
})
})
.onChange(e => {
'worklet'
@@ -160,7 +160,7 @@ const ImageItem = ({
}
// Don't let the picture zoom in so close that it gets blurry.
// Also, like in stock Android apps, don't let the user zoom out further than 1:1.
const [, , committedScale] = readTransform(committedTransform.value)
const [, , committedScale] = readTransform(committedTransform.get())
const maxCommittedScale = Math.max(
MIN_SCREEN_ZOOM,
(imageDimensions.width / screenSize.width) * MAX_ORIGINAL_IMAGE_ZOOM,
@@ -171,20 +171,21 @@ const ImageItem = ({
Math.max(minPinchScale, e.scale),
maxPinchScale,
)
pinchScale.value = nextPinchScale
pinchScale.set(nextPinchScale)
// Zooming out close to the corner could push us out of bounds, which we don't want on Android.
// Calculate where we'll end up so we know how much to translate back to stay in bounds.
const t = createTransform()
prependPan(t, panTranslation.value)
prependPinch(t, nextPinchScale, pinchOrigin.value, pinchTranslation.value)
prependTransform(t, committedTransform.value)
prependPan(t, panTranslation.get())
prependPinch(t, nextPinchScale, pinchOrigin.get(), pinchTranslation.get())
prependTransform(t, committedTransform.get())
const [dx, dy] = getExtraTranslationToStayInBounds(t, screenSize)
if (dx !== 0 || dy !== 0) {
pinchTranslation.value = {
x: pinchTranslation.value.x + dx,
y: pinchTranslation.value.y + dy,
}
const pt = pinchTranslation.get()
pinchTranslation.set({
x: pt.x + dx,
y: pt.y + dy,
})
}
})
.onEnd(() => {
@@ -193,18 +194,18 @@ const ImageItem = ({
let t = createTransform()
prependPinch(
t,
pinchScale.value,
pinchOrigin.value,
pinchTranslation.value,
pinchScale.get(),
pinchOrigin.get(),
pinchTranslation.get(),
)
prependTransform(t, committedTransform.value)
prependTransform(t, committedTransform.get())
applyRounding(t)
committedTransform.value = t
committedTransform.set(t)
// Reset just the pinch.
pinchScale.value = 1
pinchOrigin.value = {x: 0, y: 0}
pinchTranslation.value = {x: 0, y: 0}
pinchScale.set(1)
pinchOrigin.set({x: 0, y: 0})
pinchTranslation.set({x: 0, y: 0})
})
const pan = Gesture.Pan()
@@ -223,29 +224,29 @@ const ImageItem = ({
prependPan(t, nextPanTranslation)
prependPinch(
t,
pinchScale.value,
pinchOrigin.value,
pinchTranslation.value,
pinchScale.get(),
pinchOrigin.get(),
pinchTranslation.get(),
)
prependTransform(t, committedTransform.value)
prependTransform(t, committedTransform.get())
// Prevent panning from going out of bounds.
const [dx, dy] = getExtraTranslationToStayInBounds(t, screenSize)
nextPanTranslation.x += dx
nextPanTranslation.y += dy
panTranslation.value = nextPanTranslation
panTranslation.set(nextPanTranslation)
})
.onEnd(() => {
'worklet'
// Commit just the pan.
let t = createTransform()
prependPan(t, panTranslation.value)
prependTransform(t, committedTransform.value)
prependPan(t, panTranslation.get())
prependTransform(t, committedTransform.get())
applyRounding(t)
committedTransform.value = t
committedTransform.set(t)
// Reset just the pan.
panTranslation.value = {x: 0, y: 0}
panTranslation.set({x: 0, y: 0})
})
const singleTap = Gesture.Tap().onEnd(() => {
@@ -261,11 +262,11 @@ const ImageItem = ({
if (!imageDimensions || !imageAspect) {
return
}
const [, , committedScale] = readTransform(committedTransform.value)
const [, , committedScale] = readTransform(committedTransform.get())
if (committedScale !== 1) {
// Go back to 1:1 using the identity vector.
let t = createTransform()
committedTransform.value = withClampedSpring(t)
committedTransform.set(withClampedSpring(t))
return
}
@@ -299,7 +300,7 @@ const ImageItem = ({
)
const finalTransform = createTransform()
prependPinch(finalTransform, scale, origin, {x: dx, y: dy})
committedTransform.value = withClampedSpring(finalTransform)
committedTransform.set(withClampedSpring(finalTransform))
})
const composedGesture = isScrollViewBeingDragged
@@ -313,13 +314,13 @@ const ImageItem = ({
)
const containerStyle = useAnimatedStyle(() => {
const {scaleAndMoveTransform, isHidden} = transforms.value
const {scaleAndMoveTransform, isHidden} = transforms.get()
// Apply the active adjustments on top of the committed transform before the gestures.
// This is matrix multiplication, so operations are applied in the reverse order.
let t = createTransform()
prependPan(t, panTranslation.value)
prependPinch(t, pinchScale.value, pinchOrigin.value, pinchTranslation.value)
prependTransform(t, committedTransform.value)
prependPan(t, panTranslation.get())
prependPinch(t, pinchScale.get(), pinchOrigin.get(), pinchTranslation.get())
prependTransform(t, committedTransform.get())
const [translateX, translateY, scale] = readTransform(t)
const manipulationTransform = [
{translateX},
@@ -338,7 +339,7 @@ const ImageItem = ({
})
const imageCropStyle = useAnimatedStyle(() => {
const {cropFrameTransform} = transforms.value
const {cropFrameTransform} = transforms.get()
return {
flex: 1,
overflow: 'hidden',
@@ -347,7 +348,7 @@ const ImageItem = ({
})
const imageStyle = useAnimatedStyle(() => {
const {cropContentTransform} = transforms.value
const {cropContentTransform} = transforms.get()
return {
flex: 1,
transform: cropContentTransform,
@@ -359,7 +360,7 @@ const ImageItem = ({
const [hasLoaded, setHasLoaded] = useState(false)
useAnimatedReaction(
() => {
return transforms.value.isResting && !hasLoaded
return transforms.get().isResting && !hasLoaded
},
(show, prevShow) => {
if (show && !prevShow) {
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+4 -4
View File
@@ -148,7 +148,7 @@ const ImageItem = ({
)
const containerStyle = useAnimatedStyle(() => {
const {scaleAndMoveTransform, isHidden} = transforms.value
const {scaleAndMoveTransform, isHidden} = transforms.get()
return {
flex: 1,
transform: scaleAndMoveTransform,
@@ -158,7 +158,7 @@ const ImageItem = ({
const imageCropStyle = useAnimatedStyle(() => {
const screenSize = measureSafeArea()
const {cropFrameTransform} = transforms.value
const {cropFrameTransform} = transforms.get()
return {
overflow: 'hidden',
transform: cropFrameTransform,
@@ -171,7 +171,7 @@ const ImageItem = ({
})
const imageStyle = useAnimatedStyle(() => {
const {cropContentTransform} = transforms.value
const {cropContentTransform} = transforms.get()
return {
transform: cropContentTransform,
width: '100%',
@@ -184,7 +184,7 @@ const ImageItem = ({
const [hasLoaded, setHasLoaded] = useState(false)
useAnimatedReaction(
() => {
return transforms.value.isResting && !hasLoaded
return transforms.get().isResting && !hasLoaded
},
(show, prevShow) => {
if (show && !prevShow) {
src/view/com/lightbox/ImageViewing/index.tsx
+42 -32
View File
@@ -109,18 +109,22 @@ export default function ImageViewRoot({
// https://github.com/software-mansion/react-native-reanimated/issues/6677
requestAnimationFrame(() => {
openProgress.value = canAnimate ? withClampedSpring(1, SLOW_SPRING) : 1
openProgress.set(() =>
canAnimate ? withClampedSpring(1, SLOW_SPRING) : 1,
)
})
return () => {
// https://github.com/software-mansion/react-native-reanimated/issues/6677
requestAnimationFrame(() => {
openProgress.value = canAnimate ? withClampedSpring(0, SLOW_SPRING) : 0
openProgress.set(() =>
canAnimate ? withClampedSpring(0, SLOW_SPRING) : 0,
)
})
}
}, [nextLightbox, openProgress])
useAnimatedReaction(
() => openProgress.value === 0,
() => openProgress.get() === 0,
(isGone, wasGone) => {
if (isGone && !wasGone) {
runOnJS(setActiveLightbox)(null)
@@ -130,7 +134,7 @@ export default function ImageViewRoot({
const onFlyAway = React.useCallback(() => {
'worklet'
openProgress.value = 0
openProgress.set(0)
runOnJS(onRequestClose)()
}, [onRequestClose, openProgress])
@@ -187,7 +191,7 @@ function ImageView({
const isFlyingAway = useSharedValue(false)
const containerStyle = useAnimatedStyle(() => {
if (openProgress.value < 1 || isFlyingAway.value) {
if (openProgress.get() < 1 || isFlyingAway.get()) {
return {pointerEvents: 'none'}
}
return {pointerEvents: 'auto'}
@@ -196,11 +200,12 @@ function ImageView({
const backdropStyle = useAnimatedStyle(() => {
const screenSize = measure(safeAreaRef)
let opacity = 1
if (openProgress.value < 1) {
opacity = Math.sqrt(openProgress.value)
const openProgressValue = openProgress.get()
if (openProgressValue < 1) {
opacity = Math.sqrt(openProgressValue)
} else if (screenSize) {
const dragProgress = Math.min(
Math.abs(dismissSwipeTranslateY.value) / (screenSize.height / 2),
Math.abs(dismissSwipeTranslateY.get()) / (screenSize.height / 2),
1,
)
opacity -= dragProgress
@@ -212,11 +217,11 @@ function ImageView({
})
const animatedHeaderStyle = useAnimatedStyle(() => {
const show = showControls && dismissSwipeTranslateY.value === 0
const show = showControls && dismissSwipeTranslateY.get() === 0
return {
pointerEvents: show ? 'box-none' : 'none',
opacity: withClampedSpring(
show && openProgress.value === 1 ? 1 : 0,
show && openProgress.get() === 1 ? 1 : 0,
FAST_SPRING,
),
transform: [
@@ -227,12 +232,12 @@ function ImageView({
}
})
const animatedFooterStyle = useAnimatedStyle(() => {
const show = showControls && dismissSwipeTranslateY.value === 0
const show = showControls && dismissSwipeTranslateY.get() === 0
return {
flexGrow: 1,
pointerEvents: show ? 'box-none' : 'none',
opacity: withClampedSpring(
show && openProgress.value === 1 ? 1 : 0,
show && openProgress.get() === 1 ? 1 : 0,
FAST_SPRING,
),
transform: [
@@ -259,7 +264,7 @@ function ImageView({
const screenSize = measure(safeAreaRef)
return (
!screenSize ||
Math.abs(dismissSwipeTranslateY.value) > screenSize.height
Math.abs(dismissSwipeTranslateY.get()) > screenSize.height
)
},
(isOut, wasOut) => {
@@ -397,10 +402,11 @@ function LightboxImage({
const transforms = useDerivedValue(() => {
'worklet'
const safeArea = measureSafeArea()
const openProgressValue = openProgress.get()
const dismissTranslateY =
isActive && openProgress.value === 1 ? dismissSwipeTranslateY.value : 0
isActive && openProgressValue === 1 ? dismissSwipeTranslateY.get() : 0
if (openProgress.value === 0 && isFlyingAway.value) {
if (openProgressValue === 0 && isFlyingAway.get()) {
return {
isHidden: true,
isResting: false,
@@ -410,9 +416,9 @@ function LightboxImage({
}
}
if (isActive && thumbRect && imageAspect && openProgress.value < 1) {
if (isActive && thumbRect && imageAspect && openProgressValue < 1) {
return interpolateTransform(
openProgress.value,
openProgressValue,
thumbRect,
safeArea,
imageAspect,
@@ -434,33 +440,37 @@ function LightboxImage({
.maxPointers(1)
.onUpdate(e => {
'worklet'
if (openProgress.value !== 1 || isFlyingAway.value) {
if (openProgress.get() !== 1 || isFlyingAway.get()) {
return
}
dismissSwipeTranslateY.value = e.translationY
dismissSwipeTranslateY.set(e.translationY)
})
.onEnd(e => {
'worklet'
if (openProgress.value !== 1 || isFlyingAway.value) {
if (openProgress.get() !== 1 || isFlyingAway.get()) {
return
}
if (Math.abs(e.velocityY) > 200) {
isFlyingAway.value = true
if (dismissSwipeTranslateY.value === 0) {
isFlyingAway.set(true)
if (dismissSwipeTranslateY.get() === 0) {
// HACK: If the initial value is 0, withDecay() animation doesn't start.
// This is a bug in Reanimated, but for now we'll work around it like this.
dismissSwipeTranslateY.value = 1
dismissSwipeTranslateY.set(1)
}
dismissSwipeTranslateY.value = withDecay({
velocity: e.velocityY,
velocityFactor: Math.max(3500 / Math.abs(e.velocityY), 1), // Speed up if it's too slow.
deceleration: 1, // Danger! This relies on the reaction below stopping it.
})
dismissSwipeTranslateY.set(() =>
withDecay({
velocity: e.velocityY,
velocityFactor: Math.max(3500 / Math.abs(e.velocityY), 1), // Speed up if it's too slow.
deceleration: 1, // Danger! This relies on the reaction below stopping it.
}),
)
} else {
dismissSwipeTranslateY.value = withSpring(0, {
stiffness: 700,
damping: 50,
})
dismissSwipeTranslateY.set(() =>
withSpring(0, {
stiffness: 700,
damping: 50,
}),
)
}
})