Last active
May 7, 2025 07:16
-
-
Save brentkirby/76e857252ccad86e23b70a2679b5405f to your computer and use it in GitHub Desktop.
Make a swappable enter/exit animation for Animated.View
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Animated, { | |
SlideOutLeft, | |
SlideOutRight, | |
useSharedValue, | |
} from 'react-native-reanimated'; | |
const slideInLeft = new SlideInLeft().build() | |
const slideInRight = new SlideInRight().build() | |
const slideOutLeft = new SlideOutLeft().build() | |
const slideOutRight = new SlideOutRight().build() | |
const MyComponent = () => { | |
const exitDirection = useSharedValue('left'); | |
const CustomEnterAnimation = (values: any) => { | |
'worklet' | |
return direction.value === 'left' ? slideInLeft(values) : slideInRight(values) | |
} | |
const CustomExitAnimation = (values: any) => { | |
'worklet' | |
console.log(`SET EXIT FOR ${index} TO ${move}`) | |
return move === 'left' ? slideOutRight(values) : slideOutLeft(values) | |
} | |
return ( | |
<Animated.View | |
entering={CustomEnterAnimation} | |
exiting={CustomExitAnimation} | |
onTouchMove={() => { | |
exitDirection.value = someCondition ? 'left' : 'right'; | |
}} | |
/> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment