# Tinder super like star animation in React Native (Reanimated)

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-10. 10 min read.
> Source: https://vp0.com/blogs/tinder-super-like-star-animation-react-native-free-ios-template-vibe-coding-guid

A super like is a star burst plus a card lift on one tap. Reanimated keeps it on the UI thread so the microinteraction feels instant.

**TL;DR.** A Tinder super like star animation in React Native is a tap-triggered star burst plus the card lifting away, built with Reanimated for the motion and a short haptic for feel, with Lottie as an option for designer-made effects. The animation is quick to write; matching it to a real card and like flow is the slow part, so starting from a free VP0 design and letting Claude Code or Cursor read its source page gets you to a polished result faster than generating the screen from a blank prompt.

A Tinder-style super like animation in React Native is two effects firing on one tap: a star that scales up and bursts, and the card lifting away. The reliable way to build it is [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedStyle) for the motion and a short haptic for the feel, with [Lottie](https://github.com/lottie-react-native/lottie-react-native) as an option when a designer hands you a finished effect. The animation is short to write; matching it to a real card and a real like flow is the slower part, which is why starting from a free VP0 design and letting Claude Code or Cursor read its source page gets you to a polished result faster than generating the screen from a blank prompt.

The star burst is a microinteraction, so the bar is high: it has to feel instant and a little delightful, then get out of the way. The sections below cover the burst itself, how to wire it to the super like action, and when to reach for Lottie instead.

## How do you build a Tinder super like animation in React Native?

A super like animation is a tap-triggered sequence: a star scales up past its final size, settles with a spring, and optionally throws off a few smaller stars, while the card animates upward to signal the action. Reanimated handles all of it on the UI thread through worklets, so the burst stays smooth even while the next card renders. Reanimated, maintained by Software Mansion with more than 10,000 stars, is the standard tool for exactly this kind of gesture-driven motion.

The pieces are a shared value for the star's scale, a second for its opacity, and an animated style that maps them onto the star view. On tap you animate the scale with a `withSequence` so it overshoots and settles, fire a haptic, and trigger the card's exit. Keeping each piece small is what makes the effect feel crisp rather than heavy.

If you have already built the swipe deck, this slots on top of it; the [Tinder swipe card animation](/blogs/tinder-card-swipe-animation-react-native-reanimated-free-ios-template-vibe-codin/) covers the underlying card gesture that the super like extends.

## The star burst: scaling, particles, and timing

The core burst is a scale-and-fade on a star icon, with an overshoot so it pops. A `withSequence` of a spring into a slightly larger size followed by a settle reads as energetic without looking mechanical.

```jsx
const scale = useSharedValue(0);
const opacity = useSharedValue(0);

function superLike() {
  scale.value = withSequence(
    withSpring(1.2, { damping: 6 }),
    withTiming(1, { duration: 120 })
  );
  opacity.value = withSequence(
    withTiming(1, { duration: 80 }),
    withDelay(400, withTiming(0, { duration: 200 }))
  );
}

const starStyle = useAnimatedStyle(() => ({
  opacity: opacity.value,
  transform: [{ scale: scale.value }],
}));
```

For the particle stars that spread outward, render a handful of small star views and drive each with the same shared progress value, mapping progress to a different angle and distance through `interpolate`. Because they all read one shared value, the whole burst stays in sync and runs as a single worklet. Keep the particle count low, six to eight is plenty, since each one is another view to animate and overdrawing them is the fastest way to make the effect stutter on older devices.

The timing matters as much as the motion. A burst that lingers feels slow; aim for the star to peak in under 150 milliseconds and clear within half a second, so the interaction feels immediate.

## Reanimated, Lottie, or Skia for the effect?

The right tool depends on how custom the effect is and who is making it. Each fits a different situation.

| Approach | Best for | Trade-off |
|---|---|---|
| Reanimated | Code-driven bursts you control and tweak | You build the motion yourself |
| Lottie | A finished effect a designer exports from After Effects | Less runtime control, file weight to watch |
| Skia | Particle-heavy or canvas-style effects | More setup, steeper learning curve |

Reanimated is the strongest default for a super like, because the effect is simple geometry you want to adjust freely. Lottie wins when a designer has already produced a rich animation and you just need to play it; it keeps the visual exactly as designed. Skia, through react-native-skia, is the choice when you want dozens of particles or a painted effect that would be awkward to assemble from views. A deeper comparison of [Lottie versus Rive for React Native](/blogs/lottie-vs-rive-for-react-native-ai-apps/) covers the designed-animation route in more detail.

## Wiring the burst to the super like action

The animation is only half of it; the tap also has to register the super like and move the card. On tap, run the star sequence, fire a haptic for tactile confirmation, and start the card's upward exit, then call your like handler once the card is gone. The handler runs in normal React state, so it has to be wrapped in `runOnJS` from inside any worklet.

```jsx
function onSuperLike() {
  superLike();
  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
  cardY.value = withTiming(-SCREEN_HEIGHT, { duration: 300 }, () => {
    runOnJS(advanceDeck)("superlike");
  });
}
```

The haptic is small but does a lot of work; [Expo Haptics](https://docs.expo.dev/versions/latest/sdk/haptics/) gives you the impact styles with one call, and a medium impact pairs well with the star pop. Forgetting `runOnJS` around `advanceDeck` is the single most common reason a hand-written or AI-generated super like crashes, since the deck update touches JavaScript state from inside a UI-thread callback.

## Making it smooth with AI and a real design

AI builders scaffold the burst quickly and then make the same worklet mistakes every time. Claude Code and Cursor will produce a believable `withSequence` and animated style, then call the deck update directly from a worklet without `runOnJS`, or animate a value that is never read, so nothing moves. The code compiles and fails silently, which is frustrating to debug from scratch.

Giving the model a real design and clear rules fixes most of it. When the card, the star placement, and the spacing are already decided, the model implements a real microinteraction instead of inventing one, and you spend your time tuning the timing. Starting from a free VP0 design provides that, since each design has a machine-readable source page Claude Code, Cursor, or Rork read from a pasted link. The same shared-value foundation shows up across other effects, like a [live tip-shower particle animation](/blogs/live-stream-tip-shower-animation-react-native/) and [shared-element hero animations](/blogs/hero-animations-react-native-shared-element/), so the patterns transfer once you have them.

## Common super like animation mistakes

A few habits turn a crisp burst into a janky one. Overdrawing particles is the first; thirty animated stars look impressive in a demo and drop frames on a three-year-old phone, so keep the count low and the views simple. Animating layout properties like width or margin instead of `transform` and `opacity` is the second, because those trigger layout passes that the transform-based approach avoids.

Skipping cleanup is the third: if you mount a new burst view on every tap without removing the old one, they accumulate and memory climbs. Reuse one set of shared values and reset them instead. The fourth is a heavy Lottie file; a complex After Effects export can be hundreds of kilobytes and stutter on first play, so check the file size and simplify the animation if it is too large before shipping it.

A fifth one is worth calling out because it affects real users: ignoring the system Reduce Motion setting. Some people get motion sickness or distraction from bursts and particles, and iOS exposes their preference. Read `AccessibilityInfo.isReduceMotionEnabled()` and subscribe to its change event, and when reduced motion is on, swap the star burst and particle spread for a simple fade or a static filled star. The super like still registers and still feels acknowledged, just without the motion that some users have asked the system to suppress. Building this branch in from the start is far easier than retrofitting it after a review complaint.

## When to use a Lottie file instead

A Lottie animation is the better choice when the effect is genuinely elaborate and a designer owns it. A burst with custom shapes, gradients, and dozens of synchronized elements is far easier to export from After Effects than to rebuild from Reanimated views, and Lottie keeps it pixel-accurate to the design. For that kind of effect, the trade-off in runtime control is worth it.

For a simple star pop, Reanimated stays the better tool, because the effect is a few values you want to adjust by hand and there is no file to load or designer round-trip to manage. The honest split is that Lottie suits designed, complex animations and Reanimated suits code-driven, simple ones, and a super like usually starts simple.

## Key takeaways: a super like that feels right

Build the burst with Reanimated shared values and a `withSequence` overshoot, keep particle stars few and driven by one shared value, and add a medium haptic for confirmation. Wire the tap to move the card and call your like handler through `runOnJS`, and keep the whole effect under half a second. Reach for Lottie only when a designer hands you a complex finished animation. Let an AI builder scaffold the gesture from a real design, then tune the timing yourself. A commissioned microinteraction set can cost $5,000 or more once design and animation are both accounted for, while starting from a free VP0 design costs only the time you spend tuning the feel.

You can [browse VP0 designs](/explore) to start your like and super like flow from a real card rather than a blank component.

## Frequently asked questions

### How do you make a Tinder super like star animation in React Native?

Use Reanimated for the motion: a shared value for the star's scale animated with a `withSequence` overshoot, a second for opacity, and an animated style that maps them to the star view. Fire a haptic on tap and move the card upward, calling your like handler through `runOnJS`. Starting the card and star layout from a free VP0 design means you build the animation on a real screen instead of designing and coding it from scratch.

### Should I use Reanimated or Lottie for a super like effect?

Use Reanimated when the burst is simple geometry you want to tune freely, which a star pop usually is. Use Lottie when a designer has exported a rich, complex animation from After Effects and you just need to play it exactly as designed. Reanimated gives you control and no file to load; Lottie gives you a designer-accurate effect at the cost of runtime flexibility and some file weight.

### What is the safest way to build the animation with Claude Code or Cursor?

Tell the model to keep animation logic in worklets, wrap every JavaScript callback like the deck update in `runOnJS`, and animate `transform` and `opacity` rather than layout properties. AI reliably forgets `runOnJS` and sometimes animates values it never reads, so the code compiles but does nothing or crashes. Giving it a real VP0 design to implement keeps the card and star correct so you can focus on the timing.

### Can VP0 provide a free React Native template for a like animation?

Yes. VP0 is a free iOS app design library where every design has a machine-readable source page an AI builder reads from a pasted link, with React Native and SwiftUI variants. You start from the card and like UI, hand its source to Claude Code, Cursor, or Rork, and build the Reanimated burst on top, rather than inventing the layout from a prompt.

### What common errors happen when vibe coding a super like animation?

The frequent ones are calling a JavaScript handler from a worklet without `runOnJS`, animating width or margin instead of `transform` so the effect triggers layout passes, overdrawing too many particle views so frames drop, and mounting a new burst view on every tap without cleanup so memory climbs. All of them look correct in the code, which is why a quick review of the worklet and a test on an older device are worth the time.

## Frequently asked questions

### How do you make a Tinder super like star animation in React Native?

Use Reanimated for the motion: a shared value for the star's scale animated with a withSequence overshoot, a second for opacity, and an animated style that maps them to the star view. Fire a haptic on tap and move the card upward, calling your like handler through runOnJS. Starting the card and star layout from a free VP0 design means you build the animation on a real screen instead of designing and coding it from scratch.

### Should I use Reanimated or Lottie for a super like effect?

Use Reanimated when the burst is simple geometry you want to tune freely, which a star pop usually is. Use Lottie when a designer has exported a rich, complex animation from After Effects and you just need to play it exactly as designed. Reanimated gives you control and no file to load; Lottie gives you a designer-accurate effect at the cost of runtime flexibility and some file weight.

### What is the safest way to build the animation with Claude Code or Cursor?

Tell the model to keep animation logic in worklets, wrap every JavaScript callback like the deck update in runOnJS, and animate transform and opacity rather than layout properties. AI reliably forgets runOnJS and sometimes animates values it never reads, so the code compiles but does nothing or crashes. Giving it a real VP0 design to implement keeps the card and star correct so you can focus on the timing.

### Can VP0 provide a free React Native template for a like animation?

Yes. VP0 is a free iOS app design library where every design has a machine-readable source page an AI builder reads from a pasted link, with React Native and SwiftUI variants. You start from the card and like UI, hand its source to Claude Code, Cursor, or Rork, and build the Reanimated burst on top, rather than inventing the layout from a prompt.

### What common errors happen when vibe coding a super like animation?

The frequent ones are calling a JavaScript handler from a worklet without runOnJS, animating width or margin instead of transform so the effect triggers layout passes, overdrawing too many particle views so frames drop, and mounting a new burst view on every tap without cleanup so memory climbs. All of them look correct in the code, which is why a quick review of the worklet and a test on an older device are worth the time.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*