A highly customizable, animated switch/toggle component for React Native with smooth animations, haptic feedback, and full TypeScript support. Perfect for iOS and Android apps.

A production-ready, customizable React Native switch component built with react-native-reanimated for smooth 60fps animations. Ideal for settings screens, feature toggles, and any UI that requires a modern switch component.

iOS

Android

• 🎨 Fully customizable colors and sizes
• ✨ Smooth animations powered by react-native-reanimated
• 🎯 Customizable thumb scale animation
• 📳 Haptic feedback support (optional)
• ♿ Accessible and disabled state support
• 📱 Works on both iOS and Android
• 💪 Written in TypeScript with full type definitions

npm install @minkyumdev/react-native-switch # or yarn add @minkyumdev/react-native-switch

This library requires the following peer dependencies:

• react (>=16.8.0)
• react-native (>=0.60.0)
• react-native-reanimated (>=2.0.0)

For haptic feedback support, install one of the following depending on your environment:

Expo users:

npx expo install expo-haptics

React Native CLI users:

npm install @mhpdev/react-native-haptics

Note: If no haptics library is installed, the switch will work normally without haptic feedback.

For iOS, you need to install pods:

cd ios && pod install

No additional setup required for Android.

import React, { useState } from 'react'; import { View } from 'react-native'; import { Switch } from '@minkyumdev/react-native-switch'; function App() { const [isEnabled, setIsEnabled] = useState(false); return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Switch value={isEnabled} onValueChange={setIsEnabled} activeColor="#34C759" inactiveColor="#E5E5EA" /> </View> ); }

<Switch value={isEnabled} onValueChange={setIsEnabled} />

<Switch value={isEnabled} onValueChange={setIsEnabled} activeColor="#FF3B30" inactiveColor="#C7C7CC" thumbColor="#FFFFFF" />

// Using predefined sizes <Switch value={isEnabled} onValueChange={setIsEnabled} size="large" /> // Using custom width and height <Switch value={isEnabled} onValueChange={setIsEnabled} width={80} height={40} /> // Custom width, height, and thumbSize <Switch value={isEnabled} onValueChange={setIsEnabled} width={100} height={50} thumbSize={35} />

<Switch value={isEnabled} onValueChange={setIsEnabled} disabled={true} />

<Switch value={isEnabled} onValueChange={setIsEnabled} enableHaptics={false} />

// Custom scale for inactive state (default is 0.8) <Switch value={isEnabled} onValueChange={setIsEnabled} thumbScaleInactive={0.7} // Thumb will be smaller when off />

# Install dependencies npm install # Build the library npm run build # Watch mode for development npm run build:watch

The main component exported from this library.

See the Props table above for detailed information.

import { Switch } from '@minkyumdev/react-native-switch'; function MyComponent() { const [enabled, setEnabled] = useState(false); return ( <Switch value={enabled} onValueChange={setEnabled} size="medium" activeColor="#34C759" inactiveColor="#E5E5EA" /> ); }

MIT

• ✅ Smooth Animations: Powered by react-native-reanimated for 60fps animations
• ✅ Fully Customizable: Control colors, sizes, thumb scale, and more
• ✅ TypeScript Support: Full type definitions included
• ✅ Haptic Feedback: Optional haptic feedback for better UX
• ✅ Cross-Platform: Works seamlessly on iOS and Android
• ✅ Lightweight: Minimal dependencies, optimized bundle size
• ✅ Production Ready: Used in real-world applications

• Settings screens and preference toggles
• Feature flags and A/B testing switches
• Notification settings
• Dark mode toggles
• Privacy settings
• Any boolean state management UI

Looking for other React Native components? Check out:

• react-native-reanimated - Animation library
• expo-haptics - Haptic feedback (Expo)
• @mhpdev/react-native-haptics - Haptic feedback (React Native CLI)

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

If you find this library helpful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs
• 💡 Suggesting new features
• 📖 Improving documentation

MIT © minkyumdev