0
# Component Creation
1

2
Create animatable versions of any React Native component using the `createAnimatableComponent` higher-order component factory.
3

4
## Capabilities
5

6
### Create Animatable Component
7

8
Transform any React Native component into an animatable component with full animation capabilities.
9

10
```javascript { .api }
11
/**
12
 * Creates an animatable version of any React Native component
13
 * @param WrappedComponent - The React Native component to make animatable
14
 * @returns Animatable component with animation capabilities
15
 */
16
function createAnimatableComponent<P, S>(
17
  WrappedComponent: ComponentClass<P> | FunctionComponent<P> | ClassicComponentClass<P>
18
): AnimatableComponent<P, S>;
19
```
20

21
**Usage Examples:**
22

23
```javascript
24
import * as Animatable from 'react-native-animatable';
25
import { TouchableOpacity, ScrollView, Modal } from 'react-native';
26

27
// Create animatable versions of standard components
28
const AnimatedButton = Animatable.createAnimatableComponent(TouchableOpacity);
29
const AnimatedScrollView = Animatable.createAnimatableComponent(ScrollView);
30
const AnimatedModal = Animatable.createAnimatableComponent(Modal);
31

32
// Use them with full animation support
33
<AnimatedButton 
34
  animation="pulse" 
35
  iterationCount="infinite"
36
  onPress={this.handlePress}
37
  style={styles.button}
38
>
39
  <Text>Animated Button</Text>
40
</AnimatedButton>
41

42
<AnimatedScrollView 
43
  animation="slideInUp"
44
  duration={800}
45
  style={styles.scrollView}
46
>
47
  {/* Content */}
48
</AnimatedScrollView>
49
```
50

51
### Custom Component Animation
52

53
Create reusable animatable versions of your own custom components.
54

55
**Usage Examples:**
56

57
```javascript
58
import React from 'react';
59
import { View, Text, StyleSheet } from 'react-native';
60
import * as Animatable from 'react-native-animatable';
61

62
// Custom component
63
const Card = ({ title, children, style }) => (
64
  <View style={[styles.card, style]}>
65
    <Text style={styles.title}>{title}</Text>
66
    {children}
67
  </View>
68
);
69

70
// Make it animatable
71
const AnimatedCard = Animatable.createAnimatableComponent(Card);
72

73
// Use with animations
74
<AnimatedCard 
75
  title="Welcome"
76
  animation="fadeInUp"
77
  duration={1000}
78
  delay={200}
79
  style={{ margin: 10 }}
80
>
81
  <Text>This card animates smoothly!</Text>
82
</AnimatedCard>
83

84
const styles = StyleSheet.create({
85
  card: {
86
    backgroundColor: 'white',
87
    borderRadius: 8,
88
    padding: 16,
89
    shadowColor: '#000',
90
    shadowOffset: { width: 0, height: 2 },
91
    shadowOpacity: 0.1,
92
    shadowRadius: 4,
93
    elevation: 3,
94
  },
95
  title: {
96
    fontSize: 18,
97
    fontWeight: 'bold',
98
    marginBottom: 8,
99
  },
100
});
101
```
102

103
### Third-party Component Integration
104

105
Integrate animation capabilities with third-party library components.
106

107
**Usage Examples:**
108

109
```javascript
110
import * as Animatable from 'react-native-animatable';
111
import { Button } from 'react-native-elements';
112
import { Card } from 'react-native-paper';
113
import Icon from 'react-native-vector-icons/MaterialIcons';
114

115
// Make third-party components animatable
116
const AnimatedButton = Animatable.createAnimatableComponent(Button);
117
const AnimatedCard = Animatable.createAnimatableComponent(Card);
118
const AnimatedIcon = Animatable.createAnimatableComponent(Icon);
119

120
// Use with full animation support
121
<AnimatedButton
122
  title="Tap me"
123
  animation="pulse"
124
  iterationCount="infinite"
125
  buttonStyle={{ backgroundColor: '#007AFF' }}
126
  onPress={this.handlePress}
127
/>
128

129
<AnimatedCard
130
  animation="slideInLeft"
131
  duration={600}
132
  style={{ margin: 16 }}
133
>
134
  <Card.Title title="Animated Card" />
135
  <Card.Content>
136
    <Text>This card slides in from the left!</Text>
137
  </Card.Content>
138
</AnimatedCard>
139

140
<AnimatedIcon
141
  name="favorite"
142
  size={30}
143
  color="red"
144
  animation="rubberBand"
145
  iterationCount="infinite"
146
  iterationDelay={2000}
147
/>
148
```
149

150
## Advanced Usage
151

152
### Forwarding Refs
153

154
When creating animatable components that need ref forwarding:
155

156
```javascript
157
import React, { forwardRef } from 'react';
158
import * as Animatable from 'react-native-animatable';
159

160
const CustomInput = forwardRef(({ placeholder, onChangeText, style }, ref) => (
161
  <TextInput
162
    ref={ref}
163
    placeholder={placeholder}
164
    onChangeText={onChangeText}
165
    style={[styles.input, style]}
166
  />
167
));
168

169
const AnimatedInput = Animatable.createAnimatableComponent(CustomInput);
170

171
// Usage with ref access
172
class FormComponent extends Component {
173
  inputRef = React.createRef();
174
  
175
  focusInput = () => {
176
    this.inputRef.current.focus();
177
    this.inputRef.current.shake(400);
178
  };
179
  
180
  render() {
181
    return (
182
      <AnimatedInput
183
        ref={this.inputRef}
184
        placeholder="Enter text"
185
        animation="fadeInUp"
186
        delay={300}
187
      />
188
    );
189
  }
190
}
191
```
192

193
### Higher-Order Component Pattern
194

195
Create reusable animation configurations:
196

197
```javascript
198
import * as Animatable from 'react-native-animatable';
199

200
// Create HOC for common animation patterns
201
const withFadeIn = (Component, duration = 1000) => {
202
  const AnimatedComponent = Animatable.createAnimatableComponent(Component);
203
  
204
  return (props) => (
205
    <AnimatedComponent
206
      animation="fadeIn"
207
      duration={duration}
208
      {...props}
209
    />
210
  );
211
};
212

213
// Usage
214
const FadeInView = withFadeIn(View);
215
const FadeInText = withFadeIn(Text, 1500);
216

217
<FadeInView style={{ padding: 20 }}>
218
  <FadeInText>This text fades in slower</FadeInText>
219
</FadeInView>
220
```
221

222
## Type Safety
223

224
The `createAnimatableComponent` function preserves TypeScript types:
225

226
```typescript { .api }
227
interface AnimatableComponent<P extends {}, S extends {}> 
228
  extends NativeMethods, Component, ClassicComponentClass<AnimatableProps<S> & P> {
229
  
230
  animate(animation: Animation | CustomAnimation, duration?: number, iterationDelay?: number): Promise<{ finished: boolean }>;
231
  stopAnimation(): void;
232
  transition<T extends S>(fromValues: T, toValues: T, duration?: number, easing?: Easing): void;
233
  transitionTo<T extends S>(toValues: T, duration?: number, easing?: Easing): void;
234
  setNativeProps(nativeProps: object): void;
235
  
236
  // All built-in animations as methods
237
  [K in Animation]: (duration?: number) => Promise<{ finished: boolean }>;
238
}
239
```
240

241
This ensures full type safety when using animatable components in TypeScript projects, with proper inference of props and style types from the wrapped component.