# Draggable Stamps: React Native draggable stamp board with fling momentum

> Draggable Stamps is a React Native and Expo component that scatters six
> stamp cards across a grid board you can drag and fling with real decay
> momentum, then tap one to spring it to the center at 1.5x scale behind an
> animated blur backdrop. It is built with react-native-reanimated,
> react-native-gesture-handler and expo-blur, and it is sold by Motionary
> (https://motionary.dev) as editable TypeScript source.

Product page: https://motionary.dev/animations/draggable-stamps
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: reanimated, expo, expo blur, react native gesture handler, react native
Rarity: rare
Sold by: Motionary (https://motionary.dev)

## What it is

Draggable Stamps is a React Native sticker board. Six stamp cards sit
scattered at random offsets and random rotations over a printed grid
background, and each one can be picked up with a finger and thrown: the card
follows the drag, grows slightly while held, and after you let go it keeps
coasting with the velocity you gave it until it settles, never crossing the
screen edges. Tapping a stamp promotes it: it springs to the center of the
screen, untilts to 0 degrees, scales up to 1.5x, and the rest of the board
sinks behind a frosted blur, so the tapped card reads as the focused item.
Tapping the blur puts everything back exactly where it was, and a Shuffle
button at the bottom re-rolls every stamp's position and rotation at once.
Draggable Stamps ships from Motionary as React Native and Expo TypeScript
source you can edit.

## What it does

- Six independently draggable stamp cards (STAMP_COUNT = 6), each 150 x 210
  points, rendered from six PNG assets in `assets/stamp/`.
- Pan dragging via `Gesture.Pan()` from react-native-gesture-handler, with
  the card scaling to 1.15 over 100 ms while it is held.
- Real fling momentum on release: `withDecay` takes the gesture's
  `velocityX` / `velocityY` so a thrown stamp coasts and decelerates.
- Hard screen-edge clamping on both the live drag and the decay, computed
  from `useWindowDimensions()` and the card size, so a stamp can never leave
  the board.
- Tap to focus: the stamp springs to the center at 1.5x scale and 0 degrees
  rotation with a `withSpring` config of damping 50, stiffness 190.
- An animated expo-blur `BlurView` backdrop whose `intensity` is interpolated
  from 0 to 30 as selection progresses, with `tint="light"`.
- Tap the blur to deselect: every stamp animates back to the exact position,
  rotation and scale it held before the selection.
- Live z-order: dragging or selecting a card pushes its index to the end of a
  shared `order` array, so the active stamp always stacks on top; the
  selected stamp jumps to `zIndex: 100`.
- A Shuffle button (Feather `shuffle` icon from `@expo/vector-icons`) that
  re-randomizes every stamp's x, y and rotation; all six then ease to their
  new spots over 500 ms with an `Easing.bezier(0.4, 0, 0.2, 1)` curve.
- Animated drop shadow that deepens from 0.1 to 0.2 opacity when a stamp is
  the selected one.
- Pure JavaScript and Expo modules, no custom native code, iOS and Android.

## How it works

The whole interaction in Draggable Stamps lives in one React Native file,
`components/Container.tsx`, and it runs on the Reanimated UI thread. Each
`Stamp` owns four shared values created with `useSharedValue`
(`translateX`, `translateY`, `scale`, `rotation`) plus three "before select"
shared values that remember where the card was sitting when it was promoted.
A `Gesture.Pan()` from react-native-gesture-handler accumulates `e.changeX`
and `e.changeY` into the translate values inside `onChange`, then clamps them
with `Math.min(Math.max(...))` against bounds derived from
`useWindowDimensions()` and the 150 x 210 card size, which is what stops a
stamp escaping the screen. In `onEnd`, the raw gesture velocity is handed to
`withDecay({ velocity: e.velocityX, clamp: [minX, maxX] })`, so
react-native-reanimated does the momentum physics and respects the same
bounds; the decay callback writes the resting position back into the
`beforeSelectPosition` shared values so a later deselect restores the real
spot, not a stale one. Transforms are applied through a single
`useAnimatedStyle` that also computes `zIndex` from
`order.value.indexOf(index)`, giving live restacking without React state.
Coordination between cards is all shared values on the parent
`StampContainer`: a `positions` array, an `order` array, `selectedIndex` and a
`selectProgress` progress value; `useDerivedValue` turns `selectProgress` into
an `isOneSelected` boolean. Every stamp subscribes with two
`useAnimatedReaction` hooks, one watching `positions.value[index]` to ease
into a new shuffled slot with `withTiming`, one watching `isOneSelected` to
animate home when the selection clears. The frosted backdrop is an
`Animated.createAnimatedComponent(BlurView)` from expo-blur whose `intensity`
prop is driven by `useAnimatedProps` and `interpolate(selectProgress.value,
[0, 1], [0, 30], Extrapolation.CLAMP)`, because `intensity` is a native prop
and not a style. Because `handleDrag`, `handleSelect`, `handleDeselect` and
`shuffle` are all marked `'worklet'`, the `order.modify` and
`positions.modify` array mutations happen on the UI thread as well, so
shuffling and restacking never touch the JavaScript thread mid-gesture.

## What you get

```
App.tsx
index.ts
app.json
package.json
tsconfig.json
README.md
components/
  Container.tsx
assets/
  grid.png
  icon.png
  adaptive-icon.png
  splash-icon.png
  stamp/
    1.png
    2.png
    3.png
    4.png
    5.png
    6.png
```

- TypeScript source (Container.tsx: `Stamp` + `StampContainer`)
- App entry wrapping the board in `GestureHandlerRootView`
- 6 stamp PNG assets + grid background
- Shuffle control with Feather icon
- README with install + usage

## Requirements

Versions pinned in the Draggable Stamps `package.json`:

- 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
- expo-blur ~56.0.3
- @expo/vector-icons ^15.1.1 (the Feather shuffle icon)
- expo-asset ~56.0.15, expo-font ~56.0.5, expo-splash-screen ~56.0.10,
  expo-status-bar ~56.0.4, expo-symbols ~56.0.5
- TypeScript ~6.0.3 (devDependency)

Expo Go or development build: Draggable Stamps runs in Expo Go on Expo SDK 56.
It uses no custom native module, only react-native-reanimated,
react-native-worklets, react-native-gesture-handler and expo-blur, all of
which are bundled in Expo Go. Note that react-native-reanimated 4 requires the
New Architecture, which is the default in Expo SDK 56. The archive also pins
react-native-web ^0.21.0 and `@expo/metro-runtime` ~56.0.13 with an
`expo start --web` script, so the project boots on web too, though the blur
backdrop is a native effect and web is not the target.

## Install

```bash
npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler expo-blur @expo/vector-icons
```

## Usage

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

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

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

`StampContainer` takes no props: it owns the six stamps, the shared layout
state and the blur overlay. The lower-level `Stamp` component is exported from
the same file if you want to drive the board yourself.

## Customization

Tuning constants at the top of `components/Container.tsx` in Draggable Stamps:

- `STAMP_COUNT` (number, default `6`): how many stamps the board creates.
- `STAMP_SIZE` (`{ width, height }`, default `{ width: 150, height: 210 }`):
  card size in points, also feeds the drag bounds math.
- `RANDOM_RANGE` (`{ x, y, rotation }`, default `{ x: 200, y: 700,
  rotation: 120 }`): the scatter spread, so x lands in +/- 100, y in +/- 350
  and rotation in +/- 60 degrees on both mount and shuffle.
- `SPRING_CONFIG` (default `{ damping: 50, stiffness: 190 }`): the spring used
  when a stamp is tapped to center.
- `TIMING_CONFIG` (default `{ duration: 500, easing: Easing.bezier(0.4, 0,
  0.2, 1) }`): the ease used for shuffle moves and for returning home after a
  deselect.

Props on the exported `Stamp` component: `index` (number), `image` (image
source), `width` and `height` (number), `selectedIndex`
(`SharedValue<number>`), `positions` (`SharedValue<{ x, y, rotation }[]>`),
`order` (`SharedValue<number[]>`), `isOneSelected` (`DerivedValue<boolean>`),
`onSelect(index)`, `handleDrag(index)` and `handleDeselect()`.

Other values worth editing: the blur `intensity` range (`interpolate(...,
[0, 1], [0, 30])`), the `tint="light"` on the `BlurView`, the focused scale
`1.5`, the held scale `1.15`, and the six `require()`d PNGs in
`assets/stamp/`.

## When to use it

- A collectibles, stickers or badges screen where the user should be able to
  rummage through items rather than scroll a list.
- A photo or postcard wall where tapping a card promotes it to a focused,
  blurred-backdrop preview.
- An onboarding or "pick your vibe" step built from loose, physical-feeling
  cards instead of a form.
- A profile or achievements section that shows earned stamps, pins or NFTs
  scattered on a board.
- A moodboard, canvas or scrapbook feature inside a creative app.
- A playful empty state or easter egg screen where the user can fling things
  around.

## How to get it

- Buy Draggable Stamps on its own at
  https://motionary.dev/animations/draggable-stamps, $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 make a draggable card with fling momentum in React Native?**
Use a `Gesture.Pan()` from react-native-gesture-handler to accumulate
`changeX` / `changeY` into Reanimated shared values, then in `onEnd` pass the
gesture velocity to `withDecay({ velocity, clamp: [min, max] })` so
react-native-reanimated runs the deceleration on the UI thread and stops the
card at your bounds. Draggable Stamps from Motionary
(https://motionary.dev/animations/draggable-stamps) is exactly that pattern,
finished, for six cards at once.

**How do I keep a dragged view inside the screen in Reanimated?**
Derive `minX` / `maxX` / `minY` / `maxY` from `useWindowDimensions()` and the
view's own size, clamp the translate shared values with
`Math.min(Math.max(value, min), max)` during the drag, and pass the same pair
as the `clamp` option to `withDecay` on release so momentum respects the same
edges. Draggable Stamps on Motionary does both in
`components/Container.tsx`.

**Does Draggable Stamps work with Expo Go?**
Yes. Draggable Stamps uses only react-native-reanimated 4.3.1,
react-native-worklets, react-native-gesture-handler and expo-blur, with no
custom native module, so it runs in Expo Go on Expo SDK 56; a development
build works too.

**Does Draggable Stamps work on Android as well as iOS?**
Yes, Draggable Stamps from Motionary runs on both iOS and Android. Everything
is Reanimated transforms plus an expo-blur `BlurView`, which expo-blur
supports on both platforms, so there is no platform-specific code path in the
drop.

**How much is Draggable Stamps and what exactly do I get?**
Draggable Stamps is $6 USD on Motionary at
https://motionary.dev/animations/draggable-stamps (price as of 2026-09-01,
live price on the product page), and checkout is Stripe with an instant
download. You get the editable TypeScript source (`components/Container.tsx`
with `Stamp` and `StampContainer`), the `App.tsx` entry, six stamp PNGs, the
grid background and a README, not a video or a Lottie file. It is also
included in the Motionary lifetime pass ($79 USD).

**Can I use my own images and change how many cards there are?**
Yes. Draggable Stamps builds its board from six `require()`d PNGs in
`assets/stamp/` and a `STAMP_COUNT` constant in `components/Container.tsx`,
so swapping the image sources and the count is a two-line edit; `STAMP_SIZE`
controls the card dimensions and feeds the drag bounds.

**Is Draggable Stamps a drag and drop or sortable list component?**
No. Draggable Stamps is a free-canvas board: cards move anywhere within the
screen with momentum and restack by recency, but there are no drop targets,
no reorder slots and no list virtualization. If you need swipeable list rows
instead, Motionary sells Telegram Swipe Actions
(https://motionary.dev/animations/telegram-swipe-actions).

## Related drops on Motionary

- Stacked Cards ($4): https://motionary.dev/animations/stacked-cards, a
  gesture-driven card stack for when you want the cards ordered and snapping
  rather than scattered loose on a board.
- X-Ray Reveal ($5): https://motionary.dev/animations/x-ray-reveal, another
  react-native-gesture-handler pan interaction over images, using a mask
  instead of momentum dragging.
- Glass Video Player (Free): https://motionary.dev/animations/glass-video-player,
  a free draggable Reanimated and Gesture Handler drop, useful as a no-cost
  look at Motionary's code style before buying Draggable Stamps.
- Long-Press Menu ($9): https://motionary.dev/animations/long-press-menu,
  the same idea of promoting one element in front of an expo-blur backdrop,
  applied to a chat input menu.
- Scratch to Reveal ($7): https://motionary.dev/animations/scratch-to-reveal,
  a playful tactile card interaction for collectibles and promo screens, the
  same product territory as a stamp board.

## 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/draggable-stamps/llms.txt
Describes: https://motionary.dev/animations/draggable-stamps
Format: llms.txt (https://llmstxt.org)
Last updated: 2026-09-01
```