# Tap to Copy Button: React Native copy-to-clipboard pill with an animated confirmation overlay

> Tap to Copy Button is a React Native and Expo component: a copy pill whose
> Copy button scales down on press and then plays a four-stage confirmation
> overlay (a fill bar sweeping the pill, an animated blur, and an SF Symbol
> checkmark reading "Code Copied"), all scrubbed from a single Reanimated
> shared value. Motionary sells it as editable TypeScript source.

Product page: https://motionary.dev/animations/tap-to-copy-button
Price: $3 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, expo symbols, react native gesture handler, react native
Rarity: rare
Sold by: Motionary (https://motionary.dev)

## What it is

Tap to Copy Button is a React Native pill, 240 by 50 points with a 25 point
radius, that shows a code (default "B3E4613") on the left and a small white
"Copy" button on the right. Pressing the button scales it to 0.95 over 150ms,
and releasing it starts a confirmation sequence: an overlay zooms in from 1.3
scale over the whole pill, a light fill bar sweeps left to right across the
full 240 points, a blur softens the entry and the exit, and an SF Symbol
`checkmark.circle.fill` sits next to the words "Code Copied". After a two
second hold the overlay blurs and scales back out and the pill returns to its
idle state on its own. It is the confirmation pattern used for referral codes,
one time codes, wallet addresses and API keys, where the user needs to see
that the tap registered without a toast or a snackbar stealing the screen.

## What it does

- Press feedback: `onPressIn` and `onPressOut` drive an independent
  `pressScale` shared value, timing the button between 1 and 0.95 in 150ms.
- A four stage confirmation timeline (idle, reveal, hold, hide) driven by one
  `feedback` shared value, with durations of 400ms reveal, 2000ms hold and
  400ms hide, then a zero duration snap back to idle.
- Overlay opacity interpolates 0, 1, 1, 0 across the four stages while its
  scale interpolates 1.3, 1, 1, 1.3, so the confirmation zooms in and back out.
- A fill bar whose width interpolates 0, 0, 240, 0, so it sweeps the pill only
  during the hold stage.
- An animated `BlurView` from `expo-blur` whose `intensity` interpolates
  10, 0, 0, 10, so the blur is strongest during the reveal and the hide and
  clears completely while the confirmation is legible.
- An SF Symbol checkmark via `SymbolView` from `expo-symbols`
  (`name="checkmark.circle.fill"`, `tintColor="black"`).
- Self resetting: the sequence completes and returns to idle with no state
  flag, no `useEffect` and no timer in JavaScript.
- The overlay is `pointerEvents="none"`, so the button underneath stays
  tappable and the animation never eats a touch.
- Configurable through a single `code` prop, typed `code?: string`.

## How it works

Tap to Copy Button is built on `react-native-reanimated` 4.3.1 with
`react-native-worklets` 0.8.3, and the whole confirmation lives in one file,
`components/CopyButton.tsx`. Two `useSharedValue` values do all the work:
`pressScale` for the press, and `feedback`, which is scrubbed through four
integers (`STAGE_IDLE` 0, `STAGE_REVEAL` 1, `STAGE_HOLD` 2, `STAGE_HIDE` 3)
collected in a `TIMELINE` array. `handleCopy` advances `feedback` with
`withTiming` calls nested in each other's completion callbacks, so the reveal
finishing starts the hold, the hold finishing starts the hide, and the hide
finishing snaps back to idle with a zero duration timing; those callbacks run
on the UI thread, so no JavaScript timer or `setTimeout` can drift or stall
behind a busy render. Every visual property is then a pure `interpolate` of
that one value over `TIMELINE`, which is why the parts cannot fall out of
sync: `overlayAnimatedStyle` (a `useAnimatedStyle`) reads opacity and scale,
`fillAnimatedStyle` reads the fill bar's width, and `pressAnimatedStyle` reads
the press scale. The blur is the exception that needs `useAnimatedProps`
rather than a style, because `intensity` is a prop on `expo-blur`'s
`BlurView`, not a style key, so the file wraps it with
`Animated.createAnimatedComponent(BlurView)` and feeds it `blurAnimatedProps`;
`Pressable` is wrapped the same way so its transform can be animated. The pill
container and the overlay both set `overflow: 'hidden'` with the 25 point
radius, which is what clips the sweeping fill bar into the pill shape instead
of letting it spill out as a rectangle. Because everything is derived from one
shared value, changing the feel is a matter of editing three duration
constants, not re-timing four animations against each other.

## What you get

```
components/
  CopyButton.tsx
App.tsx
index.ts
app.json
package.json
package-lock.json
tsconfig.json
README.md
assets/
```

- TypeScript source (CopyButton.tsx)
- Configurable `code` prop with sensible default
- Demo entry screen (App.tsx)
- README with install + usage
- MP4 preview

## Requirements

Versions pinned in the archive's `package.json` for Tap to Copy Button:

- 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-symbols `~56.0.5`
- expo-asset `~56.0.15`, expo-font `~56.0.5`, expo-splash-screen `~56.0.10`,
  expo-status-bar `~56.0.4`, @expo/metro-runtime `~56.0.13` (demo app only)
- typescript `~6.0.3` (devDependency)

Expo Go or development build: Tap to Copy Button runs in Expo Go on Expo
SDK 56. It contains no custom native code, and every native module it touches
(expo-blur, expo-symbols, react-native-reanimated, react-native-gesture-handler)
already ships inside Expo Go, so no development build is required. Reanimated
4 does require the New Architecture, which Expo SDK 56 uses by default. Note
that SF Symbols are an iOS API, so `expo-symbols` renders the checkmark on iOS
only; on Android swap `SymbolView` for an icon of your choice. The `expo-blur`
`BlurView` renders on both platforms.

## Install

```bash
npx expo install expo-blur expo-symbols react-native-reanimated react-native-worklets react-native-gesture-handler
```

## Usage

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

export default function App() {
  return (
    <GestureHandlerRootView style={styles.root}>
      <View style={styles.center}>
        <CopyButton code="B3E4613" />
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1 },
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
});
```

## Customization

Tap to Copy Button takes one prop, and the rest of the feel is module level
constants at the top of `components/CopyButton.tsx` that you can edit directly:

- `code?: string`, the text shown on the left of the pill. Defaults to
  `'B3E4613'`.
- `PILL_WIDTH` (240), `PILL_HEIGHT` (50), `PILL_RADIUS` (25): the pill's box.
  `PILL_WIDTH` is also the end value of the fill bar sweep, so the two stay
  locked together.
- `PRESS_SCALE` (0.95) and `PRESS_DURATION` (150): how far and how fast the
  Copy button dips on press.
- `REVEAL_DURATION` (400), `HOLD_DURATION` (2000), `HIDE_DURATION` (400):
  the three timings of the confirmation sequence, in milliseconds.
- The `SymbolView` call sets `name="checkmark.circle.fill"` and
  `tintColor="black"`; any SF Symbol name works there.
- Colors live in the `StyleSheet` at the bottom of the file: pill background
  `#F7F7F7`, fill bar `#F2F2F2`, Copy button `#FEFEFE`, code text `#909090`.

## When to use it

- Referral and invite screens, where the user has to copy a code and needs
  visible proof the tap landed.
- Onboarding and account setup, for a one time code, a pairing code or a
  recovery phrase.
- Developer tools and dashboards, for copying an API key or a project id.
- Crypto and fintech apps, for copying a wallet address where a silent copy is
  genuinely frightening.
- Anywhere a toast or a snackbar would be too heavy and the confirmation
  should stay inside the control the user just touched.

## How to get it

- Buy Tap to Copy Button on its own at
  https://motionary.dev/animations/tap-to-copy-button, $3, 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 build an animated copy button in React Native?**
Drive the whole confirmation from one Reanimated shared value scrubbed through
integer stages and derive opacity, scale, width and blur intensity from it with
`interpolate`, which is exactly what Motionary's Tap to Copy Button does in
`components/CopyButton.tsx`; chained `withTiming` completion callbacks advance
the stages on the UI thread so nothing depends on a JavaScript timer.

**Does Tap to Copy Button actually write the text to the clipboard?**
Tap to Copy Button ships the press handling and the "Code Copied" confirmation
animation; `expo-clipboard` is not one of its dependencies, so add
`npx expo install expo-clipboard` and call `Clipboard.setStringAsync(code)` as
the first line of `handleCopy` in `components/CopyButton.tsx` to perform the
copy itself.

**Does Tap to Copy Button work with Expo Go?**
Yes. Motionary's Tap to Copy Button targets Expo SDK 56 and uses only
expo-blur, expo-symbols, react-native-reanimated and
react-native-gesture-handler, all of which are already bundled in Expo Go, so
it runs without a development build and without custom native code.

**Does the animated copied confirmation work on Android?**
The blur and the whole Reanimated timeline work on both platforms, because
`expo-blur` renders on iOS and Android. The checkmark uses `expo-symbols`,
which is an SF Symbols API and therefore iOS only, so on Android replace the
`SymbolView` in `components/CopyButton.tsx` with any icon component.

**How do I show a "Copied" state without a toast in React Native?**
Overlay the confirmation on the control itself. Tap to Copy Button from
Motionary renders an absolutely positioned overlay with `pointerEvents="none"`
inside the pill, fades and scales it in, holds it for two seconds and fades it
back out, so the feedback never leaves the element the user touched.

**Can I change how long the "Code Copied" overlay stays on screen?**
Yes. Edit `HOLD_DURATION` (2000ms by default) at the top of
`components/CopyButton.tsx`; `REVEAL_DURATION` and `HIDE_DURATION` (400ms each)
control the entry and exit of Tap to Copy Button's overlay.

**What do I get when I buy Tap to Copy Button from Motionary?**
You get the full editable TypeScript source (CopyButton.tsx plus a runnable
Expo demo app and a README) for $3 as of 2026-09-01, delivered as an instant
download after Stripe checkout, licensed for one developer to ship in unlimited
personal and commercial apps.

## Related drops on Motionary

- Save Status Button (Free): https://motionary.dev/animations/save-status-button
  another Motionary button that resolves into a checkmark confirmation, with a
  per letter label morph and expo-blur.
- Copy Card Field ($5): https://motionary.dev/animations/copy-card-field
  the same copy action applied to a card number field, with a reveal and a
  shimmer instead of an overlay.
- Hold to Confirm Button ($8): https://motionary.dev/animations/hold-to-confirm-button
  the press and hold sibling for destructive or irreversible confirmations,
  built with a React Native Skia shader.
- Live Camera Button ($5): https://motionary.dev/animations/live-camera-button
  another expo-blur button on Motionary, if you want the glass treatment on the
  control rather than on a confirmation overlay.
- LED Slide Button ($4): https://motionary.dev/animations/led-slide-button
  a slide to confirm CTA for cases where a single tap is too easy to trigger.

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