@da-war/react-native-micro-ui

🎨 50+ beautiful micro-interactions for React Native. One line of code.

Built with React Native Reanimated for buttery smooth 60fps animations on the UI thread.

---

✨ Features

Feature	Description
🚀 50+ Components	Buttons, gestures, loaders, cards, effects & more
⚡ 60fps Animations	Powered by React Native Reanimated (UI thread)
📱 Haptic Feedback	Built-in haptics for tactile responses
🎨 Fully Customizable	Every component is highly configurable
📦 Tree Shakeable	Import only what you need
💪 TypeScript	Full type safety and IntelliSense
🔧 Expo & Bare RN	Works with both setups

---

📦 Installation

npm install @da-war/react-native-micro-ui
# or
yarn add @da-war/react-native-micro-ui

Peer Dependencies

npm install react-native-reanimated react-native-gesture-handler
# or  
yarn add react-native-reanimated react-native-gesture-handler

Configuration

1. Add Reanimated plugin to babel.config.js:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-reanimated/plugin'], // ⚠️ Must be last!
};

2. Wrap your app with GestureHandlerRootView:

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app content */}
    </GestureHandlerRootView>
  );
}

3. For Expo, add to app.json:

{
  "expo": {
    "plugins": ["react-native-reanimated/plugin"]
  }
}

---

🚀 Quick Start

import { 
  BounceButton, 
  DoubleTapHeart, 
  ConfettiExplosion,
  SwipeToDelete 
} from '@da-war/react-native-micro-ui';

// Bouncy button
<BounceButton onPress={() => console.log('Pressed!')}>
  <Text style={styles.buttonText}>Press Me</Text>
</BounceButton>

// Instagram-style double tap to like
<DoubleTapHeart onDoubleTap={() => setLiked(true)}>
  <Image source={{ uri: imageUrl }} style={styles.image} />
</DoubleTapHeart>

// Swipe to delete
<SwipeToDelete onDelete={() => removeItem(id)}>
  <ListItem title="Swipe me left" />
</SwipeToDelete>

// Confetti celebration
const confettiRef = useRef(null);
<ConfettiExplosion ref={confettiRef} />
// Trigger: confettiRef.current?.start()

---

📚 Component Reference

🔘 Button Components

BounceButton

A button that bounces when pressed.

import { BounceButton } from '@da-war/react-native-micro-ui';

<BounceButton 
  onPress={() => {}}
  bounceScale={0.9}        // Scale when pressed (default: 0.9)
  hapticEnabled={true}     // Enable haptic feedback
  disabled={false}
>
  <Text>Bounce!</Text>
</BounceButton>

JellyButton

A button with a jelly-like wobble effect.

import { JellyButton } from '@da-war/react-native-micro-ui';

<JellyButton onPress={() => {}}>
  <Text>Jelly!</Text>
</JellyButton>

PulseButton

A button that continuously pulses to draw attention.

import { PulseButton } from '@da-war/react-native-micro-ui';

<PulseButton 
  onPress={() => {}}
  pulseScale={1.05}        // Max scale (default: 1.05)
  pulseDuration={1000}     // Animation duration in ms
>
  <Text>Pulse!</Text>
</PulseButton>

RippleButton

Material Design style ripple effect.

import { RippleButton } from '@da-war/react-native-micro-ui';

<RippleButton 
  onPress={() => {}}
  rippleColor="rgba(255,255,255,0.3)"
>
  <Text>Ripple!</Text>
</RippleButton>

TiltButton

3D tilt effect based on touch position.

import { TiltButton } from '@da-war/react-native-micro-ui';

<TiltButton 
  onPress={() => {}}
  maxTilt={15}             // Maximum tilt angle in degrees
>
  <Text>Tilt!</Text>
</TiltButton>

---

👆 Gesture Components

DoubleTapHeart

Instagram-style double tap to show heart animation.

import { DoubleTapHeart } from '@da-war/react-native-micro-ui';

<DoubleTapHeart 
  onDoubleTap={() => setLiked(true)}
  heartColor="#FF6B6B"          // Heart color
  heartSize={80}                // Heart size
  animationDuration={1000}      // Animation duration in ms
  hapticEnabled={true}
>
  <Image source={imageSource} style={{ width: 300, height: 300 }} />
</DoubleTapHeart>

SwipeToDelete

Swipe a row to reveal delete action.

import { SwipeToDelete } from '@da-war/react-native-micro-ui';

<SwipeToDelete 
  onDelete={() => removeItem(id)}
  deleteThreshold={0.3}         // Percentage of width to trigger delete
  rowHeight={60}                // Height of the row
  backgroundColor="#FF3B30"     // Delete background color
  hapticEnabled={true}
>
  <View style={styles.listItem}>
    <Text>Swipe me left to delete</Text>
  </View>
</SwipeToDelete>

SwipeActions

Swipe to reveal multiple actions on both sides.

import { SwipeActions } from '@da-war/react-native-micro-ui';

<SwipeActions
  leftActions={[
    {
      key: 'archive',
      content: <Text>📁</Text>,
      backgroundColor: '#4CAF50',
      onPress: () => archiveItem(),
    },
  ]}
  rightActions={[
    {
      key: 'delete',
      content: <Text>🗑️</Text>,
      backgroundColor: '#FF3B30',
      onPress: () => deleteItem(),
    },
    {
      key: 'more',
      content: <Text>⋯</Text>,
      backgroundColor: '#007AFF',
      onPress: () => showMore(),
    },
  ]}
>
  <View style={styles.listItem}>
    <Text>Swipe left or right</Text>
  </View>
</SwipeActions>

HoldToConfirm

Hold button with progress indicator for dangerous actions.

import { HoldToConfirm } from '@da-war/react-native-micro-ui';

<HoldToConfirm
  title="Hold to Delete Account"
  onConfirm={() => deleteAccount()}
  holdDuration={2000}           // Time to hold in ms
  progressColor="#FF3B30"       // Progress bar color
  backgroundColor="#FFEBEE"     // Button background
  hapticEnabled={true}
/>

LongPressMenu

Show a context menu on long press.

import { LongPressMenu } from '@da-war/react-native-micro-ui';

<LongPressMenu
  items={[
    { key: 'copy', label: 'Copy', onPress: () => copyItem() },
    { key: 'share', label: 'Share', onPress: () => shareItem() },
    { key: 'delete', label: 'Delete', destructive: true, onPress: () => deleteItem() },
  ]}
  longPressDuration={500}
>
  <View style={styles.card}>
    <Text>Long press me</Text>
  </View>
</LongPressMenu>

PinchToZoom

Pinch and pan gestures for zooming images.

import { PinchToZoom } from '@da-war/react-native-micro-ui';

<PinchToZoom
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 300, height: 300 }}
  minScale={1}                  // Minimum zoom scale
  maxScale={5}                  // Maximum zoom scale
  doubleTapScale={2}            // Scale on double tap
/>

DragToReorder

Drag items to reorder a list.

import { DragToReorder } from '@da-war/react-native-micro-ui';

<DragToReorder
  data={items}
  keyExtractor={(item) => item.id}
  onReorder={(newData) => setItems(newData)}
  itemHeight={60}
  renderItem={({ item, isDragging }) => (
    <View style={[styles.item, isDragging && styles.dragging]}>
      <Text>{item.title}</Text>
    </View>
  )}
/>

---

⏳ Loading & Feedback Components

LoadingSpinner

Animated spinning loader.

import { LoadingSpinner } from '@da-war/react-native-micro-ui';

<LoadingSpinner 
  size={40}                     // Spinner size
  color="#2196F3"               // Spinner color
  duration={1000}               // Rotation duration in ms
/>

LoadingDots

Animated bouncing dots.

import { LoadingDots } from '@da-war/react-native-micro-ui';

<LoadingDots 
  count={3}                     // Number of dots
  size={10}                     // Dot size
  color="#2196F3"               // Dot color
  spacing={8}                   // Space between dots
/>

ProgressBar

Horizontal progress bar with animation.

import { ProgressBar } from '@da-war/react-native-micro-ui';

<ProgressBar 
  progress={0.7}                // Progress value (0-1)
  height={8}                    // Bar height
  progressColor="#4CAF50"       // Progress color
  backgroundColor="#e0e0e0"     // Track color
  animated={true}               // Animate changes
/>

CircularProgress

Circular progress indicator.

import { CircularProgress } from '@da-war/react-native-micro-ui';

<CircularProgress 
  progress={0.75}               // Progress value (0-1)
  size={80}                     // Circle size
  strokeWidth={8}               // Stroke width
  progressColor="#2196F3"       // Progress color
  showText={true}               // Show percentage text
/>

SkeletonLoader

Shimmer loading placeholder.

import { 
  SkeletonLoader, 
  SkeletonText, 
  SkeletonAvatar,
  SkeletonListItem 
} from '@da-war/react-native-micro-ui';

// Basic skeleton
<SkeletonLoader width={200} height={20} borderRadius={4} />

// Text skeleton
<SkeletonText lines={3} />

// Avatar skeleton
<SkeletonAvatar size={50} />

// List item skeleton
<SkeletonListItem />

SuccessCheckmark

Animated success checkmark.

import { SuccessCheckmark } from '@da-war/react-native-micro-ui';

const checkRef = useRef(null);

<SuccessCheckmark 
  ref={checkRef}
  size={80}
  color="#4CAF50"
  autoStart={false}             // Start automatically
  onComplete={() => console.log('Done!')}
/>

// Trigger: checkRef.current?.play()
// Reset: checkRef.current?.reset()

ErrorCross

Animated error X mark.

import { ErrorCross } from '@da-war/react-native-micro-ui';

const errorRef = useRef(null);

<ErrorCross 
  ref={errorRef}
  size={80}
  color="#FF3B30"
  autoStart={false}
/>

// Trigger: errorRef.current?.play()

ConfettiExplosion

Celebration confetti effect.

import { ConfettiExplosion } from '@da-war/react-native-micro-ui';

const confettiRef = useRef(null);

<ConfettiExplosion 
  ref={confettiRef}
  count={50}                    // Number of confetti pieces
  duration={3000}               // Animation duration
  colors={['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7']}
/>

// Trigger: confettiRef.current?.start()

CountUp

Animated number counter.

import { CountUp } from '@da-war/react-native-micro-ui';

<CountUp 
  from={0}                      // Start value
  to={1000}                     // End value
  duration={2000}               // Animation duration
  prefix="$"                    // Prefix text
  suffix=""                     // Suffix text
  decimals={0}                  // Decimal places
  textStyle={{ fontSize: 32, fontWeight: 'bold' }}
/>

TypeWriter

Typewriter text effect.

import { TypeWriter } from '@da-war/react-native-micro-ui';

<TypeWriter 
  text="Hello, World!"
  speed={50}                    // Typing speed in ms per character
  delay={500}                   // Initial delay
  cursor={true}                 // Show cursor
  cursorChar="|"                // Cursor character
  onComplete={() => console.log('Typing complete')}
/>

---

🃏 Card Components

FlipCard

3D flip card animation.

import { FlipCard } from '@da-war/react-native-micro-ui';

const [isFlipped, setIsFlipped] = useState(false);

<FlipCard
  isFlipped={isFlipped}
  onFlip={(flipped) => setIsFlipped(flipped)}
  flipOnPress={true}
  front={
    <View style={styles.cardFront}>
      <Text>Front Side</Text>
    </View>
  }
  back={
    <View style={styles.cardBack}>
      <Text>Back Side</Text>
    </View>
  }
/>

TinderCard

Swipeable Tinder-style card.

import { TinderCard } from '@da-war/react-native-micro-ui';

<TinderCard
  onSwipeLeft={() => handleReject()}
  onSwipeRight={() => handleLike()}
  onSwipeUp={() => handleSuperLike()}
  threshold={100}               // Swipe threshold
>
  <View style={styles.card}>
    <Image source={imageSource} />
    <Text>John, 25</Text>
  </View>
</TinderCard>

ExpandableCard

Card that expands to show more content.

import { ExpandableCard } from '@da-war/react-native-micro-ui';

<ExpandableCard
  header={
    <Text style={styles.title}>Tap to expand</Text>
  }
  expanded={false}
  onToggle={(expanded) => console.log(expanded)}
>
  <Text>This is the expanded content!</Text>
  <Text>You can put anything here.</Text>
</ExpandableCard>

FadeInView

Container with fade-in animation.

import { FadeInView } from '@da-war/react-native-micro-ui';

<FadeInView 
  delay={0}                     // Animation delay
  duration={500}                // Animation duration
  direction="up"                // 'up' | 'down' | 'left' | 'right' | 'none'
  distance={20}                 // Slide distance
>
  <Text>I fade in!</Text>
</FadeInView>

StaggeredList

List with staggered entrance animation.

import { StaggeredList } from '@da-war/react-native-micro-ui';

<StaggeredList 
  staggerDelay={100}            // Delay between items
  duration={400}                // Animation duration
  direction="up"                // Animation direction
>
  <ListItem title="Item 1" />
  <ListItem title="Item 2" />
  <ListItem title="Item 3" />
</StaggeredList>

---

🎛️ Control Components

Slider

Custom animated slider.

import { Slider } from '@da-war/react-native-micro-ui';

const [value, setValue] = useState(0.5);

<Slider
  value={value}
  onChange={setValue}
  width={300}                   // Slider width
  height={4}                    // Track height
  thumbSize={20}                // Thumb size
  thumbColor="#2196F3"
  trackColor="#e0e0e0"
  activeTrackColor="#2196F3"
/>

RotaryKnob

Circular rotary control.

import { RotaryKnob } from '@da-war/react-native-micro-ui';

const [value, setValue] = useState(0.5);

<RotaryKnob
  value={value}
  onChange={setValue}
  size={100}                    // Knob size
  knobColor="#333"
  indicatorColor="#2196F3"
/>

Joystick

Virtual joystick control.

import { Joystick } from '@da-war/react-native-micro-ui';

<Joystick
  size={150}                    // Base size
  stickSize={50}                // Stick size
  onMove={(x, y) => console.log(x, y)}  // Values from -1 to 1
  onRelease={() => console.log('Released')}
/>

SlidingToggle

Animated toggle switch.

import { SlidingToggle } from '@da-war/react-native-micro-ui';

const [isOn, setIsOn] = useState(false);

<SlidingToggle
  value={isOn}
  onValueChange={setIsOn}
  activeColor="#4CAF50"
  inactiveColor="#e0e0e0"
  thumbColor="#ffffff"
/>

AnimatedRating

Star rating with animation.

import { AnimatedRating } from '@da-war/react-native-micro-ui';

const [rating, setRating] = useState(3);

<AnimatedRating
  rating={rating}
  onChange={setRating}
  maxRating={5}
  size={32}
  activeColor="#FFD700"
  inactiveColor="#e0e0e0"
/>

AnimatedTabs

Tab bar with animated indicator.

import { AnimatedTabs } from '@da-war/react-native-micro-ui';

const [activeTab, setActiveTab] = useState(0);

<AnimatedTabs
  tabs={['Home', 'Search', 'Profile']}
  activeIndex={activeTab}
  onTabChange={setActiveTab}
  indicatorColor="#2196F3"
  activeTextColor="#2196F3"
  inactiveTextColor="#666"
/>

---

📱 Navigation Components

BottomSheet

Draggable bottom sheet with snap points.

import { BottomSheet } from '@da-war/react-native-micro-ui';

const sheetRef = useRef(null);
const [visible, setVisible] = useState(false);

<BottomSheet
  ref={sheetRef}
  visible={visible}
  onClose={() => setVisible(false)}
  snapPoints={[0.4, 0.7, 0.9]}  // Percentage of screen height
>
  <View style={styles.sheetContent}>
    <Text>Sheet Content</Text>
  </View>
</BottomSheet>

// Methods:
// sheetRef.current?.snapTo(1)  // Snap to index
// sheetRef.current?.close()
// sheetRef.current?.expand()

FloatingActionButton

Expandable FAB with actions.

import { FloatingActionButton } from '@da-war/react-native-micro-ui';

<FloatingActionButton
  icon={<Text style={{ color: '#fff', fontSize: 24 }}>+</Text>}
  iconExpanded={<Text style={{ color: '#fff', fontSize: 24 }}>×</Text>}
  backgroundColor="#2196F3"
  position="bottom-right"
  actions={[
    {
      key: 'camera',
      icon: <Text>📷</Text>,
      label: 'Camera',
      onPress: () => openCamera(),
    },
    {
      key: 'gallery',
      icon: <Text>🖼️</Text>,
      label: 'Gallery',
      onPress: () => openGallery(),
    },
  ]}
/>

SlideInPanel

Side panel that slides in.

import { SlideInPanel } from '@da-war/react-native-micro-ui';

const [visible, setVisible] = useState(false);

<SlideInPanel
  visible={visible}
  onClose={() => setVisible(false)}
  side="left"                   // 'left' | 'right'
  width="80%"                   // Panel width
>
  <View style={styles.menu}>
    <Text>Menu Content</Text>
  </View>
</SlideInPanel>

AnimatedToast

Toast notifications.

import { AnimatedToast } from '@da-war/react-native-micro-ui';

const [visible, setVisible] = useState(false);

<AnimatedToast
  visible={visible}
  message="Action completed!"
  type="success"                // 'success' | 'error' | 'warning' | 'info'
  position="top"                // 'top' | 'bottom'
  duration={3000}
  onHide={() => setVisible(false)}
/>

AnimatedBadge

Badge with bounce animation.

import { AnimatedBadge } from '@da-war/react-native-micro-ui';

<View>
  <BellIcon />
  <AnimatedBadge 
    count={5}
    maxCount={99}
    color="#FF3B30"
  />
</View>

---

✨ Effect Components

BouncyText

Text with bouncy letter animation.

import { BouncyText } from '@da-war/react-native-micro-ui';

<BouncyText 
  style={{ fontSize: 28, fontWeight: 'bold', color: '#FF6B6B' }}
  staggerDelay={50}
  bounceHeight={10}
>
  BOUNCY!
</BouncyText>

WaveText

Text with wave animation.

import { WaveText } from '@da-war/react-native-micro-ui';

<WaveText 
  style={{ fontSize: 24, fontWeight: '600', color: '#4ECDC4' }}
  waveHeight={8}
  duration={1500}
>
  Wave Effect
</WaveText>

Marquee

Scrolling marquee text.

import { Marquee } from '@da-war/react-native-micro-ui';

<Marquee 
  speed={50}                    // Pixels per second
  direction="left"              // 'left' | 'right'
>
  <Text>📢 This is a scrolling announcement! 🎉</Text>
</Marquee>

Heartbeat

Pulsing heartbeat animation.

import { Heartbeat } from '@da-war/react-native-micro-ui';

<Heartbeat duration={1000} scale={1.1}>
  <Text style={{ fontSize: 48 }}>❤️</Text>
</Heartbeat>

Breathe

Breathing/meditation animation.

import { Breathe } from '@da-war/react-native-micro-ui';

<Breathe 
  duration={4000}
  minScale={0.95}
  maxScale={1.05}
>
  <View style={styles.circle} />
</Breathe>

Wobble

Wobbling animation.

import { Wobble } from '@da-war/react-native-micro-ui';

<Wobble duration={1000} angle={10}>
  <Text style={{ fontSize: 48 }}>🔔</Text>
</Wobble>

Particles

Floating particles effect.

import { Particles } from '@da-war/react-native-micro-ui';

<View style={{ height: 300 }}>
  <Particles
    count={20}
    color="#2196F3"
    minSize={4}
    maxSize={10}
  />
</View>

ShinyButton

Button with shine effect.

import { ShinyButton } from '@da-war/react-native-micro-ui';

<ShinyButton 
  style={styles.button}
  backgroundColor="#2196F3"
  shineColor="rgba(255,255,255,0.4)"
>
  <Text style={styles.buttonText}>✨ Shiny Button</Text>
</ShinyButton>

GlowingBorder

Animated glowing border.

import { GlowingBorder } from '@da-war/react-native-micro-ui';

<GlowingBorder
  color="#FF6B6B"
  intensity={1.5}
  duration={2000}
  borderRadius={12}
>
  <View style={styles.card}>
    <Text>Glowing Card</Text>
  </View>
</GlowingBorder>

---

🪝 Hooks

import { 
  useHaptic,
  useShake,
  useScale,
  useFade,
  usePressAnimation,
  useDebounce,
  useThrottle
} from '@da-war/react-native-micro-ui';

// Haptic feedback
const triggerHaptic = useHaptic('medium');
triggerHaptic();

// Shake animation
const { animatedStyle, shake } = useShake(10, 4);
shake();

// Scale animation
const { animatedStyle, scaleUp, scaleDown, reset } = useScale(1);
scaleUp(1.2);

// Fade animation
const { animatedStyle, fadeIn, fadeOut } = useFade(0);
fadeIn();

// Press animation with haptic
const { animatedStyle, onPressIn, onPressOut } = usePressAnimation('light', 0.95);

// Debounce
const debouncedSearch = useDebounce(searchQuery, 300);

// Throttle
const throttledScroll = useThrottle(handleScroll, 100);

---

🎨 Customization

All components support extensive customization through props. Common patterns:

// Custom colors
<BounceButton style={{ backgroundColor: '#FF6B6B' }}>

// Custom sizes
<LoadingSpinner size={60} />

// Custom animations
<FadeInView duration={800} delay={200}>

// Disable haptics
<SwipeToDelete hapticEnabled={false}>

---

📝 TypeScript

Full TypeScript support with exported types:

import type { 
  BounceButtonProps,
  DoubleTapHeartProps,
  SwipeToDeleteProps,
  // ... all props types
} from '@da-war/react-native-micro-ui';

---

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines.

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

---

📄 License

MIT © Rana Dawar

---

🙏 Acknowledgments

• React Native Reanimated
• React Native Gesture Handler

---

Made with ❤️ by Rana Dawar

⭐ Star on GitHub