Skip to content
Native Animation
Flight Arc Tracker animation preview

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

npx nativeanimation add flight-arc-tracker
SkiaGlass

Flight Arc Tracker

A flight tracker with a drawn route and expanding timeline, with configurable airport codes, flight details, 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 flight tracker with a drawn route and expanding timeline, with configurable airport codes, flight details, accent color, and fonts.

Why this one

Most flight trackers stop at a static route. This pattern adds a cinematic takeoff, a fading aircraft trail, live rolling figures, and a compact timeline that expands without leaving the map. The dotted world, restrained airline gradient, and depth-aware glass keep the experience useful rather than decorative.

How it works

  1. A Skia quadratic path defines the route and provides both the aircraft position and its tangent rotation.
  2. One continuous flight progress drives the aircraft, traveled route, trail, and progress bar.
  3. A separate interruptible spring controls the expandable glass card, whose collapsed and expanded heights are measured from its content.
  4. The map uses a small deterministic set of Skia points instead of map tiles or network assets.
  5. Gesture Handler owns the card tap so the same interaction works on touch devices and web.

Install

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

For Skia on web, follow the Expo Skia setup for CanvasKit. Wrap your app root in GestureHandlerRootView when it is not already provided by your navigation setup.

Usage

import { FlightArcTracker } from './FlightArcTracker';

export function FlightScreen() {
  return <FlightArcTracker style={{ flex: 1 }} />;
}
<FlightArcTracker
  brandName="Northwind"
  flightNumber="NW 214"
  originCode="LIS"
  destinationCode="JFK"
  accentColor="#0EA5E9"
  deepAccentColor="#1E3A8A"
  initialProgress={0.58}
/>

Props

PropTypeDefaultDescription
brandNamestring"Airline"Brand shown above the route.
flightNumberstring"FL 214"Flight identifier.
originCodestring"LIS"Origin airport code.
destinationCodestring"JFK"Destination airport code.
departureTimestring"7:05 AM"Departure time.
arrivalTimestring"9:45 AM"Local arrival time.
arrivalCountdownstring"2h 18m"Remaining duration.
altitudestring"36,000 ft"Live altitude label.
speedstring"542 mph"Live speed label.
gatestring"B12"Arrival gate.
accentColorstring"#0EA5E9"Route and live accent.
deepAccentColorstring"#1E3A8A"Route gradient endpoint.
initialProgressnumber0.58Initial flight position from zero to one.
fontFamilystringsystemPrimary interface typeface.
mediumFontFamilystringsystemHeading typeface.
monoFontFamilystringsystemTypeface for changing figures.
onExpandedChange(expanded: boolean) => void—Expansion callback.
accessibilityLabelstringflight summaryInteractive card label.
styleStyleProp<ViewStyle>—Outer container style.
testIDstring—Test identifier.

The ref exposes replay(), expand(), and collapse().

Compatibility

  • Expo SDK 58, React Native 0.88, Reanimated 4.7, Worklets 0.13, and Skia 2.14.
  • iOS, Android, and web: supported
  • Uses modules available in Expo Go for SDK 58.
  • Icons: Lucide (ISC).

Accessibility

The flight card exposes a button role, expanded state, and explicit expand/collapse actions. Reduced Motion renders the route and aircraft at their current position, disables the live drift and pulse, and updates changing figures without rolling.

More animations