useMotiPressableTransition()

import { useMotiPressableTransition } from '@motify/interactions'

useMotiPressableTransition lets you motify any Moti component's transition prop based on a parent's interaction state.

Please refer to the Moti transition prop options to see what this hook should return.

Example:

const transition = useMotiPressableTransition(({ pressed, hovered }) => {
'worklet'
if (pressed) {
return {
type: 'timing',
}
}
return {
type: 'spring',
delay: 50,
}
})
return <MotiView transition={transition} />

Usage#

Wrap your component with MotiPressable.

<MotiPressable>
<Item />
</MotiPressable>

Then, in the Item component:

const Item = () => {
const state = useMotiPressableTransition(({ pressed }) => {
'worklet'
if (pressed) {
return {
type: 'timing',
}
}
return {
type: 'spring',
delay: 50,
}
})
const state = useMotiPressableState(({ pressed }) => {
return {
translateY: pressed ? -10 : 0,
}
})
return <MotiView transition={transition} state={state} />
}

Access a unique ID#

You can also access a pressable via unique ID. Say you have mutliple nested pressables:

<MotiPressable id="list">
<MotiPressable>
<Item />
</MotiPressable>
</MotiPressable>

By adding id="list", we can now access that unique component's interaction state.

Then, in the Item component, add list as the first argument of useMotiPressableTransition:

const state = useMotiPressableTransition('list', ({ pressed }) => {
'worklet'
return {
opactiy: pressed ? 0.5 : 1,
}
})
return <MotiView transition={transition} />

This lets you uniquely transition based on interactionns made on the list pressable.

Performance#

This hook runs on the native thread and triggers zero re-renders. Like all things moti, it has great performance out-of-the-box.

Similar to useMemo, you can also pass in a dependency array as the last argument to reduce updates:

const state = useMotiPressableTransition(
'list',
({ pressed, hovered }) => {
'worklet'
return {
opactiy: pressed && !loading ? 0.5 : 1,
}
},
[loading] // pass an empty array if there are no dependencies
)

API#

The following usages are valid:

useMotiPressableTransition(factory, deps?)

If there's a unique MotiPressable component with an id prop as the parent:

useMotiPressableTransition(id, factory, deps?)

Arguments#

  • factory is a worklet that receives the interaction state as the first argument, and returns a transition object.
  • 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#

A Moti transition object, meant to be passed to any Moti component's transition prop.