react-native-spoiler-view

Telegram-style spoiler effect for React Native. Tap to reveal content with animated particle burst.

• Particle burst from touch point
• 60fps Skia-powered animations
• Fully customizable
• iOS and Android

Installation

npm install react-native-spoiler-view

Peer Dependencies

npm install @shopify/react-native-skia react-native-reanimated react-native-gesture-handler

Setup: Skia · Reanimated · Gesture Handler

Usage

Basic

import { SpoilerView } from 'react-native-spoiler-view';

<SpoilerView>
  <Text>This is a secret message!</Text>
</SpoilerView>

Controlled

const [revealed, setRevealed] = useState(false);

<SpoilerView
  revealed={revealed}
  onReveal={() => setRevealed(true)}
>
  <Text>Hidden until revealed</Text>
</SpoilerView>

<Button title="Reveal" onPress={() => setRevealed(true)} />

Custom Config

<SpoilerView
  config={{
    particleCount: 300,
    particleColor: 'rgba(255, 100, 100, 1)',
    revealDuration: 400,
  }}
>
  <Image source={secretImage} />
</SpoilerView>

Props

Prop	Type	Default	Description
children	ReactNode	required	Content to hide
revealed	boolean	—	Controlled reveal state
enabled	boolean	true	Enable tap gesture
onReveal	() => void	—	Called when revealed
onHide	() => void	—	Called when hidden
config	SpoilerConfig	—	Customize appearance
style	ViewStyle	—	Container style

Config

{
  particleCount: 200,
  particleDensity: 0.08,
  particleSizeRange: [0.4, 0.9],
  particleColor: 'rgba(80, 80, 80, 1)',
  overlayColor: 'transparent',
  revealDuration: 600,
  burstSpeed: 150,
}