Summary:
The previous example only showed where to add the optional "listener" but didn't show how to make use of it.
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.
Help us understand your motivation by explaining why you decided to make this change.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
(Write your motivation here.)
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Closes https://github.com/facebook/react-native/pull/15576
Differential Revision: D5911716
Pulled By: shergin
fbshipit-source-id: 60023470d23c2cbbde47ab9aa82c7ecef73be467
Summary:
As I was working on mimicking iOS animations for my ongoing work with `react-navigation`, one task I had was to match the "push from right" animation that is common in UINavigationController.
I was able to grab the exact animation values for this animation with some LLDB magic, and found that the screen is animated using a `CASpringAnimation` with the parameters:
- stiffness: 1000
- damping: 500
- mass: 3
After spending a considerable amount of time attempting to replicate the spring created with these values by CASpringAnimation by specifying values for tension and friction in the current `Animated.spring` implementation, I was unable to come up with mathematically equivalent values that could replicate the spring _exactly_.
After doing some research, I ended up disassembling the QuartzCore framework, reading the assembly, and determined that Apple's implementation of `CASpringAnimation` does not use an integrated, numerical animation model as we do in Animated.spring, but instead solved for the closed form of the equations that govern damped harmonic oscillation (the differential equations themselves are [here](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator), and a paper describing the math to arrive at the closed-form solution to the second-order ODE that describes the DHO is [here](http://planetmath.org/sites/default/files/texpdf/39745.pdf)).
Though we can get the currently implemented RK4 integration close by tweaking some values, it is, the current model is at it's core, an approximation. It seemed that if I wanted to implement the `CASpringAnimation` behavior _exactly_, I needed to implement the analytical model (as is implemented in `CASpringAnimation`) in `Animated`.
We add three new optional parameters to `Animated.spring` (to both the JS and native implementations):
- `stiffness`, a value describing the spring's stiffness coefficient
- `damping`, a value defining how the spring's motion should be damped due to the forces of friction (technically called the _viscous damping coefficient_).
- `mass`, a value describing the mass of the object attached to the end of the simulated spring
Just like if a developer were to specify `bounciness`/`speed` and `tension`/`friction` in the same config, specifying any of these new parameters while also specifying the aforementioned config values will cause an error to be thrown.
~Defaults for `Animated.spring` across all three implementations (JS/iOS/Android) stay the same, so this is intended to be *a non-breaking change*.~
~If `stiffness`, `damping`, or `mass` are provided in the config, we switch to animating the spring with the new damped harmonic oscillator model (`DHO` as described in the code).~
We replace the old RK4 integration implementation with our new analytic implementation. Tension/friction nicely correspond directly to stiffness/damping with the mass of the spring locked at 1. This is intended to be *a non-breaking change*, but there may be very slight differences in people's springs (maybe not even noticeable to the naked eye), given the fact that this implementation is more accurate.
The DHO animation algorithm will calculate the _position_ of the spring at time _t_ explicitly and in an analytical fashion, and use this calculation to update the animation's value. It will also analytically calculate the velocity at time _t_, so as to allow animated value tracking to continue to work as expected.
Also, docs have been updated to cover the new configuration options (and also I added docs for Animated configuration options that were missing, such as `restDisplacementThreshold`, etc).
Run tests. Run "Animated Gratuitous App" and "NativeAnimation" example in RNTester.
Closes https://github.com/facebook/react-native/pull/15322
Differential Revision: D5794791
Pulled By: hramos
fbshipit-source-id: 58ed9e134a097e321c85c417a142576f6a8952f8
Summary:
Typo at line 513. "The simplest workflow for creating an animation is TO TO create an"
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.
Help us understand your motivation by explaining why you decided to make this change.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
(Write your motivation here.)
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Closes https://github.com/facebook/react-native/pull/15676
Differential Revision: D5719554
Pulled By: hramos
fbshipit-source-id: ccb220136dfbc4632c84ec58a13d95a03c864c2b
Summary:
AnimatedImplementation.js is getting pretty hard to navigate and reason about so I split it up into different modules. Also took the opportunity to run prettier on that code and do some minor const/let refactorings. This doesn't change any logic, mostly just moves code around and add proper imports / exports.
This opens the door for further cleanup and flow type improvements but want to keep this already big PR as small as possible.
Discussion points:
- Should I use haste for this? Animated is pretty much a standalone module, it still uses a few haste imports but for new modules I used commonjs imports to avoid polluting the haste global namespace too much. The new modules are all internal to Animated and should not be imported externally.
- We're using `requestAnimationFrame` from fbjs instead of the one available globally in RN and browsers is there a reason for that?
- Should we even support web in this implementation? There is a standalone repo that exist for Animated web. Is this implementation of Animated web used internally at facebook?
- Probably still related to web, we used some weird Set polyfill is that still needed?
Notes:
There is a small regression for docs where the type of some classes that are exported like AnimatedValue show up as CallExpression instead if Class.
<img width="655" alt="screen shot 2017-08-14 at 3 19 18 am" src="https://user-images.githubusercontent.com/2677334/29261820-8f243036-809f-11e7-8bf0-0fe9f93939ca.png">
**Test plan**
Tested that all Animated related examples still work in RNTester on iOS and Android.
Tested that the doc is still working
Ran unit tests
Closes https://github.com/facebook/react-native/pull/15485
Differential Revision: D5679886
Pulled By: sahrens
fbshipit-source-id: d3e9b6987ab5ff2cd20108c3b9d860c7536be8a0
Summary:
At present, there's no uniform way of determining whether you've received an Animated value node which can be attached to an animated prop.
You can attempt to use `instanceof Animated.Value`, but this fails for interpolated values. You can use `instanceof Animated.Interpolation`, but this fails for the values that are returned from the math functions (e.g., `Animated.Add`).
This commit exposes the base type from which all of these value nodes derive. As such, it is now possible to do the following:
```js
import React, { Component, PropTypes } from 'react';
import { Animated } from 'react-native';
class Widget extends Component {
static propTypes = {
progress: PropTypes.instanceOf(Animated.Node).isRequired,
}
// ...
}
```
Unnecessary for cosmetic change.
Closes https://github.com/facebook/react-native/pull/14688
Differential Revision: D5581539
Pulled By: shergin
fbshipit-source-id: 98f40e63a463241c7f91c72391c26c3b4153e4cd
Summary:
Fixes the error `Trying to update interpolation node that has not been
attached to the parent` in android which occurs when using multiple
Animated.Values along with interpolation and an animation is run before
another one that uses interpolation. On ios, no error is thrown in such
case but the animation also doesn't work as expected.
You can check the snack code here which works properly without
useNativeDriver: true. But fails on android and skips the first stage
of animation on ios.
https://snack.expo.io/HyD3zdjSZ
**Test Plan**
The animations worked properly after the __makeNative override made
the parent node native as well.
<!--
Thank you for sending the PR!
If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!
Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.
Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/15077
Differential Revision: D5449066
Pulled By: shergin
fbshipit-source-id: 2f0b6ea712a0ab12c1c545514a3686a9a6aeebed
Summary:
This fixes a `Attempt to get native tag from node not marked as "native"` error that happens because some animated values are not converted to native before calling the base class `__makeNative`. This makes sure we call the `__makeNative` method of input nodes before calling `super.__makeNative`.
**Test plan**
Tested that it fixes the issue I encountered and that native animations still work with properly in RNTester.
Closes https://github.com/facebook/react-native/pull/14435
Differential Revision: D5236092
Pulled By: javache
fbshipit-source-id: cb02616aec05f220c65b58831ca4334b58d0383b
Summary:
When using native animated we don't go through the shadow thread and use the NativeViewHierachyOptimizer so we have to make sure the views won't get optimized away. Also since we are not passing certain props because they are driven by native it is possible that the view will be marked as layout only when in fact it is not.
**Test plan**
Animated a simple view that will be collapsed with native animated and reproduce the error (it's actually just an error log in logcat now and no longer a redscreen) and checked that this fixes it.
Fixes#12975
Closes https://github.com/facebook/react-native/pull/12983
Differential Revision: D4811420
Pulled By: javache
fbshipit-source-id: f217f244baca64df2b76cbe08cce2d847c0dc985
Summary:
It's recommended to remove units for all zero length values because
these units aren't being used and therefore can be safely removed to
save bytes.
Closes https://github.com/facebook/react-native/pull/13518
Differential Revision: D4905286
Pulled By: javache
fbshipit-source-id: 4119eb8034b4b5b864228316c5a450978d4328e9
Summary:
There was some missing super.__detach calls in some Animated nodes, we rely on the base class being called to drop the node in the native implementation, not doing so will cause some nodes to leak. It also resulted in a crash when removing certain nodes because they would get updated after being detached.
**Test plan**
Reproduced the crash by unmounting a view that uses a DiffClamp node and made sure this fixes it. Also tested that other native animations still worked properly.
Fixes#11317
Closes https://github.com/facebook/react-native/pull/12910
Differential Revision: D4718188
Pulled By: javache
fbshipit-source-id: 179ec1334532152c124a9c0f447f488311925d0a
Summary:
Delay was broken with native animations on iOS. After checking what android does to handle delay, I noticed it does nothing at all since the delay is already handled when generating the animation frames. This removes all code that tried to handle delay on iOS since it is not needed and breaks it. Also updated an example to have delay in UI explorer.
Fixes#12388
**Test plan**
Tested that delay works in UIExplorer on iOS and Android.
Closes https://github.com/facebook/react-native/pull/12443
Differential Revision: D4582514
Pulled By: javache
fbshipit-source-id: dc53295e716c8476c71ccd578380962f056de2be
Summary:
Native Animated tests were removed a while back because they were failing, this restores the existing tests and reorganize / cleanup them. It also adds new ones so we have at least one test for each public API. These tests mostly assert that the native animated module is called with the proper args.
Closes https://github.com/facebook/react-native/pull/12775
Differential Revision: D4684968
Pulled By: ericvicenti
fbshipit-source-id: 4783d5edd08101cab7c0ce2eec4f3ccd0fbc1d27
Summary:
Need to make sure `detach` happens on the old `scrollableNode` before it's unmounted and that `attach` happens on the new `scrollableNode` after it's mounted. This should also be more performant because the detach step no longer requires iterating through all the props, most of which are not animated, and we filter out unneeded updates if props or ref haven't changed.
= Test Plan =
Hook up native onscroll events in `FlatListExample` and toggle "debug" - before, the events would stop working because they would try to attach to the old unmounted node, but with this diff it keeps working as expected.
Reviewed By: fkgozali
Differential Revision: D4687186
fbshipit-source-id: 313a7964d4614190308490a51fc4f56abb6690f8
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
Summary:
Re-applying the diff that was reverted in D4659669 / b87f4abf78 because of some crashes with fixes from D4659708 merged in.
---
Fixes a bug that happens when trying to use ScrollView with sticky headers and native `Animated.event` with `onScroll`. Made a few changes to the ListViewPaging UIExplorer example to repro https://gist.github.com/janicduplessis/17e2fcd99c6ea49ced2954d881011b09.
What happens is we need to be able to add multiple events to the same prop + viewTag pair. To do that I simple changed the data structure to `Map<prop+viewTag, List<AnimatedEventDriver>>` and try to optimize for the case where there is only one item in the list since it will be the case 99% of the time.
**Test plan**
Tested by reproducing the bug with the above gist and made sure it was fixed after applying this diff.
Closes https://github.com/facebook/react-native/pull/12697
Reviewed By: fkgozali
Differential Revision: D4661105
Pulled By: sahrens
fbshipit-source-id: c719dc85f45c1a142ef5b9ebfe0a82ae8ec66497
Summary:
For some reason the parser doesn't support that syntax. It fails with:
```
Cannot parse file ../Libraries/Animated/src/AnimatedImplementation.js Error: parseSource returned falsy
at parseAPIInferred (/home/ubuntu/react-native/website/server/extractDocs.js:343:13)
```
Reviewed By: sahrens
Differential Revision: D4669961
fbshipit-source-id: 3536c94b8f385f5810c47544c4a72c8c785bf0e5
Summary:
Fixes a bug that happens when trying to use ScrollView with sticky headers and native `Animated.event` with `onScroll`. Made a few changes to the ListViewPaging UIExplorer example to repro https://gist.github.com/janicduplessis/17e2fcd99c6ea49ced2954d881011b09.
What happens is we need to be able to add multiple events to the same prop + viewTag pair. To do that I simple changed the data structure to `Map<prop+viewTag, List<AnimatedEventDriver>>` and try to optimize for the case where there is only one item in the list since it will be the case 99% of the time.
**Test plan**
Tested by reproducing the bug with the above gist and made sure it was fixed after applying this diff.
Closes https://github.com/facebook/react-native/pull/12697
Differential Revision: D4656347
Pulled By: sahrens
fbshipit-source-id: b5c36ba796f478e56028c7a95bc0f86bc54cb2ce
Summary:
This re-implements sticky headers in JS to make it work on Android.
The only change that was needed was to expose a way to attach a an animated value to an event manually since we can't use the Animated wrapper and `Animated.event` to do it for us because this is implemented directly in the `ScrollView` component. Simply exposed `attachNativeEvent` that takes a ref, event name and event object mapping. This is what is used by `Animated.event`.
TODO:
- Need to check why momentum scrolling isn't triggering scroll events properly on Android.
- Remove native iOS implementation
- cleanup / fix flow
**Test plan**
Test the example list in UIExplorer, test the ListViewPaging example.
Closes https://github.com/facebook/react-native/pull/11315
Differential Revision: D4450278
Pulled By: sahrens
fbshipit-source-id: fec8da2cffce9807d74f8e518ebdefeb6a708667
Summary: Adding providesModule annotations to files that don't have a `providesModule` annotation but are in directories that packager crawls.
Reviewed By: cpojer
Differential Revision: D4612455
fbshipit-source-id: b23f0d6bbe2d26f480e93b56b67c6c8b1075e9f7
Summary:
After taking a look at the existing animation docs, I found that most of the documentation on using `Animated` was spread out throughout the Animations guide and the `Animated` API reference, without any particular structure in place.
This PR aims to clean up the API reference, focusing on documenting all the provided methods exhaustively, and deferring to the Animations guide for long form examples and supporting content.
The `Easing` module is referred to at various points in the API reference, so I decided to clean up this doc as well. easings.net provides some handy visualizations that should make it easier for the reader to understand what sort of easing curve each method provides.
The site was built locally, and I verified all three documents render correctly.
Closes https://github.com/facebook/react-native/pull/12410
Differential Revision: D4581314
Pulled By: hramos
fbshipit-source-id: 27c0bce2afac8f084311b9d6113a2641133b42e5
Summary:
We used to not send events to JS when there was a native Animated.event but we do now so we can easily enable the listener property.
**Test plan**
Tested that the listener gets called when using native Animated.event.
Closes https://github.com/facebook/react-native/pull/12323
Differential Revision: D4556407
fbshipit-source-id: 0b17f331a352d03a47f1611c667433fd5a58696c
Summary:
Flow was complaining about an interpolated value I created in a class constructor, and I realized there was no way to properly import the `AnimatedInterpolation` class type. This allows for using `Animated.Interpolation` as a type to match `Animated.Value`
Closes https://github.com/facebook/react-native/pull/9360
Differential Revision: D4538770
Pulled By: lacker
fbshipit-source-id: 49da2374f2d73ad3d667dafaa6338b77b9aec8a8
Summary:
findNodeHandle is considered an internal module. The one to use is ReactNative.findNodeHandle. We need to rely on this because we will have two different renderers and we need the renderers to inject themselves with findNodeHandle before it is used.
I use ReactNative.findNodeHandle from inside the module because I think this leads to a cycle somewhere or might not play well with inline require otherwise.
There is also one in UIManager but that is definitely a cycle so I'm going to try to avoid that one.
Reviewed By: spicyj, bvaughn
Differential Revision: D4533911
fbshipit-source-id: f771641ea5c5366ccbaff68c42202fa6f8c18cb3
Summary:
The `extractOffset` method is previously implemented on `Animated.Value`, along with `setOffset` and `flattenOffset`. Both of the latter methods are proxied on `Animated.ValueXY`, but `extractOffset` is not. This commit adds the missing method.
When creating draggable elements in XY space, in order to compensate for previous gestures' offsets, we currently need to do something like the following at the beginning or end of each gesture:
```
xy.setOffset(xy.__getValue());
xy.setValue({x: 0, y: 0});
```
After this commit, the API is equivalent to using a plain `Animated.Value`:
```
xy.extractOffset();
```
Closes https://github.com/facebook/react-native/pull/12193
Differential Revision: D4508717
Pulled By: mkonicek
fbshipit-source-id: 0976cf1ab68538e59023ffaa2539eb62779ad874
Summary:
In theory, we should be able to animate any non-layout property, including custom ones. While there is still work to be done on the native side to fully enable this, we should start by dropping the prop whitelist.
Closes https://github.com/facebook/react-native/pull/10658
Differential Revision: D4379031
Pulled By: ericvicenti
fbshipit-source-id: fe9c30ea101e93a8b260d7d09a909fafbb82fee6
Summary:
> Explain the **motivation** for making this change. What existing problem does the pull request solve?
`AnimatedValueX` has `removeAllListeners()` which is a convenient way to do cleanup when components unmount, but `AnimatedValueXY` was missing a similar method which doesn't really make sense. This change makes the two classes more similar, less confusing and more convenient.
Closes https://github.com/facebook/react-native/pull/11783
Differential Revision: D4397188
fbshipit-source-id: d10a0c9c7e0a83af015ec04f6facf965d95ea984
Summary:
Add link with more details of how to resolve warnedMissingNativeAnimated warning.
Closes https://github.com/facebook/react-native/pull/11224
Differential Revision: D4268352
fbshipit-source-id: 679574570aea2f4ec7083247d5b6dcba378e8560
Chris Geirman
Adam Miskiewicz
Miguel Jimenez Esun
Spencer Ahrens
Caleb Meredith
Alex
Rafael Oleza
Janic Duplessis
Brian Vaughn
James Reggio
Ranjan Shrestha
Belal Sejouk
Héctor Ramos
James Burnett
Janic Duplessis
Reem Helou
Emily Janzer
Andres Suarez
Sue Ann Ioanis
mlanter
Edwin
Martin Konicek
Jiajie Zhu
Andrew Clark
Bhuwan Khattar
Hector Ramos
Connor McEwen
Sebastian Markbage
Jani Eväkallio
Ryan Gomba
Gabe Levi
Seph Soliman
Sagiv Ofek
