mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekayandHanzo Dev
751ef5c778
Both old names are owned by a different npm account (artemis-prime), so publishing them returns 403 — which is how this surfaced: the 8.0.0 run shipped @hanzogui/logo and @hanzogui/demos depending on [email protected], a version that cannot be published and therefore does not exist. Those two were uninstallable. @hanzo/gui and @hanzogui/* are ours, so the framework now carries the name it is imported by everywhere downstream, and the loader moves under the scope we control. The rewrite is limited to package references. `DEBUG?.startsWith('hanzogui')` is a log-namespace filter and join(dir, 'hanzogui') is a path — rewriting either would change behaviour, so both are untouched. Co-authored-by: Hanzo Dev <[email protected]>
171 lines
3.3 KiB
Plaintext
171 lines
3.3 KiB
Plaintext
---
|
|
title: React Native Driver
|
|
description: Spring-based animations using React Native Animated
|
|
---
|
|
|
|
[React Native's Animated library](https://reactnative.dev/docs/animated) is the
|
|
animation library that comes built into React Native and React Native Web.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
yarn add @hanzogui/animations-react-native
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Add it to your [Gui config](/docs/core/configuration):
|
|
|
|
```tsx
|
|
import { createAnimations } from '@hanzogui/animations-react-native'
|
|
import { createGui } from '@hanzo/gui'
|
|
|
|
export default createGui({
|
|
animations: createAnimations({
|
|
fast: {
|
|
damping: 20,
|
|
mass: 1.2,
|
|
stiffness: 250,
|
|
},
|
|
medium: {
|
|
damping: 10,
|
|
mass: 0.9,
|
|
stiffness: 100,
|
|
},
|
|
slow: {
|
|
damping: 20,
|
|
stiffness: 60,
|
|
},
|
|
}),
|
|
// ...
|
|
})
|
|
```
|
|
|
|
## Animation Configuration
|
|
|
|
React Native animations use spring physics with these parameters:
|
|
|
|
### Spring Parameters
|
|
|
|
- **`damping`** - How quickly the spring settles. Higher = less bouncy
|
|
- **`mass`** - Mass of the object attached to the spring. Higher = more inertia
|
|
- **`stiffness`** - Spring stiffness coefficient. Higher = faster animation
|
|
|
|
```tsx
|
|
createAnimations({
|
|
bouncy: {
|
|
damping: 10,
|
|
mass: 0.9,
|
|
stiffness: 100,
|
|
},
|
|
quick: {
|
|
damping: 20,
|
|
mass: 1.2,
|
|
stiffness: 250,
|
|
},
|
|
})
|
|
```
|
|
|
|
### Delay
|
|
|
|
You can add animation delays using the array syntax:
|
|
|
|
```tsx
|
|
<Square transition={['bouncy', { delay: 200 }]} />
|
|
```
|
|
|
|
The delay is specified in milliseconds and uses `Animated.delay()` internally to
|
|
sequence animations.
|
|
|
|
## When to Use
|
|
|
|
**Advantages:**
|
|
|
|
- **Cross-platform** - Works on web and React Native
|
|
- **Built-in** - No additional animation library needed
|
|
- **Spring physics** - Natural, physics-based motion
|
|
- **Mature** - Battle-tested in React Native ecosystem
|
|
|
|
**Limitations:**
|
|
|
|
- Larger bundle than CSS driver
|
|
- Less advanced than Reanimated
|
|
- Web-only apps might prefer lighter alternatives
|
|
|
|
## Platform-Specific Configuration
|
|
|
|
You can use different drivers on web vs native using platform-specific file
|
|
extensions:
|
|
|
|
```tsx
|
|
// animations.ts (web)
|
|
import { createAnimations } from '@hanzogui/animations-css'
|
|
|
|
export const animations = createAnimations({
|
|
quick: 'ease-out 150ms',
|
|
})
|
|
```
|
|
|
|
```tsx
|
|
// animations.native.ts (native)
|
|
import { createAnimations } from '@hanzogui/animations-react-native'
|
|
|
|
export const animations = createAnimations({
|
|
quick: {
|
|
damping: 20,
|
|
stiffness: 250,
|
|
},
|
|
})
|
|
```
|
|
|
|
Then import without the extension:
|
|
|
|
```tsx
|
|
import { animations } from './animations'
|
|
```
|
|
|
|
Your bundler will automatically pick the right file based on the platform.
|
|
|
|
## Example
|
|
|
|
```tsx
|
|
import { createAnimations } from '@hanzogui/animations-react-native'
|
|
import { YStack, createGui } from '@hanzo/gui'
|
|
|
|
const animations = createAnimations({
|
|
bouncy: {
|
|
damping: 10,
|
|
mass: 0.9,
|
|
stiffness: 100,
|
|
},
|
|
quick: {
|
|
damping: 20,
|
|
mass: 1.2,
|
|
stiffness: 250,
|
|
},
|
|
})
|
|
|
|
export default createGui({
|
|
animations,
|
|
// ... rest of config
|
|
})
|
|
|
|
// Usage in components
|
|
export const MyComponent = () => (
|
|
<YStack
|
|
transition="bouncy"
|
|
enterStyle={{
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
}}
|
|
/>
|
|
)
|
|
```
|
|
|
|
## See Also
|
|
|
|
- [Animations Introduction](/docs/core/animations)
|
|
- [CSS Driver](/docs/core/animations-css)
|
|
- [Motion Driver](/docs/core/animations-motion)
|
|
- [Reanimated Driver](/docs/core/animations-reanimated)
|