import { useMotiPressableAnimatedProps } from 'moti/interactions'

If you've used useAnimatedProps from react-native-reanimated before, then this will look familiar. It serves the same purpose, with the added feature of using the hovered and pressed states.


const Menu = () => {
return (
<Trigger />
<MenuItems />
const MenuItems = () => {
const animatedProps = useMotiPressableAnimatedProps(({ hovered }) => {
return {
pointerEvents: hovered ? 'auto' : 'none',
}, [])
return (
<MotiView animatedProps={animatedProps}>{/* Menu items here...*/}</MotiView>


The following usages are valid:

useMotiPressableAnimatedProps(factory, deps?)

If there's a unique MotiPressable component with an id prop as the parent, then pass id as the first argument:

useMotiPressableAnimatedProps(id, factory, deps?)


  • factory is a worklet that receives the interaction state as the first argument, and returns props that should be animated.
  • id is a unique string to identify the parent MotiPressable component whose interaction state you're trying to access.
  • deps is a dependency array, just like useMemo


Animated props, to be passed a Reanimated or Moti component's animatedProps prop.


animatedProps cannot be used with animate on the same prop on Web.

// 🚨 bad
const animateProps = useMotiPressableAnimatedProps(...)
<MotiView animate={...} animatedProps={animatedProps}>

If you need to do both, please split your usage into two components; one that receives the animate prop, and another that receives animateProps. This is a limitation in Reanimated 3.

// ✅ good
const animateProps = useMotiPressableAnimatedProps(...)
<MotiView animatedProps={animatedProps}>
<MotiView animate={...} />