Skip to content

Instantly share code, notes, and snippets.

@brentkirby
Last active May 7, 2025 07:16
Show Gist options
  • Save brentkirby/76e857252ccad86e23b70a2679b5405f to your computer and use it in GitHub Desktop.
Save brentkirby/76e857252ccad86e23b70a2679b5405f to your computer and use it in GitHub Desktop.
Make a swappable enter/exit animation for Animated.View
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