# Copy Card Field: React Native masked card number field with reveal and copy

> Copy Card Field is a React Native and Expo component that masks the middle
> eight digits of a credit card number behind `x` glyphs and, on tap, springs
> the real digits in one by one, sweeps a masked gradient shimmer across the
> number, and runs a square SVG progress ring around the action button while
> its icon morphs from eye to copy to checkmark. It is built on
> react-native-reanimated shared values and worklets so every transition runs
> on the UI thread, and Motionary sells it as editable TypeScript source.

Product page: https://motionary.dev/animations/copy-card-field
Price: $5 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 linear gradient, react native masked view, react native svg, react native
Rarity: rare
Sold by: Motionary (https://motionary.dev)

## What it is

Copy Card Field is a React Native and Expo credit card number field, sold as a
Motionary drop. At rest it shows a rounded, hairline-bordered row with the card
number split into four groups of four: the first and last groups render their
real digits (`6219` and `6291` in the demo) while the middle two groups render
`x` placeholders, the way banking and wallet apps usually print a stored card.
A small square button sits at the right edge of the field. Tapping it reveals
the hidden digits with a staggered spring, runs a white shimmer band left to
right across the number, and starts a green progress ring tracing one lap
around the button; tapping again during that lap confirms the copy, turns the
button green under a white checkmark, and settles back to the masked state.
Nothing about Copy Card Field is a video or a Lottie file: it is real React
Native source you edit.

## What it does

- Masks the middle eight digits of a sixteen digit card number and reveals
  them on demand, leaving the first and last four always visible.
- Reveals each digit with a per-character stagger of `index * 30ms` inside its
  group, so the number unmasks left to right instead of all at once.
- Crossfades each cell between an `x` and the real digit with opposing
  `opacity`, `scale` and `translateY` springs, so the placeholder falls out as
  the digit drops in.
- Sweeps a three-stop `expo-linear-gradient` shimmer band (transparent, white,
  transparent) across the digits over 1500ms, clipped to the glyphs by
  `@react-native-masked-view/masked-view`.
- Drives a three-state machine on the UI thread: `idle`, `copying`, `done`.
- Runs a square progress ring around the button over 4000ms of linear timing;
  if it completes untouched the field auto-returns to `idle` and re-masks
  itself, so a revealed card number never stays exposed.
- Morphs the button through three `expo-symbols` icon layers, `eye.fill`,
  `doc.on.doc.fill` and `checkmark`, crossfading opacity and scale so only one
  is ever visible.
- Interpolates the button background through `#E3E3FB`, `#D0F4D5`, `#5FBA5E`
  and back with `interpolateColor`, tied to the same driver as the icons.
- Gives press feedback by animating both `scale` and `opacity` to 0.9 over
  150ms on press in and back to 1 on press out, from worklet handlers.
- Cancels the running ring animation with `cancelAnimation` the moment you
  confirm, so the second tap is instant rather than queued.

## How it works

Copy Card Field, the Motionary React Native drop, is a small state machine
built from four `react-native-reanimated` shared values held in
`components/Input.tsx`: `state` (a typed `'idle' | 'copying' | 'done'`),
`switchProgress` (the 0 to 3 keyframe driver for the button), `progress` (the
ring fill) and `gradientProgress` (the shimmer sweep). The press handler
`handlePress` is a `'worklet'` function, so the whole branch runs on the UI
thread with no round trip to JavaScript: from `idle` it sets `state` to
`copying`, starts `gradientProgress` with `withTiming(1, { duration: 1500,
easing: Easing.inOut(Easing.ease) })` and resets it in the completion callback,
springs `switchProgress` to 1, and starts `progress` with `withTiming(1, {
duration: 4000, easing: Easing.linear })` whose callback returns the field to
`idle`. Keeping the shimmer on its own shared value is what lets it loop and
finish independently of the four second ring.

The reveal lives in `components/CustomText.tsx`. Each digit cell stacks an `x`
and the real character in the same absolutely positioned box, and a
`useAnimatedReaction` on `state` watches for the `idle` to `copying` edge (and
the reverse) and fires `withDelay(index * 30, withSpring(...))` on a `progress`
value plus a separate, softer `translate` value with `damping: 50`. Two
`useAnimatedStyle` hooks then `interpolate` that pair into mirrored transforms:
the digit rises from `translateY: -20` while scaling and fading in, the `x`
drops to `translateY: 20` while scaling and fading out. The shimmer is a
`MaskedView` whose `maskElement` is a second copy of the same digit row and
whose child is an `Animated.View` carrying the `LinearGradient`, translated
from `-200` to `250` by `interpolate` with `'clamp'`, so the gradient only
lights up the glyph shapes.

The button in `components/Button.tsx` draws its progress ring as a single
rounded `react-native-svg` `<Rect>` (`SIZE` 40, `RADIUS` 10, `STROKE` 4) turned
into an `AnimatedRect` with `Animated.createAnimatedComponent`. A precomputed
`CIRCUMFERENCE` constant (the straight edges plus the corner arcs, minus a
constant 40) is used as the `strokeDasharray`, and `useAnimatedProps` writes
`strokeDashoffset: CIRCUMFERENCE * progress.get()` so the dash retracts around
the squircle exactly once; the whole SVG is rotated `-90deg` so the lap starts
at the top.
Everything else on the button hangs off `switchProgress` through `interpolate`
and `interpolateColor` across the keyframe array `[0, 1, 2, 3]`, so one spring
drives the background color, the three icon layers and the ring opacity through
the full idle, copying, done, reset cycle. Note that the shared values use the
Reanimated `.get()` and `.set()` accessors rather than `.value`, and that the
drop performs the copy *interaction* only: there is no clipboard call in the
source, so wire your own (for example `expo-clipboard`) inside `handlePress`.

## What you get

```
components/
  Button.tsx
  CustomText.tsx
  Input.tsx
assets/
  adaptive-icon.png
  icon.png
  splash-icon.png
App.tsx
index.ts
app.json
package.json
package-lock.json
tsconfig.json
README.md
```

- Full TypeScript source for the card field, `components/Input.tsx`, holding
  the shared values, the worklet state machine and the shimmer mask.
- The animated `ProgressBarButton` component, `components/Button.tsx`, with the
  SVG progress ring and the three-layer icon crossfade.
- The `CustomText` staggered digit reveal component,
  `components/CustomText.tsx`, including the per-cell `SingleText` crossfade.
- A runnable demo screen, `App.tsx`, mounting the field inside
  `GestureHandlerRootView`.
- A `README.md` with the stack, a how-it-works walkthrough and run commands.

## Requirements

Versions pinned in the Copy Card Field archive's `package.json`:

- `expo` ^56.0.4 (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.4
- `@react-native-masked-view/masked-view` ^0.3.2
- `expo-linear-gradient` ~56.0.4
- `expo-symbols` ~56.0.5
- `react-native-safe-area-context` ~5.7.0
- `typescript` ~6.0.3 (dev dependency)

Expo Go or development build: run the downloaded Copy Card Field project as a
**development build**. Its `README.md` run steps are `npx expo run:ios` and
`npx expo run:android`, and its dependency list pins native packages beyond the
component itself, including `expo-glass-effect` and
`react-native-skia-gesture`. The three component files import only
`react-native-reanimated`, `react-native-svg`,
`@react-native-masked-view/masked-view`, `expo-linear-gradient` and
`expo-symbols`, and the demo `App.tsx` adds `react-native-gesture-handler`, so
pasting them into an existing Expo app pulls in no native code beyond those
packages.

Platform note: the icons come from `expo-symbols`, which renders Apple SF
Symbols on iOS. On Android, swap the three `SymbolView` calls in
`components/Button.tsx` for an icon set such as `@expo/vector-icons`, which is
already listed in the archive's `package.json`.

## Install

```bash
npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-svg @react-native-masked-view/masked-view expo-linear-gradient expo-symbols
```

## Usage

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

export default function App() {
  return (
    <GestureHandlerRootView>
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'white',
        }}
      >
        <Input />
      </View>
    </GestureHandlerRootView>
  );
}
```

`Input` takes no props: it renders at 90% width and mounts its own button. The
card digits are the four `texts` groups passed to `CustomText` inside
`components/Input.tsx` (repeated once more inside the `MaskedView` mask
element), and the two groups marked `isHidden` are the ones that get masked and
revealed.

## Customization

Copy Card Field is customized by editing its source, since the exported `Input`
component takes no props. The real knobs in the Motionary drop are:

- `CustomText` props in `components/CustomText.tsx`: `texts` (a four string
  tuple, one group of the card number), `isHidden` (optional boolean, masks the
  group behind `x` and enables the reveal), plus the `switchProgress` and
  `state` shared values it reads.
- `ProgressBarButton` props in `components/Button.tsx`: `progress`,
  `switchProgress` and `state` shared values plus an `onPress` worklet.
- `SIZE` (40), `RADIUS` (10) and `STROKE` (4) in `components/Button.tsx` size
  the square ring; `CIRCUMFERENCE` is derived from them, so change the
  constants rather than the derived value.
- Ring and icon colors in `components/Button.tsx`: ring stroke `#58B556`,
  backgrounds `['#E3E3FB', '#D0F4D5', '#5FBA5E', '#E3E3FB']`, eye tint
  `#4540CC`, copy tint `#58B556`, checkmark tint `#FFF`.
- Timings in `components/Input.tsx`: the shimmer `duration: 1500` with
  `Easing.inOut(Easing.ease)`, the ring `duration: 4000` with `Easing.linear`,
  and the `withDelay(1000, ...)` hold before the checkmark resets.
- The reveal stagger, `index * 30` milliseconds in `components/CustomText.tsx`,
  and the `damping: 50` spring on the digit `translateY`.
- Field shell in `components/Input.tsx`: `height: 58`, `borderRadius: 14`,
  `borderWidth: 2`, `borderColor: '#E3E3E7'`.
- Digit type style in `components/CustomText.tsx`: `fontSize: 22`, color
  `#1C1C1D`, and `fontFamily: 'SF-Pro-Rounded-Bold'`. Load that font yourself
  with `expo-font` or change the family to one you already ship.

## When to use it

- A saved payment method row in a checkout or wallet screen, where the card
  number is masked until the user asks to see it.
- A banking or fintech card details screen that needs a tasteful reveal instead
  of a blunt toggle.
- Copying an API key, a wallet address, a coupon code or a referral code, where
  the same reveal, confirm, reset loop applies.
- A settings screen showing a stored card, with the auto-reset acting as a
  privacy timeout.
- Any confirmation affordance that should show progress and let the user commit
  early, since a second tap short-circuits the four second ring.

## How to get it

- Buy Copy Card Field on its own at
  https://motionary.dev/animations/copy-card-field, $5 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 build an animated credit card input field in React Native?**
Mask the middle groups of the number, stack an `x` and the real digit in each
cell, and crossfade them with `react-native-reanimated` springs staggered by
digit index; that is exactly what Copy Card Field from Motionary ships as
editable TypeScript source at
https://motionary.dev/animations/copy-card-field.

**Does Copy Card Field actually copy the card number to the clipboard?**
No. Copy Card Field ships the reveal-and-confirm interaction only: there is no
clipboard call in the Motionary source, so add your own (for example
`expo-clipboard`) inside the `handlePress` worklet in `components/Input.tsx`.

**Does Copy Card Field work with Expo Go?**
The Copy Card Field project from Motionary is set up as a development build,
with `npx expo run:ios` and `npx expo run:android` in its README, and its
`package.json` pins native modules such as `expo-glass-effect` and
`react-native-skia-gesture` that the component itself never imports. The three
component files import only `react-native-reanimated`, `react-native-svg`,
`@react-native-masked-view/masked-view`, `expo-linear-gradient` and
`expo-symbols` (the demo `App.tsx` adds `react-native-gesture-handler`), so
they drop into an existing Expo app that already has those packages installed.

**Does Copy Card Field work on Android?**
Yes, with one swap: the eye, copy and checkmark icons use `expo-symbols`, which
renders Apple SF Symbols on iOS, so on Android replace the three `SymbolView`
calls in `components/Button.tsx` with an icon set such as
`@expo/vector-icons`. Everything else in this Motionary drop, the Reanimated
springs, the masked shimmer and the `react-native-svg` ring, is
cross-platform.

**How do you make a shimmer sweep across text in React Native?**
Put an `expo-linear-gradient` band with transparent, white, transparent stops
inside a `@react-native-masked-view/masked-view` whose `maskElement` is a copy
of the text, then animate the gradient's `translateX` with Reanimated; Copy
Card Field from Motionary does this over 1500ms across the card digits.

**How do you animate a square progress ring in React Native?**
Draw one rounded `react-native-svg` `<Rect>`, set `strokeDasharray` to its
precomputed perimeter, and write `strokeDashoffset` from a Reanimated shared
value through `useAnimatedProps`; Copy Card Field from Motionary uses that
technique for the ring around its copy button.

**What do I get when I buy Copy Card Field, and can I use it commercially?**
You get an instant download of the full TypeScript React Native source
(`Input.tsx`, `Button.tsx`, `CustomText.tsx` and a runnable demo) for $5 USD
from Motionary, licensed to one developer for unlimited personal and commercial
apps; see https://motionary.dev/license.

## Related drops on Motionary

- Tap to Copy Button ($3): https://motionary.dev/animations/tap-to-copy-button
  The same copy-and-confirm loop as a standalone button, with a letter morph
  into a checkmark.
- Shimmer Input ($4): https://motionary.dev/animations/shimmer-input
  Uses the same react-native-masked-view plus expo-linear-gradient shimmer
  technique on a text input.
- OTP Code Input ($5): https://motionary.dev/animations/otp-code-input
  The other animated field for a payment or auth flow, built on the same
  Reanimated foundation.
- X-Ray Reveal ($5): https://motionary.dev/animations/x-ray-reveal
  Another masked-view reveal, driven by a pan gesture instead of a tap.
- Freeze Card ($9): https://motionary.dev/animations/freeze-card
  A fintech card interaction to pair with Copy Card Field on the same wallet
  screen.

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