Restore spring config from Reanimated v3
This commit is contained in:
committed by
Oleksii Bulenok
parent
c0cdb4490f
commit
0c55c89b70
@@ -3,6 +3,7 @@ import {Gesture, GestureDetector} from 'react-native-gesture-handler'
|
|||||||
import Animated, {
|
import Animated, {
|
||||||
type AnimatedRef,
|
type AnimatedRef,
|
||||||
measure,
|
measure,
|
||||||
|
Reanimated3DefaultSpringConfig,
|
||||||
runOnJS,
|
runOnJS,
|
||||||
scrollTo,
|
scrollTo,
|
||||||
type SharedValue,
|
type SharedValue,
|
||||||
@@ -370,18 +371,18 @@ function SortableItem<T>({
|
|||||||
return {
|
return {
|
||||||
transform: [
|
transform: [
|
||||||
{translateY: s.dragStartSlot * itemHeight + dragY.get()},
|
{translateY: s.dragStartSlot * itemHeight + dragY.get()},
|
||||||
{scale: withSpring(1.03)},
|
{scale: withSpring(1.03, Reanimated3DefaultSpringConfig)},
|
||||||
],
|
],
|
||||||
zIndex: 999,
|
zIndex: 999,
|
||||||
...(IS_IOS
|
...(IS_IOS
|
||||||
? {
|
? {
|
||||||
shadowColor: '#000',
|
shadowColor: '#000',
|
||||||
shadowOffset: {width: 0, height: 1},
|
shadowOffset: {width: 0, height: 1},
|
||||||
shadowOpacity: withSpring(0.08),
|
shadowOpacity: withSpring(0.08, Reanimated3DefaultSpringConfig),
|
||||||
shadowRadius: withSpring(4),
|
shadowRadius: withSpring(4, Reanimated3DefaultSpringConfig),
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
elevation: withSpring(3),
|
elevation: withSpring(3, Reanimated3DefaultSpringConfig),
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -391,11 +392,11 @@ function SortableItem<T>({
|
|||||||
const inactive = {
|
const inactive = {
|
||||||
...(IS_IOS
|
...(IS_IOS
|
||||||
? {
|
? {
|
||||||
shadowOpacity: withSpring(0),
|
shadowOpacity: withSpring(0, Reanimated3DefaultSpringConfig),
|
||||||
shadowRadius: withSpring(0),
|
shadowRadius: withSpring(0, Reanimated3DefaultSpringConfig),
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
elevation: withSpring(0),
|
elevation: withSpring(0, Reanimated3DefaultSpringConfig),
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -425,7 +426,7 @@ function SortableItem<T>({
|
|||||||
return {
|
return {
|
||||||
transform: [
|
transform: [
|
||||||
{translateY: withTiming(baseY + offset, {duration: 200})},
|
{translateY: withTiming(baseY + offset, {duration: 200})},
|
||||||
{scale: withSpring(1)},
|
{scale: withSpring(1, Reanimated3DefaultSpringConfig)},
|
||||||
],
|
],
|
||||||
zIndex: 0,
|
zIndex: 0,
|
||||||
...inactive,
|
...inactive,
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import {
|
|||||||
} from 'react-native-gesture-handler'
|
} from 'react-native-gesture-handler'
|
||||||
import Animated, {
|
import Animated, {
|
||||||
type AnimatableValue,
|
type AnimatableValue,
|
||||||
|
Reanimated3DefaultSpringConfig,
|
||||||
runOnJS,
|
runOnJS,
|
||||||
type SharedValue,
|
type SharedValue,
|
||||||
useAnimatedReaction,
|
useAnimatedReaction,
|
||||||
@@ -463,7 +464,10 @@ function clampTranslation(
|
|||||||
|
|
||||||
function withClampedSpring<T extends AnimatableValue>(value: T): T {
|
function withClampedSpring<T extends AnimatableValue>(value: T): T {
|
||||||
'worklet'
|
'worklet'
|
||||||
return withSpring(value, {overshootClamping: true})
|
return withSpring(value, {
|
||||||
|
...Reanimated3DefaultSpringConfig,
|
||||||
|
overshootClamping: true,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(ImageItem)
|
export default memo(ImageItem)
|
||||||
|
|||||||
@@ -605,8 +605,8 @@ function LightboxImage({
|
|||||||
dismissSwipeTranslateY.set(() => {
|
dismissSwipeTranslateY.set(() => {
|
||||||
'worklet'
|
'worklet'
|
||||||
return withSpring(0, {
|
return withSpring(0, {
|
||||||
stiffness: 700,
|
stiffness: 2800,
|
||||||
damping: 50,
|
damping: 200,
|
||||||
reduceMotion: ReduceMotion.Never,
|
reduceMotion: ReduceMotion.Never,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import {
|
|||||||
useRef,
|
useRef,
|
||||||
} from 'react'
|
} from 'react'
|
||||||
import {
|
import {
|
||||||
|
Reanimated3DefaultSpringConfig,
|
||||||
type SharedValue,
|
type SharedValue,
|
||||||
useSharedValue,
|
useSharedValue,
|
||||||
withSpring,
|
withSpring,
|
||||||
@@ -34,6 +35,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
|
|||||||
'worklet'
|
'worklet'
|
||||||
footerMode.set(() =>
|
footerMode.set(() =>
|
||||||
withSpring(v ? 1 : 0, {
|
withSpring(v ? 1 : 0, {
|
||||||
|
...Reanimated3DefaultSpringConfig,
|
||||||
overshootClamping: true,
|
overshootClamping: true,
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import {type NativeScrollEvent} from 'react-native'
|
|||||||
import {
|
import {
|
||||||
clamp,
|
clamp,
|
||||||
interpolate,
|
interpolate,
|
||||||
|
Reanimated3DefaultSpringConfig,
|
||||||
type SharedValue,
|
type SharedValue,
|
||||||
useAnimatedStyle,
|
useAnimatedStyle,
|
||||||
useSharedValue,
|
useSharedValue,
|
||||||
@@ -105,6 +106,7 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
|
|||||||
'worklet'
|
'worklet'
|
||||||
headerMode.set(() =>
|
headerMode.set(() =>
|
||||||
withSpring(v ? 1 : 0, {
|
withSpring(v ? 1 : 0, {
|
||||||
|
...Reanimated3DefaultSpringConfig,
|
||||||
overshootClamping: true,
|
overshootClamping: true,
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
import {useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react'
|
import {useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react'
|
||||||
import {ActivityIndicator, StyleSheet} from 'react-native'
|
import {ActivityIndicator, StyleSheet} from 'react-native'
|
||||||
import {withSpring} from 'react-native-reanimated'
|
import {
|
||||||
|
Reanimated3DefaultSpringConfig,
|
||||||
|
withSpring,
|
||||||
|
} from 'react-native-reanimated'
|
||||||
import {useFocusEffect} from '@react-navigation/native'
|
import {useFocusEffect} from '@react-navigation/native'
|
||||||
|
|
||||||
import {PROD_DEFAULT_FEED} from '#/lib/constants'
|
import {PROD_DEFAULT_FEED} from '#/lib/constants'
|
||||||
@@ -147,7 +150,12 @@ function HomeScreenReady({
|
|||||||
const headerMode = useHomeHeaderMode()
|
const headerMode = useHomeHeaderMode()
|
||||||
const showHeader = useCallback(() => {
|
const showHeader = useCallback(() => {
|
||||||
'worklet'
|
'worklet'
|
||||||
headerMode.set(() => withSpring(0, {overshootClamping: true}))
|
headerMode.set(() =>
|
||||||
|
withSpring(0, {
|
||||||
|
...Reanimated3DefaultSpringConfig,
|
||||||
|
overshootClamping: true,
|
||||||
|
}),
|
||||||
|
)
|
||||||
}, [headerMode])
|
}, [headerMode])
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
|
|||||||
Reference in New Issue
Block a user