Animated Components for React Native & Expo Apps

Premium quality, production-ready animated components built with Skia & Reanimated

What is this?

A collection of self-contained animation components for React Native and Expo, built with Skia and Reanimated. Each component is:

• Production-ready and tested
• Copy-paste, no setup required
• Fully customizable via props
• Works on iOS, Android, and Web

Components

Component	Description	Dependencies
LiquidSwitch	Smooth, physics-inspired toggle with liquid morphing effect	Skia · Reanimated
ScratchCard	Interactive scratch-to-reveal with realistic texture	Skia · Gesture Handler
CircleLoader	Elegant circular loading animation with orbital motion	Skia · Reanimated
AnimatedNumber	Smooth number transitions with digit-by-digit animation	Reanimated
RadialProgress	Circular progress indicator with animated rim and percentage	Skia · Reanimated
Curtain	Gesture-controlled curtain opening/closing transition	Reanimated · Gesture Handler
Stepper	Animated step indicator for multi-step flows	Skia · Reanimated
StickyParticles	GPU-powered metaballs with touch interaction & 3 visual modes	Skia · Reanimated · Gesture Handler
PageCurl	Realistic page curl effect with gesture control	Skia · Reanimated · Gesture Handler

Click any component name to view detailed documentation, props, and usage examples.

Usage

Each component is self-contained. Just copy and use.

1. Copy the component you need from components/[ComponentName]/

2. Install dependencies:

npx expo install react-native-reanimated react-native-gesture-handler @shopify/react-native-skia

3. Import and use:

import { LiquidSwitch } from './components/LiquidSwitch'

export default function App() {
  return (
    <LiquidSwitch
      size={100}
      onChange={(value) => console.log('Switched:', value)}
      trackColors={{ true: '#00C853', false: '#CFD8DC' }}
    />
  )
}

See each component's README for detailed props and examples.

---

Try the Demo App

Want to see all components in action?

git clone https://github.com/ogulcanbagatir/rn-animated-components.git
cd rn-animated-components
npx expo install
npx expo start

Requirements: React Native 0.72+ or Expo SDK 49+

---

Built by NicheGuys

We're two passionate developers sharing our craft with the community

@saimemre1 • @ogulcanbagatir

Follow Our Journey

We regularly share dev tips, animations, and project updates on Twitter!

Got questions? Found a bug? Want to collaborate?
Open an issue or reach out on Twitter!

Show Your Support

If you find this library useful, please:

• Star this repo — it helps others discover it
• Follow @NicheGuys — stay updated
• Share with your network — spread the word

---

License: MIT

Free to use in personal and commercial projects. Attribution appreciated.

Made with ❤️ by NicheGuys