How to start animation only with onLongPress ?

[siddharth-kt]

Hi @nandorojo, thanks for making animations easy.

I have a question. How to start animation only when onLongPress is triggered?
I want to handle onPress seperately, without starting any animation, rather i want animation to run only on onLongPress call.
How can it be done ?

[nandorojo]

Is something like this what you want?

import { MotiPressable, useDynamicAnimation } from 'moti/interactions'

function Button() {
  const longPressAnimation = useDynamicAnimation(() => ({
    scale: 1 // this is your initial state
  }))

  return (
    <MotiPressable
      state={longPressAnimation}
      onLongPress={() => {
        longPressAnimation.animateTo({ scale: 0.9 })
      }}
      onPressOut={() => {
        longPressAnimation.animateTo({ scale: 1 })
      }}
    />
  )
}

Or, you could use preset variants:

import { MotiPressable, useAnimationState } from 'moti/interactions'

function Button() {
  const longPressAnimation = useAnimationState({
    from: { scale: 1 },
    longPressed: { scale: 0.9 }
  })

  return (
    <MotiPressable
      state={longPressAnimation}
      onLongPress={() => {
        longPressAnimation.transitionTo('longPressed')
      }}
      onPressOut={() => {
        longPressAnimation.transitionTo('from')
      }}
    />
  )
}

Alternatively, you can use a shared value:

import { MotiPressable } from 'moti/interactions'
import { useSharedValue } from 'react-native-reanimated'

function Button() {
  const isLongPressed = useSharedValue(false)

  return (
    <MotiPressable
      onLongPress={() => {
        isLongPressed.value = true
      }}
      onPressOut={() => {
        isLongPressed.value = false
      }}
      animate={({ hovered, pressed }) => {
        'worklet'

        return {
          scale: isLongPressed.value ? 0.9 : 1
        }
      }}
    />
  )
}

[siddharth-kt]

Thanks for such a quick reply and problem solving. I really appreciate it.
Thanks again 👍

[nandorojo]

happy to help