Skip to main content

MotiLink

ts
import { MotiLink } from 'solito/moti'
ts
import { MotiLink } from 'solito/moti'

moti is a popular animation library for React Native, powered by Reanimated. It works on iOS, Android and Web.

Solito provides a first-class Moti integration with the MotiLink component. It works just like the regular Link, plus all the great Moti animation features.

Under the hood, MotiLink uses MotiPressable.

The link is accessible, meaning it shows the URL in the bottom corner of Chrome, and it supports Command + Click to open in a new tab.

Usage​

You can animate based on hovered and pressed states, without triggering any re-renders:

tsx
const ButtonLink = ({ children, href, as }) => (
  <MotiLink
    href={href}
    as={as}
    animate={({ hovered, pressed }) => {
      'worklet'
      return {
        scale: pressed ? 0.9 : hovered ? 1.1 : 1,
      }
    }}
  >
    {children}
  </MotiLink>
)
tsx
const ButtonLink = ({ children, href, as }) => (
  <MotiLink
    href={href}
    as={as}
    animate={({ hovered, pressed }) => {
      'worklet'
      return {
        scale: pressed ? 0.9 : hovered ? 1.1 : 1,
      }
    }}
  >
    {children}
  </MotiLink>
)

Or, you could do a simple fade-in animation:

tsx
<MotiLink href="/users/fernando" from={{ opacity: 0 }} animate={{ opacity: 1 }}>
  {children}
</MotiLink>
tsx
<MotiLink href="/users/fernando" from={{ opacity: 0 }} animate={{ opacity: 1 }}>
  {children}
</MotiLink>

Whatever a MotiView/MotiPressable component supports, you can do with MotiLink.

Props​

Firstly, this component supports the following props from Next.js' <Link /> component:

  • href (required)
  • as
  • shallow

This component also accepts all props of MotiPressable:

Prerequisites​

To use MotiLink, you first need to install Moti. Please refer to the Moti installation steps.

info

You must install moti version 0.0.18 or higher.

You can also reference/clone the Solito starter app which has Moti and Solito configured for you.