forked from facebook/react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
425 lines (405 loc) · 82.8 KB
/
index.html
File metadata and controls
425 lines (405 loc) · 82.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animations · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface."/><meta name="docsearch:version" content="0.40"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animations · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface."/><meta property="og:image" content="https://reactnative.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://reactnative.dev/img/logo-og.png"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'auto');
ga('send', 'pageview');
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/js/codeblocks.js"></script><script type="text/javascript" src="/js/tabs.js"></script><script type="text/javascript" src="/js/docs-rating.js"></script><script type="text/javascript" src="/js/announcement.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
document.addEventListener('DOMContentLoaded', function() {
addBackToTop(
{"zIndex":100}
)
});
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>0.40</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/0.40/getting-started" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/docs/0.40/components-and-apis" target="_self">Components</a></li><li class=""><a href="/docs/0.40/accessibilityinfo" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Guides</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">The Basics<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.40/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/props">Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/state">State</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/style">Style</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/more-resources">More Resources</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.40/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/images">Images</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/0.40/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/native-modules-setup">Native Modules Setup</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (iOS)<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.40/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/building-for-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/app-extensions">App Extensions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (Android)<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.40/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/signed-apk-android">Publishing to Google Play Store</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/removing-default-permissions">Removing Default Permissions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Components<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.40/activityindicator">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/button">Button</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/image">Image</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/navigator">Navigator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/pickerios">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/slider">Slider</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/snapshotviewios">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/text">Text</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/webview">WebView</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">APIs<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.40/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/alert">Alert</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/alertios">AlertIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/appregistry">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/asyncstorage">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/clipboard">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/datepickerandroid">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/imageeditor">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/imagestore">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/keyboard">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/panresponder">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/permissionsandroid">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/share">Share</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/systrace">Systrace</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/timepickerandroid">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/vibration">Vibration</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.40/view-style-props">View Style Props</a></li></ul></div></div></section></div><script>
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
var headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
var el = event.target;
while(el !== headings){
if (el.tagName === 'A') {
document.body.classList.remove('tocActive');
break;
} else{
el = el.parentNode;
}
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animations.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Animations</h1></header><article><div><span><p>Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.</p>
<p>React Native provides two complementary animation systems: <a href="/docs/0.40/animations#animated-api"><code>Animated</code></a> for granular and interactive control of specific values, and <a href="/docs/0.40/animations#layoutanimation-api"><code>LayoutAnimation</code></a> for animated global layout transactions.</p>
<h2><a class="anchor" aria-hidden="true" id="animated-api"></a><a href="#animated-api" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>Animated</code> API</h2>
<p>The <a href="/docs/0.40/animated"><code>Animated</code></a> API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
<p><code>Animated</code> exports six animatable component types: <code>View</code>, <code>Text</code>, <code>Image</code>, <code>ScrollView</code>, <code>FlatList</code> and <code>SectionList</code>, but you can also create your own using <code>Animated.createAnimatedComponent()</code>.</p>
<p>For example, a container view that fades in when it is mounted may look like this:</p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState, useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { Animated, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
<span class="hljs-keyword">const</span> FadeInView = <span class="hljs-function">(<span class="hljs-params">props</span>) =></span> {
<span class="hljs-keyword">const</span> [fadeAnim] = useState(<span class="hljs-keyword">new</span> Animated.Value(<span class="hljs-number">0</span>)) <span class="hljs-comment">// Initial value for opacity: 0</span>
React.useEffect(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
Animated.timing(
fadeAnim,
{
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">duration</span>: <span class="hljs-number">10000</span>,
}
).start();
}, [])
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Animated.View</span> // <span class="hljs-attr">Special</span> <span class="hljs-attr">animatable</span> <span class="hljs-attr">View</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">{{</span>
<span class="hljs-attr">...props.style</span>,
<span class="hljs-attr">opacity:</span> <span class="hljs-attr">fadeAnim</span>, // <span class="hljs-attr">Bind</span> <span class="hljs-attr">opacity</span> <span class="hljs-attr">to</span> <span class="hljs-attr">animated</span> <span class="hljs-attr">value</span>
}}
></span>
{props.children}
<span class="hljs-tag"></<span class="hljs-name">Animated.View</span>></span></span>
);
}
<span class="hljs-comment">// You can then use your `FadeInView` in place of a `View` in your components:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> () => {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{flex:</span> <span class="hljs-attr">1</span>, <span class="hljs-attr">alignItems:</span> '<span class="hljs-attr">center</span>', <span class="hljs-attr">justifyContent:</span> '<span class="hljs-attr">center</span>'}}></span>
<span class="hljs-tag"><<span class="hljs-name">FadeInView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{width:</span> <span class="hljs-attr">250</span>, <span class="hljs-attr">height:</span> <span class="hljs-attr">50</span>, <span class="hljs-attr">backgroundColor:</span> '<span class="hljs-attr">powderblue</span>'}}></span>
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{fontSize:</span> <span class="hljs-attr">28</span>, <span class="hljs-attr">textAlign:</span> '<span class="hljs-attr">center</span>', <span class="hljs-attr">margin:</span> <span class="hljs-attr">10</span>}}></span>Fading in<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
<span class="hljs-tag"></<span class="hljs-name">FadeInView</span>></span>
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
)
}
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="Example"
data-snack-description="Example usage"
data-snack-code="import%20React%2C%20%7B%20useState%2C%20useEffect%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Animated%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20FadeInView%20%3D%20(props)%20%3D%3E%20%7B%0A%20%20const%20%5BfadeAnim%5D%20%3D%20useState(new%20Animated.Value(0))%20%20%2F%2F%20Initial%20value%20for%20opacity%3A%200%0A%0A%20%20React.useEffect(()%20%3D%3E%20%7B%0A%20%20%20%20Animated.timing(%0A%20%20%20%20%20%20fadeAnim%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20%20%20duration%3A%2010000%2C%0A%20%20%20%20%20%20%7D%0A%20%20%20%20).start()%3B%0A%20%20%7D%2C%20%5B%5D)%0A%0A%20%20return%20(%0A%20%20%20%20%3CAnimated.View%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Special%20animatable%20View%0A%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20...props.style%2C%0A%20%20%20%20%20%20%20%20opacity%3A%20fadeAnim%2C%20%20%20%20%20%20%20%20%20%2F%2F%20Bind%20opacity%20to%20animated%20value%0A%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%7Bprops.children%7D%0A%20%20%20%20%3C%2FAnimated.View%3E%0A%20%20)%3B%0A%7D%0A%0A%2F%2F%20You%20can%20then%20use%20your%20%60FadeInView%60%20in%20place%20of%20a%20%60View%60%20in%20your%20components%3A%0Aexport%20default%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20alignItems%3A%20'center'%2C%20justifyContent%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%3CFadeInView%20style%3D%7B%7Bwidth%3A%20250%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2028%2C%20textAlign%3A%20'center'%2C%20margin%3A%2010%7D%7D%3EFading%20in%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FFadeInView%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%0A%7D%0A"
data-snack-platform="web"
data-snack-supported-platforms=ios,android,web
data-snack-preview="true"
style="
overflow: hidden;
background: #fafafa;
border: 1px solid rgba(0,0,0,.16);
border-radius: 4px;
height: 514px;
width: 100%;
"
></div></div></div><p>Let's break down what's happening here. In the <code>FadeInView</code> constructor, a new <code>Animated.Value</code> called <code>fadeAnim</code> is initialized as part of <code>state</code>. The opacity property on the <code>View</code> is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.</p>
<p>When the component mounts, the opacity is set to 0. Then, an easing animation is started on the <code>fadeAnim</code> animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.</p>
<p>This is done in an optimized way that is faster than calling <code>setState</code> and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.</p>
<h3><a class="anchor" aria-hidden="true" id="configuring-animations"></a><a href="#configuring-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Configuring animations</h3>
<p>Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
<p><code>Animated</code> provides several animation types, the most commonly used one being <a href="/docs/0.40/animated#timing"><code>Animated.timing()</code></a>. It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.</p>
<p>By default, <code>timing</code> will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing a <code>easing</code> parameter. Custom <code>duration</code> or even a <code>delay</code> before the animation starts is also supported.</p>
<p>For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:</p>
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>xPosition<span class="token punctuation">,</span> <span class="token punctuation">{</span>
toValue<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
easing<span class="token punctuation">:</span> Easing<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
duration<span class="token punctuation">:</span> <span class="token number">2000</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Take a look at the <a href="/docs/0.40/animated#configuring-animations">Configuring animations</a> section of the <code>Animated</code> API reference to learn more about all the config parameters supported by the built-in animations.</p>
<h3><a class="anchor" aria-hidden="true" id="composing-animations"></a><a href="#composing-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Composing animations</h3>
<p>Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The <code>Animated</code> API provides several methods, such as <code>sequence()</code> and <code>delay()</code>, each of which take an array of animations to execute and automatically calls <code>start()</code>/<code>stop()</code> as needed.</p>
<p>For example, the following animation coasts to a stop, then it springs back while twirling in parallel:</p>
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">sequence</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token comment">// decay, then spring to start and twirl</span>
Animated<span class="token punctuation">.</span><span class="token function">decay</span><span class="token punctuation">(</span>position<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token comment">// coast to a stop</span>
velocity<span class="token punctuation">:</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>vx<span class="token punctuation">,</span> y<span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>vy <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// velocity from gesture release</span>
deceleration<span class="token punctuation">:</span> <span class="token number">0.997</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
Animated<span class="token punctuation">.</span><span class="token function">parallel</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token comment">// after decay, in parallel:</span>
Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>position<span class="token punctuation">,</span> <span class="token punctuation">{</span>
toValue<span class="token punctuation">:</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token comment">// return to start</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>twirl<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token comment">// and twirl</span>
toValue<span class="token punctuation">:</span> <span class="token number">360</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// start the sequence group</span>
</code></pre>
<p>If one animation is stopped or interrupted, then all other animations in the group are also stopped. <code>Animated.parallel</code> has a <code>stopTogether</code> option that can be set to <code>false</code> to disable this.</p>
<p>You can find a full list of composition methods in the <a href="/docs/0.40/animated#composing-animations">Composing animations</a> section of the <code>Animated</code> API reference.</p>
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-values" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Combining animated values</h3>
<p>You can <a href="/docs/0.40/animated#combining-animated-values">combine two animated values</a> via addition, multiplication, division, or modulo to make a new animated value.</p>
<p>There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Animated<span class="token punctuation">.</span>Value</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> Animated<span class="token punctuation">.</span><span class="token function">divide</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span>
Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> <span class="token punctuation">{</span>
toValue<span class="token punctuation">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="interpolation"></a><a href="#interpolation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Interpolation</h3>
<p>Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
<p>A mapping to convert a 0-1 range to a 0-100 range would be:</p>
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying <code>style</code> from the example above like so:</p>
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
translateY<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// 0 : 150, 0.5 : 75, 1 : 0</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
</code></pre>
<p><a href="/docs/0.40/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">101</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Which would map like so:</p>
<pre><code class="hljs">Input | Output
------|-------
<span class="hljs-number">-400</span>| <span class="hljs-number">450</span>
<span class="hljs-number">-300</span>| <span class="hljs-number">300</span>
<span class="hljs-number">-200</span>| <span class="hljs-number">150</span>
<span class="hljs-number">-100</span>| <span class="hljs-number">0</span>
<span class="hljs-number">-50</span>| <span class="hljs-number">0.5</span>
<span class="hljs-number">0</span>| <span class="hljs-number">1</span>
<span class="hljs-number">50</span>| <span class="hljs-number">0.5</span>
<span class="hljs-number">100</span>| <span class="hljs-number">0</span>
<span class="hljs-number">101</span>| <span class="hljs-number">0</span>
<span class="hljs-number">200</span>| <span class="hljs-number">0</span>
</code></pre>
<p><code>interpolate()</code> also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:</p>
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">360</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'0deg'</span><span class="token punctuation">,</span> <span class="token string">'360deg'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><code>interpolate()</code> also supports arbitrary easing functions, many of which are already implemented in the <a href="/docs/0.40/easing"><code>Easing</code></a> module. <code>interpolate()</code> also has configurable behavior for extrapolating the <code>outputRange</code>. You can set the extrapolation by setting the <code>extrapolate</code>, <code>extrapolateLeft</code>, or <code>extrapolateRight</code> options. The default value is <code>extend</code> but you can use <code>clamp</code> to prevent the output value from exceeding <code>outputRange</code>.</p>
<h3><a class="anchor" aria-hidden="true" id="tracking-dynamic-values"></a><a href="#tracking-dynamic-values" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Tracking dynamic values</h3>
<p>Animated values can also track other values. Set the <code>toValue</code> of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a <code>spring()</code> pinned on another animated value, or with <code>timing()</code> and a <code>duration</code> of 0 for rigid tracking. They can also be composed with interpolations:</p>
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>follower<span class="token punctuation">,</span> <span class="token punctuation">{</span> toValue<span class="token punctuation">:</span> leader <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>opacity<span class="token punctuation">,</span> <span class="token punctuation">{</span>
toValue<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>The <code>leader</code> and <code>follower</code> animated values would be implemented using <code>Animated.ValueXY()</code>. <code>ValueXY</code> is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two <code>Animated.Value</code> instances and some helper functions that call through to them, making <code>ValueXY</code> a drop-in replacement for <code>Value</code> in many cases. It allows us to track both x and y values in the example above.</p>
<h3><a class="anchor" aria-hidden="true" id="tracking-gestures"></a><a href="#tracking-gestures" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Tracking gestures</h3>
<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <a href="/docs/0.40/animated#event"><code>Animated.event</code></a>. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.</p>
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
<pre><code class="hljs css language-jsx"> onScroll<span class="token operator">=</span><span class="token punctuation">{</span>Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span>
<span class="token comment">// scrollX = e.nativeEvent.contentOffset.x</span>
<span class="token punctuation">[</span><span class="token punctuation">{</span> nativeEvent<span class="token punctuation">:</span> <span class="token punctuation">{</span>
contentOffset<span class="token punctuation">:</span> <span class="token punctuation">{</span>
x<span class="token punctuation">:</span> scrollX
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span>
</code></pre>
<p>When using <code>PanResponder</code>, you could use the following code to extract the x and y positions from <code>gestureState.dx</code> and <code>gestureState.dy</code>. We use a <code>null</code> in the first position of the array, as we are only interested in the second argument passed to the <code>PanResponder</code> handler, which is the <code>gestureState</code>.</p>
<pre><code class="hljs css language-jsx">onPanResponderMove<span class="token operator">=</span><span class="token punctuation">{</span>Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span>
<span class="token punctuation">[</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// ignore the native event</span>
<span class="token comment">// extract dx and dy from gestureState</span>
<span class="token comment">// like 'pan.x = gestureState.dx, pan.y = gestureState.dy'</span>
<span class="token punctuation">{</span>dx<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span> dy<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>y<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="responding-to-the-current-animation-value"></a><a href="#responding-to-the-current-animation-value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Responding to the current animation value</h3>
<p>You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:</p>
<ul>
<li><code>spring.stopAnimation(callback)</code> will stop the animation and invoke <code>callback</code> with the final value. This is useful when making gesture transitions.</li>
<li><code>spring.addListener(callback)</code> will invoke <code>callback</code> asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.</li>
</ul>
<p><code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
<h3><a class="anchor" aria-hidden="true" id="using-the-native-driver"></a><a href="#using-the-native-driver" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using the native driver</h3>
<p>The <code>Animated</code> API is designed to be serializable. By using the <a href="/blog/2017/02/14/using-native-driver-for-animated">native driver</a>, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
<p>To use the native driver for normal animations add <code>useNativeDriver: true</code> to the animation config when starting it.</p>
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animatedValue<span class="token punctuation">,</span> <span class="token punctuation">{</span>
toValue<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
duration<span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// <-- Add this</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.</p>
<p>The native driver also works with <code>Animated.event</code>. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.</p>
<pre><code class="hljs css language-jsx"><span class="token operator"><</span>Animated<span class="token punctuation">.</span>ScrollView <span class="token comment">// <-- Use the Animated ScrollView wrapper</span>
scrollEventThrottle<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span> <span class="token comment">// <-- Use 1 here to make sure no events are ever missed</span>
onScroll<span class="token operator">=</span><span class="token punctuation">{</span>Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span>
<span class="token punctuation">[</span>
<span class="token punctuation">{</span>
nativeEvent<span class="token punctuation">:</span> <span class="token punctuation">{</span>
contentOffset<span class="token punctuation">:</span> <span class="token punctuation">{</span> y<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animatedValue <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token comment">// <-- Add this</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token punctuation">{</span>content<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Animated.ScrollView</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/RNTester/">RNTester app</a>, then loading the Native Animated Example. You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/NativeAnimationsExample.js">source code</a> to learn how these examples were produced.</p>
<h4><a class="anchor" aria-hidden="true" id="caveats"></a><a href="#caveats" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Caveats</h4>
<p>Not everything you can do with <code>Animated</code> is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like <code>transform</code> and <code>opacity</code> will work, but flexbox and position properties will not. When using <code>Animated.event</code>, it will only work with direct events and not bubbling events. This means it does not work with <code>PanResponder</code> but does work with things like <code>ScrollView#onScroll</code>.</p>
<p>When an animation is running, it can prevent <code>VirtualizedList</code> components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use <code>isInteraction: false</code> in your animation's config to prevent this issue.</p>
<h3><a class="anchor" aria-hidden="true" id="bear-in-mind"></a><a href="#bear-in-mind" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bear in mind</h3>
<p>While using transform styles such as <code>rotateY</code>, <code>rotateX</code>, and others ensure the transform style <code>perspective</code> is in place. At this time some animations may not render on Android without it. Example below.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Animated.View</span></span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> scale<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scale <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> rotateY<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>rotateY <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> perspective<span class="token punctuation">:</span> <span class="token number">1000</span> <span class="token punctuation">}</span> <span class="token comment">// without this line this Animation will not render on Android while working fine on iOS</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="additional-examples"></a><a href="#additional-examples" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Additional examples</h3>
<p>The RNTester app has various examples of <code>Animated</code> in use:</p>
<ul>
<li><a href="https://github.com/facebook/react-native/tree/master/RNTester/js/examples/Animated/AnimatedGratuitousApp">AnimatedGratuitousApp</a></li>
<li><a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js">NativeAnimationsExample</a></li>
</ul>
<h2><a class="anchor" aria-hidden="true" id="layoutanimation-api"></a><a href="#layoutanimation-api" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>LayoutAnimation</code> API</h2>
<p><code>LayoutAnimation</code> allows you to globally configure <code>create</code> and <code>update</code> animations that will be used for all views in the next render/layout cycle. This is useful for doing flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.</p>
<p>Note that although <code>LayoutAnimation</code> is very powerful and can be quite useful, it provides much less control than <code>Animated</code> and other animation libraries, so you may need to use another approach if you can't get <code>LayoutAnimation</code> to do what you want.</p>
<p>Note that in order to get this to work on <strong>Android</strong> you need to set the following flags via <code>UIManager</code>:</p>
<pre><code class="hljs css language-jsx">UIManager<span class="token punctuation">.</span>setLayoutAnimationEnabledExperimental <span class="token operator">&&</span>
UIManager<span class="token punctuation">.</span><span class="token function">setLayoutAnimationEnabledExperimental</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> {
NativeModules,
LayoutAnimation,
Text,
TouchableOpacity,
StyleSheet,
View,
} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
<span class="hljs-keyword">const</span> { UIManager } = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(<span class="hljs-literal">true</span>);
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
state = {
<span class="hljs-attr">w</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">h</span>: <span class="hljs-number">100</span>,
};
_onPress = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
<span class="hljs-comment">// Animate the update</span>
LayoutAnimation.spring();
<span class="hljs-keyword">this</span>.setState({<span class="hljs-attr">w</span>: <span class="hljs-keyword">this</span>.state.w + <span class="hljs-number">15</span>, <span class="hljs-attr">h</span>: <span class="hljs-keyword">this</span>.state.h + <span class="hljs-number">15</span>})
}
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {<span class="hljs-attr">width:</span> <span class="hljs-attr">this.state.w</span>, <span class="hljs-attr">height:</span> <span class="hljs-attr">this.state.h</span>}]} /></span>
<span class="hljs-tag"><<span class="hljs-name">TouchableOpacity</span> <span class="hljs-attr">onPress</span>=<span class="hljs-string">{this._onPress}</span>></span>
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.button}</span>></span>
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.buttonText}</span>></span>Press me!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
<span class="hljs-tag"></<span class="hljs-name">TouchableOpacity</span>></span>
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 200,
height: 200,
backgroundColor: 'red',
},
button: {
backgroundColor: 'black',
paddingHorizontal: 20,
paddingVertical: 15,
marginTop: 15,
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
},
});
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="Example"
data-snack-description="Example usage"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%0A%20%20NativeModules%2C%0A%20%20LayoutAnimation%2C%0A%20%20Text%2C%0A%20%20TouchableOpacity%2C%0A%20%20StyleSheet%2C%0A%20%20View%2C%0A%7D%20from%20'react-native'%3B%0A%0Aconst%20%7B%20UIManager%20%7D%20%3D%20NativeModules%3B%0A%0AUIManager.setLayoutAnimationEnabledExperimental%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%0Aexport%20default%20class%20App%20extends%20React.Component%20%7B%0A%20%20state%20%3D%20%7B%0A%20%20%20%20w%3A%20100%2C%0A%20%20%20%20h%3A%20100%2C%0A%20%20%7D%3B%0A%0A%20%20_onPress%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Animate%20the%20update%0A%20%20%20%20LayoutAnimation.spring()%3B%0A%20%20%20%20this.setState(%7Bw%3A%20this.state.w%20%2B%2015%2C%20h%3A%20this.state.h%20%2B%2015%7D)%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7Bwidth%3A%20this.state.w%2C%20height%3A%20this.state.h%7D%5D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CTouchableOpacity%20onPress%3D%7Bthis._onPress%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.button%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.buttonText%7D%3EPress%20me!%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20width%3A%20200%2C%0A%20%20%20%20height%3A%20200%2C%0A%20%20%20%20backgroundColor%3A%20'red'%2C%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'black'%2C%0A%20%20%20%20paddingHorizontal%3A%2020%2C%0A%20%20%20%20paddingVertical%3A%2015%2C%0A%20%20%20%20marginTop%3A%2015%2C%0A%20%20%7D%2C%0A%20%20buttonText%3A%20%7B%0A%20%20%20%20color%3A%20'%23fff'%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
data-snack-platform="web"
data-snack-supported-platforms=ios,android,web
data-snack-preview="true"
style="
overflow: hidden;
background: #fafafa;
border: 1px solid rgba(0,0,0,.16);
border-radius: 4px;
height: 514px;
width: 100%;
"
></div></div></div><p>This example uses a preset value, you can customize the animations as you need, see <a href="https://github.com/facebook/react-native/blob/master/Libraries/LayoutAnimation/LayoutAnimation.js">LayoutAnimation.js</a> for more information.</p>
<h2><a class="anchor" aria-hidden="true" id="additional-notes"></a><a href="#additional-notes" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Additional notes</h2>
<h3><a class="anchor" aria-hidden="true" id="requestanimationframe"></a><a href="#requestanimationframe" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>requestAnimationFrame</code></h3>
<p><code>requestAnimationFrame</code> is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.</p>
<h3><a class="anchor" aria-hidden="true" id="setnativeprops"></a><a href="#setnativeprops" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>setNativeProps</code></h3>
<p>As mentioned <a href="/docs/0.40/direct-manipulation">in the Direct Manipulation section</a>, <code>setNativeProps</code> allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to <code>setState</code> and re-render the component hierarchy.</p>
<p>We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with <code>shouldComponentUpdate</code>.</p>
<p>If you find your animations with dropping frames (performing below 60 frames per second), look into using <code>setNativeProps</code> or <code>shouldComponentUpdate</code> to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread <a href="/blog/2017/02/14/using-native-driver-for-animated">with the useNativeDriver option</a>. You may also want to defer any computationally intensive work until after animations are complete, using the <a href="/docs/0.40/interactionmanager">InteractionManager</a>. You can monitor the frame rate by using the In-App Developer Menu "FPS Monitor" tool.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.40/images"><span class="arrow-prev">← </span><span>Images</span></a><a class="docs-next button" href="/docs/0.40/accessibility"><span>Accessibility</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#animated-api"><code>Animated</code> API</a><ul class="toc-headings"><li><a href="#configuring-animations">Configuring animations</a></li><li><a href="#composing-animations">Composing animations</a></li><li><a href="#combining-animated-values">Combining animated values</a></li><li><a href="#interpolation">Interpolation</a></li><li><a href="#tracking-dynamic-values">Tracking dynamic values</a></li><li><a href="#tracking-gestures">Tracking gestures</a></li><li><a href="#responding-to-the-current-animation-value">Responding to the current animation value</a></li><li><a href="#using-the-native-driver">Using the native driver</a></li><li><a href="#bear-in-mind">Bear in mind</a></li><li><a href="#additional-examples">Additional examples</a></li></ul></li><li><a href="#layoutanimation-api"><code>LayoutAnimation</code> API</a></li><li><a href="#additional-notes">Additional notes</a><ul class="toc-headings"><li><a href="#requestanimationframe"><code>requestAnimationFrame</code></a></li><li><a href="#setnativeprops"><code>setNativeProps</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["tags:0.40"],"hitsPerPage":5}
});
</script></body></html>