0
# Pre-built Components
1

2
Ready-to-use animated versions of core React Native components (`View`, `Text`, `Image`) with full animation capabilities built-in.
3

4
## Capabilities
5

6
### Animatable View
7

8
Pre-built animatable version of React Native's `View` component with all animation capabilities.
9

10
```javascript { .api }
11
/**
12
 * Animatable View component with full animation support
13
 * Inherits all ViewProps from React Native plus animation props
14
 */
15
const View: AnimatableComponent<ViewProps, ViewStyle>;
16
```
17

18
**Usage Examples:**
19

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

23
// Basic animated view
24
<Animatable.View animation="fadeIn" duration={1000}>
25
  <Text>I will fade in</Text>
26
</Animatable.View>
27

28
// View with complex animation configuration
29
<Animatable.View 
30
  animation="slideInDown" 
31
  duration={800}
32
  delay={200}
33
  easing="ease-out"
34
  iterationCount={2}
35
  direction="alternate"
36
>
37
  <Text>I will slide and bounce</Text>
38
</Animatable.View>
39

40
// Transition on style changes
41
<Animatable.View 
42
  transition="backgroundColor" 
43
  style={{ backgroundColor: this.state.bgColor }}
44
>
45
  <Text>My background animates</Text>
46
</Animatable.View>
47
```
48

49
### Animatable Text
50

51
Pre-built animatable version of React Native's `Text` component with all animation capabilities.
52

53
```javascript { .api }
54
/**
55
 * Animatable Text component with full animation support
56
 * Inherits all TextProps from React Native plus animation props
57
 */
58
const Text: AnimatableComponent<TextProps, TextStyle>;
59
```
60

61
**Usage Examples:**
62

63
```javascript
64
import * as Animatable from 'react-native-animatable';
65

66
// Animated text with attention seeker
67
<Animatable.Text animation="pulse" iterationCount="infinite">
68
  ❤️
69
</Animatable.Text>
70

71
// Text with entrance animation
72
<Animatable.Text 
73
  animation="bounceInUp" 
74
  duration={1200}
75
  style={{ fontSize: 24, textAlign: 'center' }}
76
>
77
  Welcome!
78
</Animatable.Text>
79

80
// Looping text animation
81
<Animatable.Text 
82
  animation="slideInDown" 
83
  iterationCount={5} 
84
  direction="alternate"
85
>
86
  Up and down you go
87
</Animatable.Text>
88
```
89

90
### Animatable Image
91

92
Pre-built animatable version of React Native's `Image` component with all animation capabilities.
93

94
```javascript { .api }
95
/**
96
 * Animatable Image component with full animation support
97
 * Inherits all ImageProps from React Native plus animation props
98
 */
99
const Image: AnimatableComponent<ImageProps, ImageStyle>;
100
```
101

102
**Usage Examples:**
103

104
```javascript
105
import * as Animatable from 'react-native-animatable';
106

107
// Animated image entrance
108
<Animatable.Image 
109
  source={{ uri: 'https://example.com/image.jpg' }}
110
  animation="zoomIn"
111
  duration={1000}
112
  style={{ width: 200, height: 200 }}
113
/>
114

115
// Image with flip animation
116
<Animatable.Image 
117
  source={require('./logo.png')}
118
  animation="flipInY"
119
  delay={500}
120
  style={{ width: 100, height: 100 }}
121
/>
122

123
// Image with transition effects
124
<Animatable.Image 
125
  source={{ uri: this.state.imageUrl }}
126
  transition={['opacity', 'scale']}
127
  style={{ 
128
    opacity: this.state.visible ? 1 : 0,
129
    transform: [{ scale: this.state.scale }]
130
  }}
131
/>
132
```
133

134
## Common Props
135

136
All pre-built components inherit the full `AnimatableProps` interface:
137

138
```javascript { .api }
139
interface AnimatableProps {
140
  /** Name of the animation or custom animation object */
141
  animation?: Animation | string | CustomAnimation;
142
  /** Animation duration in milliseconds (default: 1000) */
143
  duration?: number;
144
  /** Animation delay in milliseconds (default: 0) */
145
  delay?: number;
146
  /** Animation direction (default: 'normal') */
147
  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
148
  /** Easing function (default: 'ease') */
149
  easing?: Easing;
150
  /** Number of iterations or 'infinite' (default: 1) */
151
  iterationCount?: number | 'infinite';
152
  /** Delay between iterations in milliseconds (default: 0) */
153
  iterationDelay?: number;
154
  /** Style properties to transition on change */
155
  transition?: string | string[];
156
  /** Use native animation driver (default: false) */
157
  useNativeDriver?: boolean;
158
  /** Create interaction handle (default: false for finite animations) */
159
  isInteraction?: boolean;
160
  /** Called when animation begins */
161
  onAnimationBegin?: () => void;
162
  /** Called when animation ends */
163
  onAnimationEnd?: (endState: { finished: boolean }) => void;
164
  /** Called when transition begins */
165
  onTransitionBegin?: (property: string) => void;
166
  /** Called when transition ends */
167
  onTransitionEnd?: (property: string) => void;
168
}
169
```
170

171
## Imperative Methods
172

173
All pre-built components also support imperative animation control:
174

175
```javascript { .api }
176
interface AnimatableComponentMethods {
177
  /** Execute an animation imperatively */
178
  animate(animation: Animation | CustomAnimation, duration?: number, iterationDelay?: number): Promise<{ finished: boolean }>;
179
  /** Stop any running animation */
180
  stopAnimation(): void;
181
  /** Transition between specific style values */
182
  transition(fromValues: object, toValues: object, duration?: number, easing?: Easing): void;
183
  /** Transition to specific style values from current state */
184
  transitionTo(toValues: object, duration?: number, easing?: Easing): void;
185
  /** All built-in animations available as methods */
186
  [K in Animation]: (duration?: number) => Promise<{ finished: boolean }>;
187
}
188
```
189

190
**Usage Examples:**
191

192
```javascript
193
class AnimatedComponent extends Component {
194
  handleViewRef = ref => this.view = ref;
195
  
196
  animateView = () => {
197
    // Use specific animation method
198
    this.view.bounce(800).then(endState => {
199
      console.log('Bounce finished:', endState.finished);
200
    });
201
    
202
    // Or use generic animate method
203
    this.view.animate('pulse', 1000);
204
    
205
    // Transition to new values
206
    this.view.transitionTo({ opacity: 0.5, scale: 1.2 }, 500);
207
  };
208
  
209
  render() {
210
    return (
211
      <Animatable.View ref={this.handleViewRef}>
212
        <Text>Tap me to animate</Text>
213
      </Animatable.View>
214
    );
215
  }
216
}
217
```