rslabdocs

Copy Button

Copies to the clipboard and cross-fades its icon into a checkmark for a moment before reverting.

ReanimatedHapticsNativeWindSource

Prerequisites

Icons for the copy/check glyphs, clipboard access, haptics for the press, and Reanimated for the cross-fade.


npx expo install @hugeicons/core-free-icons @hugeicons/react-native expo-clipboard expo-haptics react-native-reanimated

Install


npx @rslab/cli add copy-button

Usage


import { CopyButton } from '@/components/ui/CopyButton';



<CopyButton value="sk_test_4242424242" />



<CopyButton value="npx expo install expo-clipboard" label="Copy install command" />

Props

PropTypeDefault
value
string
-

The string written to the clipboard on press.

label?
string
-

Optional visible text. Omit it for an icon-only button.

size?
number
16

Icon size in px.

disabled?
boolean
false

Fades the button and blocks the press.

haptic?
boolean
true

Light haptic tick on press. Set false to mute it.

className?
string
-

Extend or override the outer pill.

See exactly how this works with an RSLAB subscription.

Get Pro

On this page