🚀 react-native-glide-ui

The 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.


---

✨ What Makes This Special?

| 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 |

---

📦 Installation

``bash


Using npm

npm install react-native-glide-ui react-native-reanimated react-native-gesture-handler

Using yarn

yarn add react-native-glide-ui react-native-reanimated react-native-gesture-handler

Using expo

npx expo 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!


spring(100, 'bounce')} title="Bounce Right" />
spring(0, 'smooth')} title="Smooth Back" />

);
}
`

$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';
``

---

📄 License

MIT © Your Name

---

🤝 Contributing

Contributions welcome! Please read our contributing guidelines.

---

Made with ❤️ for the React Native community