0
# React Native
1

2
React Content Loader provides full React Native support with the same API as the web version, using React Native's Animated API for smooth performance and react-native-svg for rendering.
3

4
## Installation
5

6
React Native requires the additional react-native-svg dependency:
7

8
```bash
9
npm install react-content-loader react-native-svg
10
```
11

12
For React Native 0.60+, react-native-svg will be auto-linked. For older versions, follow the react-native-svg installation guide.
13

14
## Core Imports
15

16
```typescript
17
import ContentLoader, { 
18
  Facebook, 
19
  Instagram, 
20
  Code, 
21
  List, 
22
  BulletList,
23
  Circle, 
24
  Rect, 
25
  Path 
26
} from 'react-content-loader/native';
27
```
28

29
## Capabilities
30

31
### ContentLoader Component
32

33
Main component with identical API to web version but optimized for React Native performance.
34

35
```typescript { .api }
36
interface IContentLoaderProps extends SvgProps {
37
  /** Enable/disable animation */
38
  animate?: boolean;
39
  /** Background color of the animation */
40
  backgroundColor?: string;
41
  /** Foreground color of the animation */
42
  foregroundColor?: string;
43
  /** Right-to-left content support */
44
  rtl?: boolean;
45
  /** Animation speed in seconds */
46
  speed?: number;
47
  /** Interval between animation runs as fraction of speed */
48
  interval?: number;
49
  /** Unique identifier for consistency */
50
  uniqueKey?: string;
51
  /** Custom shapes rendered before content mask */
52
  beforeMask?: JSX.Element;
53
}
54

55
declare const ContentLoader: React.FC<IContentLoaderProps>;
56
```
57

58
**Usage Example:**
59
```typescript
60
import ContentLoader from 'react-content-loader/native';
61

62
const MyNativeLoader = () => (
63
  <ContentLoader 
64
    width={300}
65
    height={200}
66
    backgroundColor="#f3f3f3"
67
    foregroundColor="#ecebeb"
68
    speed={1.2}
69
  />
70
);
71
```
72

73
### SVG Shape Components
74

75
React Native exports specific SVG shape components for building custom loaders.
76

77
```typescript { .api }
78
/**
79
 * SVG Circle component from react-native-svg
80
 * Used for creating circular placeholder elements
81
 */
82
declare const Circle: React.ComponentType<{
83
  cx?: string | number;
84
  cy?: string | number;
85
  r?: string | number;
86
  fill?: string;
87
  [key: string]: any;
88
}>;
89

90
/**
91
 * SVG Rectangle component from react-native-svg
92
 * Used for creating rectangular placeholder elements
93
 */
94
declare const Rect: React.ComponentType<{
95
  x?: string | number;
96
  y?: string | number;
97
  width?: string | number;
98
  height?: string | number;
99
  rx?: string | number;
100
  ry?: string | number;
101
  fill?: string;
102
  [key: string]: any;
103
}>;
104

105
/**
106
 * SVG Path component from react-native-svg
107
 * Used for creating complex path-based placeholder elements
108
 */
109
declare const Path: React.ComponentType<{
110
  d?: string;
111
  fill?: string;
112
  [key: string]: any;
113
}>;
114
```
115

116
### Custom Loader Creation
117

118
For React Native, use the exported shape components instead of HTML SVG elements:
119

120
```typescript
121
import ContentLoader, { Circle, Rect } from 'react-content-loader/native';
122

123
const MyCustomNativeLoader = () => (
124
  <ContentLoader viewBox="0 0 380 70" width={380} height={70}>
125
    <Circle cx="30" cy="30" r="30" />
126
    <Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
127
    <Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
128
  </ContentLoader>
129
);
130
```
131

132
### Animation System
133

134
React Native version uses Animated API for optimal performance:
135

136
```typescript
137
// The animation system automatically:
138
// - Uses useNativeDriver: true for optimal performance
139
// - Converts speed from seconds to milliseconds
140
// - Handles component lifecycle (mount/unmount)
141
// - Manages animation loops with proper cleanup
142

143
const AnimatedLoader = () => (
144
  <ContentLoader 
145
    speed={1.5}      // Animation duration in seconds
146
    interval={0.25}  // Delay between animations as fraction of speed
147
    animate={true}   // Enable/disable animation
148
  >
149
    <Circle cx="50" cy="50" r="25" />
150
  </ContentLoader>
151
);
152
```
153

154
### RTL Support
155

156
Right-to-left support uses React Native's transform property:
157

158
```typescript
159
const RTLLoader = () => (
160
  <ContentLoader 
161
    rtl={true}
162
    width={300}
163
    height={100}
164
  >
165
    <Rect x="0" y="0" width="200" height="20" />
166
    <Rect x="0" y="30" width="150" height="20" />
167
  </ContentLoader>
168
);
169
```
170

171
## Platform Differences
172

173
### Props Not Available in React Native
174

175
These web-specific props are not available in React Native:
176

177
- `animateBegin` - Use React Native animation timing instead
178
- `backgroundOpacity` / `foregroundOpacity` - Use color alpha values
179
- `baseUrl` - Not applicable in React Native
180
- `gradientRatio` / `gradientDirection` - Native animation system handles gradients
181
- `title` - Use accessibility props instead
182
- `style` - Use React Native style prop on parent container
183

184
### React Native Specific Features
185

186
```typescript
187
// Use SvgProps for additional React Native SVG features
188
import { SvgProps } from 'react-native-svg';
189

190
const AdvancedLoader = () => (
191
  <ContentLoader 
192
    width={300}
193
    height={200}
194
    preserveAspectRatio="xMidYMid meet"  // SvgProps feature
195
    opacity={0.8}                        // SvgProps feature
196
  >
197
    <Rect x="0" y="0" width="100%" height="100%" />
198
  </ContentLoader>
199
);
200
```
201

202
### Preset Components in React Native
203

204
All preset components work identically in React Native:
205

206
```typescript
207
import { Facebook, Instagram, Code } from 'react-content-loader/native';
208

209
const MyNativePresets = () => (
210
  <>
211
    <Facebook backgroundColor="#f0f0f0" />
212
    <Instagram speed={2} />
213
    <Code foregroundColor="#333" />
214
  </>
215
);
216
```
217

218
## Performance Considerations
219

220
### Optimal Usage Patterns
221

222
```typescript
223
// Good: Reuse components, avoid inline styles
224
const StyledLoader = () => (
225
  <ContentLoader 
226
    backgroundColor="#f3f3f3"
227
    foregroundColor="#ecebeb"
228
    speed={1.2}
229
  >
230
    <Rect x="0" y="0" width="100%" height="20" />
231
  </ContentLoader>
232
);
233

234
// Good: Use native driver animation (automatic)
235
const FastLoader = () => (
236
  <ContentLoader animate={true} speed={1.0}>
237
    <Circle cx="50" cy="50" r="25" />
238
  </ContentLoader>
239
);
240
```
241

242
### Memory Management
243

244
The component automatically handles:
245
- Animation cleanup on unmount
246
- Native driver optimization
247
- Proper lifecycle management
248

249
```typescript
250
// Animation automatically stops when component unmounts
251
const ConditionalLoader = ({ loading }) => (
252
  loading ? <ContentLoader><Circle cx="50" cy="50" r="25" /></ContentLoader> : null
253
);
254
```