Animated
Animations are an important part of modern UX, and the Animated library is designed to make them fluid, powerful, and easy to build and maintain.
The simplest workflow is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as Animated.timing, or by hooking into gestures like panning or scrolling via Animated.event. Animated.Value can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:
Animated
Animations are an important part of modern UX, and the Animated library is designed to make them fluid, powerful, and painless to build and maintain.
The most basic workflow is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as Animated.timing, or by hooking into gestures like panning or scrolling via Animated.event. Animated.Value can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:
class FadeInView extends React.Component {
constructor(props) {
super(props);
@@ -96,12 +96,12 @@
}
}
Note that only animatable components can be animated. View, Text, and Image are already provided, and you can create custom ones with createAnimatedComponent. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
Note that only animatable components can be animated. View, Text, and Image are already provided, and you can create custom ones with createAnimatedComponent. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
A single Animated.Value can drive any number of properties, and 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.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to
-
-
- This can easily be done by modifying
stylein the example above like so:
+ - This can be done by modifying
stylein the example above like so:
style={{
opacity: this.state.fadeAnim, // Binds directly
@@ -113,7 +113,7 @@
}],
}}>
Animations can also be combined in complex ways using composition functions such as sequence and parallel, and can also be chained together simply by setting the toValue of one animation to be another Animated.Value.
Animations can also be combined in complex ways using composition functions such as sequence and parallel, and can also be chained together by setting the toValue of one animation to be another Animated.Value.
Animated.ValueXY is handy for 2D animations, like panning, and there are other helpful additions like setOffset and getLayout to aid with typical interaction patterns, like drag-and-drop.
You can see more example usage in AnimationExample.js, the Gratuitous Animation App, and Animations documentation guide.
Note that Animated 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. Checkout Animated.Value.addListener as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
Animated
Animations are an important part of modern UX, and the Animated library is designed to make them fluid, powerful, and easy to build and maintain.
The simplest workflow is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as Animated.timing, or by hooking into gestures like panning or scrolling via Animated.event. Animated.Value can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:
Animated
Animations are an important part of modern UX, and the Animated library is designed to make them fluid, powerful, and painless to build and maintain.
The most basic workflow is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as Animated.timing, or by hooking into gestures like panning or scrolling via Animated.event. Animated.Value can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:
class FadeInView extends React.Component {
constructor(props) {
super(props);
@@ -96,12 +96,12 @@
}
}
Note that only animatable components can be animated. View, Text, and Image are already provided, and you can create custom ones with createAnimatedComponent. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
Note that only animatable components can be animated. View, Text, and Image are already provided, and you can create custom ones with createAnimatedComponent. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
A single Animated.Value can drive any number of properties, and 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.
For example, you may want to think about your Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to
-
-
- This can easily be done by modifying
stylein the example above like so:
+ - This can be done by modifying
stylein the example above like so:
style={{
opacity: this.state.fadeAnim, // Binds directly
@@ -113,7 +113,7 @@
}],
}}>
Animations can also be combined in complex ways using composition functions such as sequence and parallel, and can also be chained together simply by setting the toValue of one animation to be another Animated.Value.
Animations can also be combined in complex ways using composition functions such as sequence and parallel, and can also be chained together by setting the toValue of one animation to be another Animated.Value.
Animated.ValueXY is handy for 2D animations, like panning, and there are other helpful additions like setOffset and getLayout to aid with typical interaction patterns, like drag-and-drop.
You can see more example usage in AnimationExample.js, the Gratuitous Animation App, and Animations documentation guide.
Note that Animated 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. Checkout Animated.Value.addListener as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
position
-position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.
position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.
If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.
+If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.
See https://github.com/facebook/css-layout for more details on how position differs between React Native and CSS.
position
-position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.
position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.
If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.
+If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.
See https://github.com/facebook/css-layout for more details on how position differs between React Native and CSS.
interactivePopGestureEnabled
-Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
+Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the interactivePopGestureEnabled prop, you can never restore the default behavior.
interactivePopGestureEnabled
-Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
+Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the interactivePopGestureEnabled prop, you can never restore the default behavior.
defaultValue
-Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
| Type | Required |
|---|
value
-The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
| Type | Required |
|---|
defaultValue
-Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
| Type | Required |
|---|
value
-The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
| Type | Required |
|---|
position
-position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.
position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.
If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.
+If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.
See https://github.com/facebook/css-layout for more details on how position differs between React Native and CSS.
position
-position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.
position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.
If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.
+If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.
See https://github.com/facebook/css-layout for more details on how position differs between React Native and CSS.
interactivePopGestureEnabled
-Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
+Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the interactivePopGestureEnabled prop, you can never restore the default behavior.
interactivePopGestureEnabled
-Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
+Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the interactivePopGestureEnabled prop, you can never restore the default behavior.
defaultValue
-Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
| Type | Required |
|---|
value
-The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
| Type | Required |
|---|
defaultValue
-Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
| Type | Required |
|---|
value
-The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
| Type | Required |
|---|
interactivePopGestureEnabled
-Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
+Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the interactivePopGestureEnabled prop, you can never restore the default behavior.
interactivePopGestureEnabled
-Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
+Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the interactivePopGestureEnabled prop, you can never restore the default behavior.