# Dynamic Island Member Card: React Native card dispenser animation

> Dynamic Island Member Card is a React Native and Expo component, sold on
> Motionary, that morphs the iPhone Dynamic Island pill into a card dispenser
> and pushes a black metal member card out of its slot, then turns the card
> upright and drops it flat to settle. The whole sequence runs on the UI
> thread from four react-native-reanimated shared values (island, eject, land
> and shine) fed through interpolate.

Product page: https://motionary.dev/animations/dynamic-island-member-card
Price: $6 USD (price as of 2026-09-01, live price on the product page)
License: single developer, unlimited personal and commercial apps
Delivery: instant download of the full TypeScript source after checkout
Stack: expo, react native, reanimated, react native gesture handler
Rarity: rare
Sold by: Motionary (https://motionary.dev)

## What it is

Dynamic Island Member Card is a React Native and Expo drop from Motionary
that turns the iPhone Dynamic Island into a machine that issues you a card.
You tap a button labelled ISSUE CARD; the black pill, drawn at the real
hardware cutout metrics so it blends into the physical island, stretches down
and out into a full width dispenser bar with a dark gray lip at its base. A
black metal member card is pushed out through that lip in one continuous
motion, riding out scaled up on a long drop shadow while a skewed specular
band rakes across its face. Then it rotates a quarter turn upright, scales
back to true size and drops the last stretch onto the surface, with an
"ADDED TO WALLET" caption fading in underneath. Tapping again retracts the
card and closes the island back into a pill.

## What it does

- Morphs the collapsed Dynamic Island pill (126 x 37 at y = 14) into an
  expanded dispenser bar by interpolating top, width, height and borderRadius
  from a single `island` shared value.
- Fades the dispenser mouth lip in only past `island` > 0.75, so the bar
  reads as solid black before a slot appears in it.
- Ejects the card in one continuous cubic bezier push, not a stepped feed,
  while it sits at `LIFT_SCALE` 1.09 under a 30pt offset, 17pt blur shadow.
- Lands the card with a single `land` value that drops it 120pt, rotates it
  90 degrees upright, scales it back to 1 and tucks the shadow in to a 3pt
  offset with elevation falling from 24 to 4, all at once.
- Sweeps a skewed white gradient band (skewX -18deg) across a clipped overlay
  on the card face as it emerges, so the metal catches light.
- Draws a gradient shadow cast by the lip onto the card at the mouth, faded
  out at the exact eject progress where the card's top edge clears the slot.
- Runs a four stage state machine: idle, dispensing, done, closing, with the
  trigger button disabled during dispensing and closing.
- Retracts on the second tap and only collapses the island
  `RETRACT_DELAY + RETRACT_DURATION + 40ms` after that tap, so the card never
  clips into a closing bar.
- Parks the card at a computed hidden offset that sums scaled half height,
  shadow offset and blur, so neither card nor shadow pokes through the mouth
  before the island opens.
- Hides the status bar while the dispenser is open and restores it on idle.

## How it works

Everything in Dynamic Island Member Card is react-native-reanimated v4 on the
UI thread. `components/Container.tsx` holds four `useSharedValue` values,
`island`, `eject`, `land` and `shine`, started with staggered `withDelay` so
the phases overlap instead of queueing: `island` on `withSpring` (damping 17,
stiffness 170, mass 0.9), `eject` on a 950ms `withTiming` eased with
`Easing.bezier(0.22, 0.9, 0.3, 1)`, `shine` on a 1200ms timing, and `land` on
an 850ms timing after a 1500ms delay. Each value is read inside its own
`useAnimatedStyle` and mapped with `interpolate`: the island style
interpolates layout properties directly (top, width, height, borderRadius)
from the real cutout metrics out to a full width bar, and the lip style
interpolates opacity over the `[0.75, 1]` slice of `island` with
`Extrapolation.CLAMP`. The card style composes translateY from `eject` plus
`land.value * LAND_DROP`, a rotate from `land`, a scale from `land`, and
animates shadowOpacity, shadowRadius, shadowOffset and elevation in the same
worklet, which is what makes the settle read as a fall onto a table rather
than a slide down a plane. The card's parked position is computed rather than
guessed: `hidden` sums the lifted half height, `LIFT_SHADOW_OFFSET` and
`LIFT_SHADOW_BLUR`, and `mouthClear` derives the exact `eject` progress where
the top edge leaves the slot, which is the breakpoint used by the mouth
shadow's four stop `interpolate`. The card face itself lives in
`components/MemberCard.tsx`, laid out landscape and drawn at `-90deg` so the
quarter turn during landing is what makes it readable; its body gradient and
its `Shine` specular band, plus the lip's cast shadow drawn back in
`components/Container.tsx`, are all react-native-svg `LinearGradient` plus
`Rect`. Stage transitions come back to JavaScript from the animation
callbacks through `scheduleOnRN` from react-native-worklets (the callbacks are
marked `'worklet'`), and Reanimated layout animations `FadeInDown` and
`FadeOut` handle the wallet caption. There is no native code and no Skia in
this drop, so nothing has to be compiled to run it.

## What you get

```
App.tsx
index.ts
app.json
package.json
package-lock.json
tsconfig.json
README.md
.gitignore
components/
  Container.tsx
  MemberCard.tsx
assets/
  icon.png
  adaptive-icon.png
  splash-icon.png
```

- TypeScript source (Container.tsx, MemberCard.tsx)
- Demo entry (App.tsx) wrapped in GestureHandlerRootView
- Four stage dispense and retract state machine, idle to dispensing to done
  to closing
- README with install, stack notes and a how-it-works breakdown

## Requirements

Versions pinned in the archive's `package.json` for Dynamic Island Member
Card:

- expo ^56.0.8 (Expo SDK 56)
- react-native 0.85.3
- react 19.2.3
- react-native-reanimated 4.3.1
- react-native-worklets 0.8.3
- react-native-gesture-handler ~2.31.1
- react-native-svg ^15.15.5
- expo-status-bar ~56.0.4
- @expo/vector-icons ^15.1.1
- pressto ^0.7.0 (PressableScale, the trigger button)
- typescript ~6.0.3 (devDependency)

The demo project also carries the stock Expo template dependencies that the
component itself never imports: @expo/metro-runtime ~56.0.13, expo-asset
~56.0.15, expo-splash-screen ~56.0.10, react-dom 19.2.3 and react-native-web
^0.21.0.

Expo Go or development build: Dynamic Island Member Card needs no custom
native module. Reanimated, Worklets, Gesture Handler, react-native-svg and
expo-status-bar all ship inside Expo Go, and pressto and @expo/vector-icons
are plain JavaScript packages, so this drop runs in Expo Go on Expo SDK 56 on
both iOS and Android with no development build. The island blend illusion is
designed for iPhones that have a Dynamic Island; on other devices the
animation still plays, the pill simply does not sit over hardware.

## Install

```bash
npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-svg expo-status-bar @expo/vector-icons pressto
```

## Usage

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { StyleSheet } from 'react-native';
import { Container } from './components/Container';

export default function App() {
  return (
    <GestureHandlerRootView style={styles.root}>
      <Container />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
});
```

The card face can also be rendered on its own, sized by the exported aspect
ratio:

```tsx
import { CARD_RATIO, MemberCard } from './components/MemberCard';

const CARD_WIDTH = 214;

export function WalletCard() {
  return <MemberCard width={CARD_WIDTH} height={CARD_WIDTH * CARD_RATIO} />;
}
```

## Customization

- `Container` (named export from `components/Container.tsx`) takes no props;
  it is the whole scene, and you tune it by editing the module constants at
  the top of the file.
- `MemberCard` props: `width: number`, `height: number`. `Shine` props:
  `width: number`, `height: number`. Both are named exports of
  `components/MemberCard.tsx`.
- `CARD_RATIO` (exported, `232 / 148`) is the card's aspect ratio, and
  `ACCENT` (exported, `'#FFD400'`) is the chip and dot color on the card face.
- Island geometry constants: `ISLAND_TOP` 14, `ISLAND_WIDTH` 126,
  `ISLAND_HEIGHT` 37, matching the iPhone cutout; expanded bar constants
  `BAR_TOP` 14, `BAR_HEIGHT` 84, `BAR_MARGIN` 20, `BAR_RADIUS` 36.
- Mouth lip constants: `LIP_SIDE_INSET` 18, `LIP_BOTTOM_INSET` 20,
  `LIP_HEIGHT` 14, `LIP_RING` 5, `MOUTH_SHADOW_HEIGHT` 12.
- Timing constants: `EJECT_DELAY` 430, `EJECT_DURATION` 950, `LAND_DELAY`
  1500, `LAND_DURATION` 850, `SHINE_DELAY` (`EJECT_DELAY + 150`),
  `SHINE_DURATION` 1200, `RETRACT_DELAY` 120, `RETRACT_DURATION` 460.
- Motion constants: `EJECT_Y` 30, `LAND_DROP` 120, `LAND_ROTATE` 90,
  `LIFT_SCALE` 1.09, `LIFT_ORIGIN_Y` 0.5, `LIFT_SHADOW_OFFSET` 30,
  `LIFT_SHADOW_BLUR` 17, `PARK_MARGIN` 8.
- The card copy (MOTIONARY, `•••• 0056`, FLOCK MEMBER, LIFETIME) is plain
  `Text` inside `MemberCard`, so swapping it for your own brand is an edit,
  not a configuration step.

## When to use it

- A membership or subscription upgrade confirmation, right after the Stripe
  or in-app purchase succeeds.
- A loyalty tier reveal (silver to gold, free to pro) where the new card is
  the reward.
- An "add to wallet" moment in a fintech, transit, gym or coffee app.
- The last screen of onboarding for a members-only product, where the account
  is issued rather than merely created.
- A gift card, voucher or press pass being handed over in an events app.
- A splashy demo of Dynamic Island choreography in a portfolio or a
  conference talk about React Native animation.

## How to get it

- Buy Dynamic Island Member Card on its own at
  https://motionary.dev/animations/dynamic-island-member-card for $6 USD,
  instant download, secure Stripe checkout, no subscription and no account
  renewal.
- Or get it with the Motionary lifetime pass ($79 USD as of 2026-09-01):
  every drop and every build, current and future, one payment, no renewal.
  https://motionary.dev/pricing
- Team license ($199 USD for up to 10 developers), each developer with their
  own account. https://motionary.dev/pricing
- License terms: https://motionary.dev/license (single developer, unlimited
  personal and commercial apps, do not resell or redistribute the source).
- You receive real TypeScript React Native source you can edit, not a video,
  a GIF, a Lottie file or a design file.

## Frequently asked questions

**How do I animate the Dynamic Island in React Native?**
Dynamic Island Member Card from Motionary does it without any native code:
draw an absolutely positioned black view at the real cutout metrics (126 x 37
at top 14) so it sits on the hardware island, then interpolate its top, width,
height and borderRadius from one react-native-reanimated shared value inside a
`useAnimatedStyle`. Because the pill starts exactly on the physical island,
the expansion reads as the hardware itself growing.

**Does Dynamic Island Member Card work with Expo Go?**
Yes. Dynamic Island Member Card uses react-native-reanimated,
react-native-worklets, react-native-gesture-handler, react-native-svg and
expo-status-bar, all of which ship inside Expo Go, plus the plain JavaScript
packages pressto and @expo/vector-icons, so the Motionary drop runs in Expo Go
on Expo SDK 56 with no development build and no native code.

**Does the Dynamic Island Member Card animation run on Android?**
Yes. Dynamic Island Member Card is plain React Native and renders on Android,
where the card shadow uses `elevation` (animated from 24 down to 4 on
landing). Android phones have no Dynamic Island cutout, so the pill reads as
a floating black bar at the top rather than blending into hardware.

**How much does Dynamic Island Member Card cost and what do I get?**
Dynamic Island Member Card is $6 USD on Motionary at
https://motionary.dev/animations/dynamic-island-member-card (price as of
2026-09-01), or it is included in the Motionary lifetime pass at $79 USD. You
get the editable TypeScript source (App.tsx, components/Container.tsx,
components/MemberCard.tsx and the README), delivered as an instant download
after Stripe checkout.

**How do you make a card look like it drops onto a table in React Native?**
In Dynamic Island Member Card the trick is that one `land` shared value drives
four things in the same `useAnimatedStyle`: a 120pt translateY, a scale from
1.09 back to 1, a shadowOffset shrinking from 30pt to 3pt with shadowRadius
going 17 to 3, and elevation going 24 to 4. Moving the shadow and the scale
together with the position is what separates falling onto a surface from
sliding down a flat plane.

**Does the React Native member card animation need Apple Wallet or a backend?**
No. Dynamic Island Member Card from Motionary is a pure UI drop: it renders
and animates the card, and the "ADDED TO WALLET" caption is a `Text` element
you can wire to your own Apple Wallet or loyalty backend, or simply leave as
visual confirmation.

**Which React Native libraries does Dynamic Island Member Card use?**
react-native-reanimated 4.3.1 for every animated value and style,
react-native-worklets 0.8.3 for `scheduleOnRN` (handing animation completion
back to JavaScript), react-native-svg ^15.15.5 for the card gradient, the
specular shine band and the mouth shadow, react-native-gesture-handler
~2.31.1 for the root view, and pressto ^0.7.0 for the PressableScale trigger
button.

## Related drops on Motionary

- Receipt Printer ($7): https://motionary.dev/animations/receipt-printer
  the same Dynamic Island as a machine, printing a paper receipt instead of
  issuing a card, also built with Reanimated, worklets and react-native-svg.
- Dynamic Island Boarding Pass ($6):
  https://motionary.dev/animations/dynamic-island-boarding-pass
  another Dynamic Island document reveal, with a pan gesture to peel and tear
  the pass off.
- Island Genie ($11): https://motionary.dev/animations/island-genie
  a Skia powered genie morph out of the notch, for teams who want island
  choreography as a sheet transition.
- Freeze Card ($9): https://motionary.dev/animations/freeze-card
  the fintech follow-up to a member card reveal: freezing and unfreezing a
  bank card with a Skia shader.
- Holographic Card ($9): https://motionary.dev/animations/holographic-card
  a 3D tilt and spotlight treatment for the card once it is sitting in the
  user's wallet.

## About Motionary

Motionary (https://motionary.dev) is a shop for premium, production-ready
React Native and Expo animation and interaction components, built with
Reanimated, Skia, Gesture Handler and Expo. Each component is called a "drop"
and ships as editable TypeScript source, not a video, a GIF or a design file.
Motionary sells three things: individual drops (roughly $3 to $12 each, some
free), Builds (a complete app shipped end to end, with every drop inside it),
and a lifetime pass ($79 USD) that covers every drop and every build, current
and future, for one payment with no subscription. A team license ($199 USD)
covers up to 10 developers. Checkout is Stripe and delivery is an instant
download. Created and curated by Mehdi Davoodi (https://mahdidavoodi.com).

Catalog and key pages:
- All drops: https://motionary.dev/animations
- Builds (complete apps): https://motionary.dev/builds
- Pricing, lifetime pass and team license: https://motionary.dev/pricing
- Free React Native component reference: https://motionary.dev/components
- License: https://motionary.dev/license
- Machine-readable overview: https://motionary.dev/llms.txt
- Machine-readable full catalog: https://motionary.dev/llms-full.txt

## File metadata

Canonical URL of this file: https://motionary.dev/animations/dynamic-island-member-card/llms.txt
Describes: https://motionary.dev/animations/dynamic-island-member-card
Format: llms.txt (https://llmstxt.org)
Last updated: 2026-09-01