Adaptive UI system with smooth animations, gesture detection, haptic feedback, and automatic performance optimization for React Native & Expo
npm install react-native-glide-uiThe most advanced adaptive UI system for React Native & Expo
AI-powered performance optimization, intelligent gesture recognition, and automatic layout adaptation that makes your app feel buttery smooth on every device.


---
| Feature | What It Does |
|---------|--------------|
| 🧠 Smart Performance | Auto-detects device capabilities and adjusts animations |
| 📱 Adaptive Layouts | Responsive breakpoints that work like CSS media queries |
| 👆 Gesture Intelligence | Learns user patterns and optimizes swipe detection |
| 🎯 Haptic Feedback | Contextual vibrations that feel native |
| ⚡ Zero Config | Works out of the box with sensible defaults |
| 📦 Expo Compatible | No native linking required |
---
``bashUsing npm
npm install react-native-glide-ui react-native-reanimated react-native-gesture-handler
$3
Add the Reanimated babel plugin to your
babel.config.js:`js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
`$3
Follow the installation guides for:
- react-native-reanimated
- react-native-gesture-handler
---
🚀 Quick Start
`tsx
import { GlideProvider, GlideView, GlideButton, GlideText } from 'react-native-glide-ui';export default function App() {
return (
Hello Glide! 👋
onPress={() => console.log('Pressed!')}
variant="solid"
size="lg"
rounded
>
Get Started
);
}
`---
📖 Core Concepts
$3
Wrap your app to enable all features:
`tsx
config={{
haptics: { enabled: true, intensity: 0.8 },
performance: { enableMonitoring: true, adaptiveAnimations: true },
}}
>
{/ Your app /}
`$3
`tsx
import { useGlideLayout } from 'react-native-glide-ui';function MyComponent() {
const { breakpoint, spacing, typography, wp, hp, resolve } = useGlideLayout();
// Responsive values (like CSS media queries!)
const columns = resolve({ xs: 1, sm: 2, md: 3, lg: 4 });
return (
padding: spacing.md, // Auto-scales per device
width: wp(90), // 90% of screen width
fontSize: typography.body1, // Adaptive font size
}}>
Current breakpoint: {breakpoint}
Showing {columns} columns
);
}
`$3
`tsx
import { useGlideAnimation } from 'react-native-glide-ui';
import Animated from 'react-native-reanimated';function AnimatedBox() {
const { value, spring, timing } = useGlideAnimation({ initialValue: 0 });
return (
<>
I animate!
`$3
`tsx
import { useGlideGesture } from 'react-native-glide-ui';
import { GestureDetector } from 'react-native-gesture-handler';function SwipeableCard() {
const { gesture, animatedStyle } = useGlideGesture({
onSwipeLeft: () => console.log('Swiped left!'),
onSwipeRight: () => console.log('Swiped right!'),
enableHaptics: true,
});
return (
Swipe me!
);
}
`$3
`tsx
import { useGlidePerformance } from 'react-native-glide-ui';function SmartComponent() {
const { tier, shouldReduceMotion, capabilities } = useGlidePerformance();
return (
Device tier: {tier} {/ 'low' | 'mid' | 'high' | 'ultra' /}
{!shouldReduceMotion && (
// Only show on capable devices
)}
);
}
`---
🧩 Components
$3
Animated container with responsive shortcuts:
`tsx
flex={1}
row // flexDirection: 'row'
center // centers both axes
padding={{ xs: 10, md: 20 }} // responsive padding
gap={12}
bg="#f5f5f5"
rounded={16}
entering="fadeIn" // 'fadeIn' | 'slideUp' | 'zoomIn' | etc.
>
{children}
`$3
Animated buttons with haptic feedback:
`tsx
onPress={handlePress}
variant="solid" // 'solid' | 'outline' | 'ghost' | 'soft'
size="md" // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
color="#007AFF"
rounded
haptic="medium" // 'light' | 'medium' | 'heavy' | false
leftIcon={ }
>
Press Me
`$3
Adaptive typography:
`tsx
Big Title
Regular text that scales nicely
`$3
Pressable card with elevation:
`tsx
onPress={handlePress}
elevated
rounded={12}
entering="slide"
>
Card Title
Card content here
`---
🎨 Animation Presets
Built-in spring presets that auto-adapt to device performance:
| Preset | Feel | Use Case |
|--------|------|----------|
|
bounce | Playful | Buttons, cards |
| smooth | Elegant | Transitions, modals |
| snappy | Quick | Tabs, toggles |
| gentle | Soft | Background elements |
| elastic | Springy | Draggables |
| stiff | Precise | Forms, inputs |
| swift | Fast | Micro-interactions |`tsx
const { spring } = useGlideAnimation();spring(100, 'bounce'); // Bouncy animation
spring(100, 'smooth'); // Smooth animation
`---
🎯 Haptic Types
`tsx
const { trigger, confirm, reject, warn } = useGlideHaptics();trigger('light'); // Subtle tap
trigger('medium'); // Standard feedback
trigger('heavy'); // Strong impact
trigger('success'); // Success pattern
trigger('warning'); // Warning pattern
trigger('error'); // Error pattern
trigger('selection'); // Selection tick
// Shortcuts
confirm(); // Success haptic
reject(); // Error haptic
warn(); // Warning haptic
`---
📱 Responsive Breakpoints
Default breakpoints (customizable):
| Breakpoint | Width |
|------------|-------|
|
xs | 0-359px |
| sm | 360-479px |
| md | 480-767px |
| lg | 768-1023px |
| xl | 1024-1279px |
| xxl | 1280px+ |`tsx
const { resolve } = useGlideLayout();// Returns appropriate value based on screen size
const padding = resolve({ xs: 8, sm: 12, md: 16, lg: 24 });
const columns = resolve({ xs: 1, sm: 2, lg: 3, xl: 4 });
`---
⚙️ Configuration
`tsx
config={{
// Custom breakpoints
breakpoints: {
sm: 400,
md: 600,
lg: 900,
},
// Gesture settings
gestures: {
swipeThreshold: 50,
swipeVelocityThreshold: 500,
longPressDelay: 500,
},
// Haptic settings
haptics: {
enabled: true,
intensity: 1, // 0-1
},
// Performance settings
performance: {
enableMonitoring: false,
adaptiveAnimations: true,
},
}}
>
`---
🔧 TypeScript Support
Full TypeScript support with exported types:
`tsx
import type {
GlideConfig,
LayoutMetrics,
ResponsiveValue,
Breakpoint,
AnimationPreset,
HapticFeedbackType,
SwipeGestureData,
DeviceCapabilities,
} from 'react-native-glide-ui';
``---
MIT © Your Name
---
Contributions welcome! Please read our contributing guidelines.
---
Made with ❤️ for the React Native community