Animated
The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
The simplest workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
The most basic workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated.timing(
// Animate value over time
this.state.fadeAnim, // The value to drive
@@ -90,7 +90,7 @@
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay() starts with an initial velocity and gradually slows to a stop.Animated.spring() provides a simple spring physics model.Animated.spring() provides a basic spring physics model.Animated.timing() animates a value over time using easing functions.
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
@@ -100,7 +100,7 @@
By using the native driver, 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.
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
Animatable components
-Only animatable components can be animated. 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.
+Only animatable components can be animated. These specific 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.
createAnimatedComponent() can be used to make a component animatable.
@@ -119,7 +119,7 @@
Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.Animated.stagger() starts animations in order and in parallel, but with successive delays.Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
+Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
Combining animated values
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
@@ -214,14 +214,14 @@
Animates a value according to an analytical spring model based on damped harmonic oscillation. Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.
Config is an object that may have the following options.
Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:
-The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
+The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
friction: Controls "bounciness"/overshoot. Default 7.tension: Controls speed. Default 40.speed: Controls speed of the animation. Default 12.bounciness: Controls bounciness. Default 8.
-Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.
+Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation class.
stiffness: The spring stiffness coefficient. Default 100.damping: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.Animated · React Native
Animated
The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
The simplest workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
The most basic workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated.timing(
// Animate value over time
this.state.fadeAnim, // The value to drive
@@ -90,7 +90,7 @@
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay() starts with an initial velocity and gradually slows to a stop.Animated.spring() provides a simple spring physics model.Animated.spring() provides a basic spring physics model.Animated.timing() animates a value over time using easing functions.
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
@@ -100,7 +100,7 @@
By using the native driver, 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.
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
Animatable components
-Only animatable components can be animated. 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.
+Only animatable components can be animated. These specific 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.
createAnimatedComponent() can be used to make a component animatable.
@@ -119,7 +119,7 @@
Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.Animated.stagger() starts animations in order and in parallel, but with successive delays.Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
+Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
Combining animated values
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
@@ -214,14 +214,14 @@
Animates a value according to an analytical spring model based on damped harmonic oscillation. Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.
Config is an object that may have the following options.
Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:
-The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
+The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
friction: Controls "bounciness"/overshoot. Default 7.tension: Controls speed. Default 40.speed: Controls speed of the animation. Default 12.bounciness: Controls bounciness. Default 8.
-Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.
+Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation class.
stiffness: The spring stiffness coefficient. Default 100.damping: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.
addEventListener(type, handler);
Add a handler to AppState changes by listening to the change event type and providing the handler
-TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and just use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
+TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
removeEventListener()
removeEventListener(type, handler);
diff --git a/docs/0.55/appstate/index.html b/docs/0.55/appstate/index.html
index e519579b3fb..c2a26285870 100644
--- a/docs/0.55/appstate/index.html
+++ b/docs/0.55/appstate/index.html
@@ -133,7 +133,7 @@
addEventListener(type, handler);
Add a handler to AppState changes by listening to the change event type and providing the handler
-TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and just use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
+TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and use addListener and listener.remove() directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
removeEventListener()
removeEventListener(type, handler);
diff --git a/docs/0.55/easing.html b/docs/0.55/easing.html
index 41dc9f84d68..466078eb39f 100644
--- a/docs/0.55/easing.html
+++ b/docs/0.55/easing.html
@@ -73,10 +73,10 @@
Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a simple animation where the object goes slightly back before moving forwardback provides an animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a simple inertial animationelastic provides a simple spring interactionease provides an inertial animationelastic provides a basic spring interaction
Standard functions
Three standard easing functions are provided:
@@ -142,7 +142,7 @@
ease()
static ease(t)
-A simple inertial interaction, similar to an object slowly accelerating to speed.
+A basic inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -184,19 +184,19 @@
elastic()
static elastic(bounciness)
-A simple elastic interaction, similar to a spring oscillating back and forth.
+A basic elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create an effect where the object animates back slightly as the animation starts.
bounce()
static bounce(t)
-Provides a simple bouncing effect.
+Provides a bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.55/easing/index.html b/docs/0.55/easing/index.html
index 41dc9f84d68..466078eb39f 100644
--- a/docs/0.55/easing/index.html
+++ b/docs/0.55/easing/index.html
@@ -73,10 +73,10 @@
Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a simple animation where the object goes slightly back before moving forwardback provides an animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a simple inertial animationelastic provides a simple spring interactionease provides an inertial animationelastic provides a basic spring interaction
Standard functions
Three standard easing functions are provided:
@@ -142,7 +142,7 @@
ease()
static ease(t)
-A simple inertial interaction, similar to an object slowly accelerating to speed.
+A basic inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -184,19 +184,19 @@
elastic()
static elastic(bounciness)
-A simple elastic interaction, similar to a spring oscillating back and forth.
+A basic elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create an effect where the object animates back slightly as the animation starts.
bounce()
static bounce(t)
-Provides a simple bouncing effect.
+Provides a bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.55/flatlist.html b/docs/0.55/flatlist.html
index 5f15ec055e7..cd9350e1ae1 100644
--- a/docs/0.55/flatlist.html
+++ b/docs/0.55/flatlist.html
@@ -1,4 +1,4 @@
-FlatList · React Native
FlatList
A performant interface for rendering simple, flat lists, supporting the most handy features:
+FlatList
A performant interface for rendering painless flat lists, supporting the most handy features:
- Fully cross-platform.
- Optional horizontal mode. @@ -231,7 +231,7 @@ class MultiSelectList extends React.PureComponent {
- Fully cross-platform.
- Optional horizontal mode. @@ -231,7 +231,7 @@ class MultiSelectList extends React.PureComponent {
- Scroll loading.
- Scroll loading.
backprovides a simple animation where the object goes slightly back before moving forward
+backprovides an animation where the object goes slightly back before moving forwardbounceprovides a bouncing animation
-easeprovides a simple inertial animation
-elasticprovides a simple spring interaction
+easeprovides an inertial animation
+elasticprovides a basic spring interactionbackprovides a simple animation where the object goes slightly back before moving forward
+backprovides an animation where the object goes slightly back before moving forwardbounceprovides a bouncing animation
-easeprovides a simple inertial animation
-elasticprovides a simple spring interaction
+easeprovides an inertial animation
+elasticprovides a basic spring interactionbackprovides a simple animation where the object goes slightly back before moving forward
+backprovides an animation where the object goes slightly back before moving forwardbounceprovides a bouncing animation
-easeprovides a simple inertial animation
-elasticprovides a simple spring interaction
+easeprovides an inertial animation
+elasticprovides a basic spring interactionbackprovides a simple animation where the object goes slightly back before moving forward
+backprovides an animation where the object goes slightly back before moving forwardbounceprovides a bouncing animation
-easeprovides a simple inertial animation
-elasticprovides a simple spring interaction
+easeprovides an inertial animation
+elasticprovides a basic spring interactionbackprovides a simple animation where the object goes slightly back before moving forward
+backprovides an animation where the object goes slightly back before moving forwardbounceprovides a bouncing animation
-easeprovides a simple inertial animation
-elasticprovides a simple spring interaction
+easeprovides an inertial animation
+elasticprovides a basic spring interactionbackprovides a simple animation where the object goes slightly back before moving forward
+backprovides an animation where the object goes slightly back before moving forwardbounceprovides a bouncing animation
-easeprovides a simple inertial animation
-elasticprovides a simple spring interaction
+easeprovides an inertial animation
+elasticprovides a basic spring interactionbackprovides a simple animation where the object goes slightly back before moving forward
+backprovides an animation where the object goes slightly back before moving forwardbounceprovides a bouncing animation
-easeprovides a simple inertial animation
-elasticprovides a simple spring interaction
+easeprovides an inertial animation
+elasticprovides a basic spring interactionbackprovides a simple animation where the object goes slightly back before moving forward
+backprovides an animation where the object goes slightly back before moving forwardbounceprovides a bouncing animation
-easeprovides a simple inertial animation
-elasticprovides a simple spring interaction
+easeprovides an inertial animation
+elasticprovides a basic spring interaction
data
-For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
For simplicity, data is only a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
| Type | Required |
|---|
| 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/yoga 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/yoga for more details on how position differs between React Native and CSS.
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 basic 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 only 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 basic 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 only setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
| Type | Required |
|---|
removeClippedSubviews
-This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
This is a unique performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
| Type | Required |
|---|
| Type | Required | Platform |
|---|
removeClippedSubviews
-This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
This is a unique performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
| Type | Required |
|---|
| Type | Required | Platform |
|---|
removeClippedSubviews
-This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
This is a unique performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
| Type | Required |
|---|
| Type | Required | Platform |
|---|
removeClippedSubviews
-This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
This is a unique performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
| Type | Required |
|---|
| Type | Required | Platform |
|---|