Skip to content
Native Animation
Tear-Off Boarding Pass animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add tear-off-boarding-pass

Tear-Off Boarding Pass

A boarding pass with a tear-away stub and falling paper feedback, with configurable passenger details, flight data, accent color, and fonts.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

A boarding pass with a tear-away stub and falling paper feedback, with configurable passenger details, flight data, accent color, and fonts.

Why this one

Most tear-off ticket patterns stop at a flat translation. This version gives the interaction a credible product setting, an interruptible projected release, two matching torn edges, a gently rotating fall into a clear lower-left resting place, and a compact celebration that stays centered beneath the pass.

How it works

  1. The component measures its own container and scales the pass for both compact phones and taller screens.
  2. One continuous progress shared value drives the stub position, rotation, perforation, pass recentering, route accent, and success reveal.
  3. The vertical pan applies elastic resistance outside its bounds and projects release velocity before choosing whether to reattach or tear away.
  4. A spring carries the stub downward while the upper pass settles in the opposite direction, exposing matching rows of paper teeth.
  5. A spring introduces the green confirmation circle before one continuous Lucide check path draws with rounded ends.
  6. The button and forwarded ref use the same state transition as the gesture, so every input path stays synchronized.

Install

npx expo install @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

On web, copy node_modules/canvaskit-wasm/bin/full/canvaskit.wasm into the web public directory. The included web entry waits for CanvasKit before it imports the Skia confirmation icon.

Usage

import TearOffBoardingPass from './TearOffBoardingPass';

export function TripScreen() {
  return <TearOffBoardingPass originCode="MAD" destinationCode="JFK" seat="12A" />;
}

Customize the content, palette, typography, and completion callback:

import { useRef } from 'react';
import TearOffBoardingPass, { type TearOffBoardingPassRef } from './TearOffBoardingPass';

export function TripScreen() {
  const passRef = useRef<TearOffBoardingPassRef>(null);

  return (
    <TearOffBoardingPass
      ref={passRef}
      airlineName="Northwind"
      passengerName="Avery Morgan"
      flightDate="NOV 08"
      boardingTime="6:20 AM"
      flightNumber="NW 214"
      gate="C07"
      seat="8F"
      accentColor="#FF5A4E"
      colorScheme="dark"
      fontFamily="YourSansFont"
      displayFontFamily="YourDisplayFont"
      monoFontFamily="YourMonoFont"
      onTear={() => confirmBoarding()}
    />
  );
}

The forwarded ref exposes tear() and reset().

Props

PropTypeDefaultDescription
airlineNamestring'Your airline'Airline name displayed at the top of the pass.
screenTitlestring'Ready for takeoff'Product-screen heading above the pass.
originCodestring'MAD'Origin airport code.
originCitystring'Madrid'Origin city label.
destinationCodestring'JFK'Destination airport code.
destinationCitystring'New York'Destination city label.
passengerNamestring'Avery Morgan'Passenger name.
flightDatestring'OCT 24'Flight date in the format used by the product.
boardingTimestring'7:35 PM'Boarding time.
flightNumberstring'NA 051'Flight identifier.
gatestring'B18'Gate label.
seatstring'12A'Seat label.
tearLabelstring'Tear'Label for the tear action.
statusLabelstring'On time'Flight status shown in the pass header.
pullLabelstring'Pull down'Drag instruction shown on the stub.
successMessagestring'Have a great flight'Message revealed after the stub separates.
successDetailstring'Your gate is ready when you are.'Supporting copy under the success message.
accentColorstringundefinedAccent used for the route, action, and celebration.
colorScheme'light' | 'dark' | 'auto''auto'Light, dark, or system-selected presentation.
fontFamilystringundefinedFont family for interface text.
displayFontFamilystringundefinedFont family for route codes and prominent labels.
monoFontFamilystringundefinedFont family for changing or tabular travel data.
accessibilityLabelstring'Boarding pass stub. Swipe down or activate to tear it off.'Accessible label for the draggable ticket stub.
onTear() => voidundefinedCalled when the tear-off animation settles.
styleStyleProp<ViewStyle>undefinedOptional style for the outer container.
testIDstringundefinedTest identifier applied to the outer container.
durationnumber360Confirmation icon reveal duration in milliseconds, after the tear delay. Spring physics and reduced-motion timing are unchanged.

Compatibility

  • Expo SDK 58
  • React Native 0.88
  • Reanimated 4.7 and Worklets 0.13
  • Skia 2.14
  • iOS: supported
  • Android: supported
  • Web: supported
  • Works in Expo Go because its native dependencies are included in the SDK
  • Icons: Lucide (ISC)

Accessibility

The stub is an adjustable control with activate, increment, and decrement actions, and the 48-point Tear button provides a direct touch alternative. With reduced motion enabled, the component switches states immediately: it removes the spring, fall, rotation, and particle movement while preserving the success message and torn state.

More animations