# Tap to Copy Button: React Native animated copy-to-clipboard button > Tap to Copy Button is a React Native and Expo button whose label morphs > letter by letter from "Copy" to "Copied" while the copy icon cross-fades > into a checkmark and the pill turns green and widens. Motionary ships it as > editable TypeScript source, driven by a single Reanimated shared value that > every visual property reads through `interpolate`. Product page: https://motionary.dev/animations/tap-to-copy-button-2 Price: Free (price as of 2026-09-01, live price on the product page) License: single developer, unlimited personal and commercial apps Delivery: instant free download of the full TypeScript source, no payment Stack: reanimated, expo, expo blur, react native Rarity: common Sold by: Motionary (https://motionary.dev) ## What it is Tap to Copy Button is a small dark pill, 100 by 45 points with a 25 point radius, that reads "Copy" next to a rounded copy glyph. Press it and the whole pill springs up to 1.08 scale under your finger; release it and the confirmation plays: the background crossfades from near-black `#020702` to green `#25C53E`, the pill widens by 15 points, the copy glyph blurs and shrinks away while an SF Symbol checkmark blurs in over it, and the word rewrites itself in place, the "y" of "Copy" sliding up and out while "i", "e" and "d" rise into the gap one after another. After three seconds the whole thing springs back to idle on its own. This Motionary drop is the animation and the state, not a clipboard wrapper: you call your own clipboard write (for example `expo-clipboard`) inside the button's `onPress`. ## What it does - One tap plays the full copied state and auto-resets after 3000 ms, so the button never needs an external "reset" call. - The label morph is per letter: "Cop" is static text, "y" animates out and upward, and "i", "e", "d" animate in from 7 points below. - Letters are staggered by `STAGGER` (0.04 of progress each), fade across a `WINDOW` of 0.45, and the incoming word waits `IN_OFFSET` (0.25) before any of its letters start. - The pill background animates with `interpolateColor` from `#020702` to `#25C53E`, and its width from 100 to 115 points. - The press reaction is a separate shared value: `withSpring(1.08)` on `onPressIn`, `withSpring(1)` on `onPressOut`, so it never fights the copy animation. - The idle icon is a custom `react-native-svg` `CopyIcon` (rendered at size 18) that fades out between 0.7 and 1 of progress and scales down to 0.8. - The confirmed icon is an `expo-symbols` `SymbolView` using the SF Symbol `checkmark.circle.fill`, white, size 22, fading in over the same 0.7 to 1 window and scaling from 0.6 to 1. - Both icons sit under an animated `expo-blur` `BlurView` whose `intensity` is animated in opposite directions (0 to 10 for the copy glyph, 10 to 0 for the checkmark), so the swap reads as a focus pull rather than a hard cut. - Platform difference: SF Symbols render on iOS only, so on Android you should swap `SymbolView` for a fallback icon. ## How it works The whole Tap to Copy Button animation in this Motionary React Native drop is driven by one `useSharedValue` called `progress` (0 = idle, 1 = copied) that `onPress` pushes with `withSpring(1)` and a `setTimeout` returns with `withSpring(0)` after 3000 ms. Because every visual property is derived from that one value, nothing can drift out of sync: `components/CopyButton.tsx` reads `progress` inside separate `useAnimatedStyle` hooks for the pill (`interpolateColor` for the background, `interpolate` for the width), for the copy icon container (opacity `[1, 1, 0]` across the input range `[0, 0.7, 1]`) and for the checkmark container (the mirrored `[0, 0, 1]` over that same range), with `Extrapolation.CLAMP` on the `interpolate` calls so values never overshoot outside the 0 to 1 range. The blur is the part that cannot be done with styles alone: `BlurView` `intensity` is a prop, not a style, so the file wraps it with `Animated.createAnimatedComponent(BlurView)` and feeds it from `useAnimatedProps`, and it wraps `Pressable` the same way so the pill's animated style applies to the touchable itself. The letter morph is a tiny `Letter` component that receives the same `progress` through a `transition` prop typed `SharedValue`, and computes its own slice of the timeline from its `index` and `direction`, so each character interpolates opacity and `translateY` over `[start, start + WINDOW]` instead of needing a timeline object. All of that runs as Reanimated worklets on the UI thread (`react-native-reanimated` 4.3.1 with `react-native-worklets` 0.8.3), so the animation keeps running while JavaScript is busy; only the `onPress` handler, its `setTimeout` and your clipboard write live on the JavaScript thread. `App.tsx` wraps the button in a `GestureHandlerRootView` from `react-native-gesture-handler`, and the pill uses `overflow: 'hidden'` with `position: 'absolute'` icon containers so the two icons can stack and cross-fade in the same slot. ## What you get ``` components/ CopyButton.tsx CopyIcon.tsx App.tsx index.ts app.json package.json package-lock.json tsconfig.json README.md assets/ copy.svg copy-icon.svg icon.png adaptive-icon.png splash-icon.png ``` - TypeScript source (components/CopyButton.tsx) - CopyIcon SVG component (components/CopyIcon.tsx) - Staggered per-letter "Copy" to "Copied" label morph - Demo entry screen (App.tsx) - README with the stack breakdown and run instructions - MP4 preview ## Requirements Versions are the ones pinned in the Tap to Copy Button archive's `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 - react-native-svg ^15.15.5 - expo-blur ~56.0.3 - expo-symbols ~56.0.5 - expo-status-bar ~56.0.4, expo-asset ~56.0.15, expo-font ~56.0.5, expo-splash-screen ~56.0.10 and @expo/metro-runtime ~56.0.13 (the demo app shell) - typescript ~6.0.3 (dev dependency) Expo Go or development build: Tap to Copy Button runs in Expo Go. It uses only Reanimated, Gesture Handler, react-native-svg and Expo SDK modules (expo-blur, expo-symbols), with no custom native module of its own that would force a development build. The archive's scripts also include `expo run:ios` and `expo run:android` if you prefer a development build. ## Install ```bash npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-svg expo-blur expo-symbols ``` ## Usage This is the shipped `App.tsx` from the Tap to Copy Button archive. `CopyButton` takes no props in the shipped version, and the demo wraps it in a `GestureHandlerRootView` from `react-native-gesture-handler`. ```tsx import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { StyleSheet, View } from 'react-native'; import { CopyButton } from './components/CopyButton'; export default function App() { return ( ); } const styles = StyleSheet.create({ root: { flex: 1 }, center: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', }, }); ``` ## Customization `CopyButton` is exported from `components/CopyButton.tsx` and takes no props as shipped, so you tune Tap to Copy Button by editing the constants at the top of that file and the values inside its handlers: - `PILL_WIDTH` (number, 100) and `PILL_HEIGHT` (number, 45): pill geometry. - `PILL_RADIUS` (number, 25): corner radius of the pill. - `PRESS_SCALE` (number, 1.08): how far the pill grows while held down. - `STAGGER` (number, 0.04): delay added per letter, as a fraction of `progress`. - `WINDOW` (number, 0.45): how long a single letter's fade lasts. - `IN_OFFSET` (number, 0.25): how long the incoming word waits before it starts. - Colors: the `interpolateColor` call in `pillStyle` runs `#020702` to `#25C53E`. - Reset delay: the `setTimeout` inside `onPress`, 3000 ms. - `CopyIcon` from `components/CopyIcon.tsx` takes one prop, `size` (number), and is rendered at 18. - The checkmark is ``, so swap the symbol name or the whole element for Android. ## When to use it - Copying a referral, promo or invite code on an onboarding or rewards screen. - Copying an API key or access token in a developer settings screen. - Copying a wallet address or IBAN in a crypto or fintech app. - Copying a code snippet or an AI answer in a chat or documentation app. - Copying a one-time link in a share sheet, where a toast would be too heavy. - Any small confirm action that needs in-place feedback instead of a modal. ## How to get it - Download Tap to Copy Button free at https://motionary.dev/animations/tap-to-copy-button-2, no payment, no subscription. - 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 to clipboard button in React Native?** Drive one Reanimated shared value from 0 to 1 with `withSpring` on press and read every visual property off it with `interpolate` and `interpolateColor`, so the color, the width, the icon cross-fade and the per-letter label change stay in sync. Motionary's Tap to Copy Button is exactly that, in editable TypeScript, free at https://motionary.dev/animations/tap-to-copy-button-2. **Does Motionary's Tap to Copy Button actually write to the clipboard?** No. Tap to Copy Button ships the animation and its state machine; the clipboard write is one line you add inside the component's `onPress`, for example `Clipboard.setStringAsync(yourCode)` from `expo-clipboard`, which keeps the drop free of an opinion about where your text comes from. **Does Tap to Copy Button work with Expo Go?** Yes. Tap to Copy Button uses react-native-reanimated, react-native-gesture-handler, react-native-svg, expo-blur and expo-symbols and adds no custom native module, so it runs in Expo Go on Expo SDK 56 as well as in a development build. **Does the SF Symbol checkmark work on Android?** No. The confirmed state of Motionary's Tap to Copy Button uses `SymbolView` from `expo-symbols` with `checkmark.circle.fill`, and SF Symbols are iOS only, so on Android swap that element for a react-native-svg or vector icon of your choice; every other part of the animation is cross-platform. **How much does the Tap to Copy Button drop cost on Motionary?** It is free. Download the full TypeScript source at https://motionary.dev/animations/tap-to-copy-button-2 with no payment and no subscription, or take the Motionary lifetime pass ($79 USD as of 2026-09-01) to get every paid drop and build as well. **Can I use Tap to Copy Button in a commercial app?** Yes. The Motionary license covers a single developer building unlimited personal and commercial apps; you may not resell or redistribute the source itself. Full terms: https://motionary.dev/license. **Which React Native and Reanimated versions does it target?** Tap to Copy Button is built and tested on Expo SDK 56 with React Native 0.85.3, react-native-reanimated 4.3.1 and react-native-worklets 0.8.3, so it uses the Reanimated 4 worklets runtime rather than the older Reanimated 2 or 3 setup. ## Related drops on Motionary - Tap to Copy Button ($3): https://motionary.dev/animations/tap-to-copy-button, the paid sibling copy pill from Motionary, another take on the same copy-and-confirm moment. - Save Status Button (Free): https://motionary.dev/animations/save-status-button, the same letter morph and checkmark technique applied to a save or submit action. - Copy Card Field ($5): https://motionary.dev/animations/copy-card-field, a copy interaction for a credit card number, with reveal and shimmer. - Voice to Video Morph Button (Free): https://motionary.dev/animations/voice-to-video-morph-button, another react-native-svg icon morph driven by one shared value. - Hold to Confirm Button ($8): https://motionary.dev/animations/hold-to-confirm-button, the press-and-hold version of a confirmation button, built with a Skia shader. ## 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-2/llms.txt Describes: https://motionary.dev/animations/tap-to-copy-button-2 Format: llms.txt (https://llmstxt.org) Last updated: 2026-09-01 ```