useMotiPressableAnimatedProps()

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.

Usage#

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

API#

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?)

Arguments#

  • 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

Returns#

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

Web#

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

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

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={...} />
</MotiView>