0
# Animation Registry
1

2
Global registry system for registering, managing, and reusing named animations across your application. Register custom animations once and use them by name throughout your app.
3

4
## Capabilities
5

6
### Register Animation
7

8
Register a single custom animation in the global registry for reuse by name.
9

10
```javascript { .api }
11
/**
12
 * Registers a custom animation in the global registry
13
 * @param animationName - Unique name for the animation
14
 * @param animation - Animation definition object
15
 */
16
function registerAnimation(animationName: string, animation: CustomAnimation): void;
17
```
18

19
**Usage Examples:**
20

21
```javascript
22
import * as Animatable from 'react-native-animatable';
23

24
// Define custom animation
25
const myCustomBounce = {
26
  0: {
27
    translateY: 0,
28
    scale: 1,
29
  },
30
  0.4: {
31
    translateY: -40,
32
    scale: 1.1,
33
  },
34
  0.8: {
35
    translateY: 0,
36
    scale: 0.95,
37
  },
38
  1: {
39
    translateY: 0,
40
    scale: 1,
41
  },
42
};
43

44
// Register it globally
45
Animatable.registerAnimation('customBounce', myCustomBounce);
46

47
// Use by name anywhere in your app
48
<Animatable.View animation="customBounce" duration={800}>
49
  <Text>Custom bounce animation!</Text>
50
</Animatable.View>
51

52
// Also available as imperative method
53
this.view.customBounce(600);
54
```
55

56
### Initialize Registry with Definitions
57

58
Bulk register multiple animations from a definitions object, ideal for setting up app-wide animation libraries.
59

60
```javascript { .api }
61
/**
62
 * Bulk register animations from a definitions object
63
 * @param animations - Object mapping animation names to definitions
64
 */
65
function initializeRegistryWithDefinitions(animations: { [key: string]: CustomAnimation }): void;
66
```
67

68
**Usage Examples:**
69

70
```javascript
71
import * as Animatable from 'react-native-animatable';
72

73
// Define animation library
74
const myAnimations = {
75
  slideInSlow: {
76
    from: {
77
      translateX: -100,
78
      opacity: 0,
79
    },
80
    to: {
81
      translateX: 0,
82
      opacity: 1,
83
    },
84
  },
85
  
86
  popIn: {
87
    from: {
88
      scale: 0,
89
      rotate: '45deg',
90
    },
91
    to: {
92
      scale: 1,
93
      rotate: '0deg',
94
    },
95
  },
96
  
97
  gentlePulse: {
98
    0: {
99
      scale: 1,
100
    },
101
    0.5: {
102
      scale: 1.05,
103
    },
104
    1: {
105
      scale: 1,
106
    },
107
  },
108
  
109
  colorShift: {
110
    from: {
111
      backgroundColor: 'rgba(255, 0, 0, 1)',
112
    },
113
    to: {
114
      backgroundColor: 'rgba(0, 255, 0, 1)',
115
    },
116
  },
117
};
118

119
// Register all at once
120
Animatable.initializeRegistryWithDefinitions(myAnimations);
121

122
// Use registered animations by name
123
<Animatable.View animation="slideInSlow">
124
  <Text>Sliding in slowly</Text>
125
</Animatable.View>
126

127
<Animatable.View animation="popIn" duration={400}>
128
  <Text>Popping in with rotation</Text>
129
</Animatable.View>
130

131
<Animatable.View 
132
  animation="gentlePulse" 
133
  iterationCount="infinite"
134
  direction="alternate"
135
>
136
  <Text>Gentle pulsing</Text>
137
</Animatable.View>
138
```
139

140
## App-Wide Animation Setup
141

142
### Centralized Animation Library
143

144
Create a dedicated file for your app's animation definitions:
145

146
```javascript
147
// animations/index.js
148
export const brandAnimations = {
149
  // Brand-specific entrance
150
  brandSlideIn: {
151
    from: {
152
      translateX: -200,
153
      opacity: 0,
154
      scale: 0.8,
155
    },
156
    to: {
157
      translateX: 0,
158
      opacity: 1,
159
      scale: 1,
160
    },
161
  },
162
  
163
  // Brand-specific exit
164
  brandSlideOut: {
165
    from: {
166
      translateX: 0,
167
      opacity: 1,
168
      scale: 1,
169
    },
170
    to: {
171
      translateX: 200,
172
      opacity: 0,
173
      scale: 0.8,
174
    },
175
  },
176
  
177
  // Loading animation
178
  brandPulse: {
179
    easing: 'ease-in-out',
180
    0: {
181
      scale: 1,
182
      backgroundColor: 'rgba(0, 123, 255, 1)',
183
    },
184
    0.5: {
185
      scale: 1.1,
186
      backgroundColor: 'rgba(0, 123, 255, 0.7)',
187
    },
188
    1: {
189
      scale: 1,
190
      backgroundColor: 'rgba(0, 123, 255, 1)',
191
    },
192
  },
193
  
194
  // Error shake
195
  errorShake: {
196
    easing: 'ease-out',
197
    0: { translateX: 0 },
198
    0.1: { translateX: -8 },
199
    0.2: { translateX: 8 },
200
    0.3: { translateX: -6 },
201
    0.4: { translateX: 6 },
202
    0.5: { translateX: -4 },
203
    0.6: { translateX: 4 },
204
    0.7: { translateX: -2 },
205
    0.8: { translateX: 2 },
206
    1: { translateX: 0 },
207
  },
208
};
209

210
// App initialization
211
import * as Animatable from 'react-native-animatable';
212
import { brandAnimations } from './animations';
213

214
// Register all brand animations
215
Animatable.initializeRegistryWithDefinitions(brandAnimations);
216
```
217

218
### Component-Specific Animations
219

220
```javascript
221
// components/Card/animations.js
222
export const cardAnimations = {
223
  cardEnter: {
224
    from: {
225
      scale: 0.9,
226
      opacity: 0,
227
      translateY: 20,
228
    },
229
    to: {
230
      scale: 1,
231
      opacity: 1,
232
      translateY: 0,
233
    },
234
  },
235
  
236
  cardExit: {
237
    from: {
238
      scale: 1,
239
      opacity: 1,
240
      translateY: 0,
241
    },
242
    to: {
243
      scale: 0.9,
244
      opacity: 0,
245
      translateY: -20,
246
    },
247
  },
248
  
249
  cardFlip: {
250
    style: {
251
      backfaceVisibility: 'hidden',
252
    },
253
    0: {
254
      rotateY: '0deg',
255
    },
256
    1: {
257
      rotateY: '180deg',
258
    },
259
  },
260
};
261

262
// Register component animations
263
Animatable.initializeRegistryWithDefinitions(cardAnimations);
264
```
265

266
## Overriding Built-in Animations
267

268
You can override built-in animations by registering custom versions with the same name:
269

270
```javascript
271
// Custom version of 'bounce' animation
272
const customBounce = {
273
  easing: 'ease-out-back',
274
  0: {
275
    translateY: 0,
276
    scale: 1,
277
  },
278
  0.3: {
279
    translateY: -30,
280
    scale: 1.05,
281
  },
282
  0.6: {
283
    translateY: 0,
284
    scale: 0.98,
285
  },
286
  1: {
287
    translateY: 0,
288
    scale: 1,
289
  },
290
};
291

292
// Override the built-in bounce animation
293
Animatable.registerAnimation('bounce', customBounce);
294

295
// Now all uses of 'bounce' will use your custom version
296
<Animatable.View animation="bounce">
297
  <Text>Custom bounce behavior</Text>
298
</Animatable.View>
299
```
300

301
## Dynamic Animation Registration
302

303
Register animations dynamically based on app state or user preferences:
304

305
```javascript
306
class AnimationManager {
307
  static registerThemeAnimations(theme) {
308
    const themeAnimations = {
309
      themeTransition: {
310
        from: {
311
          backgroundColor: theme.oldBackgroundColor,
312
        },
313
        to: {
314
          backgroundColor: theme.newBackgroundColor,
315
        },
316
      },
317
      
318
      themePulse: {
319
        0: {
320
          backgroundColor: theme.primaryColor,
321
          scale: 1,
322
        },
323
        0.5: {
324
          backgroundColor: theme.secondaryColor,
325
          scale: 1.05,
326
        },
327
        1: {
328
          backgroundColor: theme.primaryColor,
329
          scale: 1,
330
        },
331
      },
332
    };
333
    
334
    Animatable.initializeRegistryWithDefinitions(themeAnimations);
335
  }
336
  
337
  static registerUserAnimations(userPrefs) {
338
    const speed = userPrefs.animationSpeed || 1;
339
    const animations = {
340
      userSlideIn: {
341
        easing: userPrefs.easing || 'ease',
342
        from: {
343
          translateX: -100 * speed,
344
          opacity: 0,
345
        },
346
        to: {
347
          translateX: 0,
348
          opacity: 1,
349
        },
350
      },
351
    };
352
    
353
    Animatable.initializeRegistryWithDefinitions(animations);
354
  }
355
}
356

357
// Usage
358
AnimationManager.registerThemeAnimations(currentTheme);
359
AnimationManager.registerUserAnimations(userPreferences);
360
```
361

362
## Animation Categories
363

364
Organize animations by category for better maintainability:
365

366
```javascript
367
const uiAnimations = {
368
  // Button animations
369
  buttonPress: { /* definition */ },
370
  buttonRelease: { /* definition */ },
371
  
372
  // Modal animations
373
  modalSlideIn: { /* definition */ },
374
  modalFadeOut: { /* definition */ },
375
  
376
  // List animations
377
  listItemEnter: { /* definition */ },
378
  listItemExit: { /* definition */ },
379
};
380

381
const transitionAnimations = {
382
  // Page transitions
383
  pageSlideLeft: { /* definition */ },
384
  pageSlideRight: { /* definition */ },
385
  
386
  // Tab transitions
387
  tabFadeIn: { /* definition */ },
388
  tabFadeOut: { /* definition */ },
389
};
390

391
const feedbackAnimations = {
392
  // Success feedback
393
  successCheckmark: { /* definition */ },
394
  successGlow: { /* definition */ },
395
  
396
  // Error feedback
397
  errorShake: { /* definition */ },
398
  errorPulse: { /* definition */ },
399
};
400

401
// Register all categories
402
Animatable.initializeRegistryWithDefinitions({
403
  ...uiAnimations,
404
  ...transitionAnimations,
405
  ...feedbackAnimations,
406
});
407
```