Summary: There are several cases for creating an animated implementation of FlatList or SectionList (e.g. passing Animated.Event for onScroll with useNativeDriver enabled, see FlatListExample or SectionListExample), so we might as well add them to the exports.
Reviewed By: sahrens
Differential Revision: D8886446
fbshipit-source-id: 4b207500ea4d8d10de8c1b2639a5f492bc62e560
Summary:
`forkEvent` is generally used to intercept an existing listener and add a new js listener to it, considering the original listener can be null/js/Animated.event(). I added tests to ensure the 3 cases of the implementation are all covered.
Pull Request resolved: https://github.com/facebook/react-native/pull/20111
Differential Revision: D8817500
Pulled By: hramos
fbshipit-source-id: 1a20b6f73e2d47bbefccd31378764909a45e89bb
Summary:
Bump Prettier to use version 1.13.4
All code changes are caused by running Prettier and should only affect files that have an `format` header.
All other changes caused by yarn.
Reviewed By: ryanmce
Differential Revision: D8251255
fbshipit-source-id: 0b4445c35f1269d72730f2000002a27c1bc35914
Summary: In the upcoming Jest version `genMockFunction` and `genMockFn` are deprecated, so we need to kill them.
Reviewed By: rafeca
Differential Revision: D8107155
fbshipit-source-id: 4f46ab58e6e34224eb95e9355385da44f005ea94
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.
find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.
Reviewed By: TheSavior, yungsters
Differential Revision: D7007050
fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
Summary:
Stateless functional components don't support refs and we need that for the component to work, it used to crash with this error message: `undefined is not an object (evaluating 'this._component.getScrollableNode')`. This makes it clear what the issue is.
Fixes some of the errors in #10635, not sure if it fixes all the cases described in the issue though.
**Test plan**
Tested that passing a component with createClass or extends Component works but passing a function causes an error.
[GENERAL] [ENHANCEMENT] [Animated] - Verify that the component passed to createAnimatedComponent is not functional
Closes https://github.com/facebook/react-native/pull/15019
Differential Revision: D6988096
Pulled By: sahrens
fbshipit-source-id: ec0ffa763245e786f44b4a1d56c0738876c25782
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:
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:
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:
* 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:
This adds support for `Animated.event` driven natively. This is WIP and would like feedback on how this is implemented.
At the moment, it works by providing a mapping between a view tag, an event name, an event path and an animated value when a view has a prop with a `AnimatedEvent` object. Then we can hook into `EventDispatcher`, check for events that target our view + event name and update the animated value using the event path.
For now it works with the onScroll event but it should be generic enough to work with anything.
Closes https://github.com/facebook/react-native/pull/9253
Differential Revision: D3759844
Pulled By: foghina
fbshipit-source-id: 86989c705847955bd65e6cf5a7d572ec7ccd3eb4
Summary:
This adds a new type of node that clamps an animated value between 2 values with a special twist, it is based on the difference between the previous value so getting far from a bound doesn't matter and as soon as we start getting closer again the value will start changing. The main use case for this node is to create a collapsible navbar when scrolling a scrollview. This is a pretty in apps (fb, youtube, twitter, all use something like this).
It updates using the following: `value = clamp(value + diff, min, max)` where `diff` is the difference with the previous value.
This gives the following output for parameters min = 0, max = 30:
```
in out
0 0
15 15
30 30
100 30
90 20
30 0
50 20
```
One issue I see is that this node is pretty specific to this use case but I can't see another simple way to do this with Animated that can also be offloaded to native easily. I'd be glad to discuss other solutions if some
Closes https://github.com/facebook/react-native/pull/9419
Differential Revision: D3753920
fbshipit-source-id: 40a749d38fd003aab2d3cb5cb8f0535e467d8a2a
Summary:
This should not happen again:
Summary of all failing tests
FAIL Libraries/Animated/src/__tests__/bezier-test.js (0.259s)
● bezier › symetric curves › it should have a central value y~=0.5 at x=0.5
- Error: expected '0.5015953397493733' to be close to '0.5' with 3-digit precision
at assertClose (Libraries/Animated/src/__tests__/bezier-test.js:9:11)
at Libraries/Animated/src/__tests__/bezier-test.js:84:1
at Libraries/Animated/src/__tests__/bezier-test.js:28:22
at Object.<anonymous> (Libraries/Animated/src/__tests__/bezier-test.js:81:11)
Closes https://github.com/facebook/react-native/pull/9316
Differential Revision: D3690223
Pulled By: davidaurelio
fbshipit-source-id: 3ee0a283206680203a8b685d4ee5a430ef821704
Summary:
- kill -9 SERVER_PID does not work for packager currently because it is started as daemon.
- And lego tests just hang until they are killed e.g. intern/sandcastle/1952254070/187417721/
- fixed bezier test because it annoyed me with random breaks because of precision
Reviewed By: davidaurelio
Differential Revision: D3528588
fbshipit-source-id: 87e5b4330fa69bc9a8a7f48e2250f3c2239f2b35
Summary:
* Next version of Jest doesn't allow non test files in __tests__ folders.
* I'm trying to switch all tests off of jsdom on react-native. This should save 500ms of time when running a single test because jsdom is slow to load and react-native is also not supposed to run in a DOM environment, so let's not pretend we are providing the DOM in tests.
* Make the bridge config configurable so that when we disable automocking and we reset the registry we can redefine the value.
Oh also, stop using lodash in Server.js. First off, lodash 3 doesn't work in Jest's node env because it does some crazy stuff, second because we don't need to load all of lodash for debounce.
Reviewed By: davidaurelio
Differential Revision: D3502886
fbshipit-source-id: 1da1cfba9ed12264d81945b702e7a429d5f84424
Summary:
Currently on iOS animations are being performed on the JS thread. This ports animations over to the native thread and performs them natively. A lot of this work has already been done on Android, but this PR enables a few animation nodes that Android doesn't yet support such as Transform, Multiplication, and Addition nodes.
Also there is a demo of the native animations added to the UIExplorer app.
Closes https://github.com/facebook/react-native/pull/7884
Reviewed By: javache
Differential Revision: D3409179
Pulled By: nicklockwood
fbshipit-source-id: ef2d8840032e0c32f49e4a16ba86d448662e1751
Summary:
This fixes an issue where animations for values near zero could end up formatted
with exponents (e.g. `1.452e-10`), which is not valid for an `rgba` color spec.
This commit arbitrarily rounds it to the nearest thousandth to prevent this type
of formatting while still maintaining high-enough resolution in the alpha channel.
One way this could bubble up to the user is as PropType validation failures:
```
Failed propType: Invalid prop `backgroundColor` supplied to `RCTView`: rgba(0, 0, 0, 9.838983123336224e-7)
```
Closes https://github.com/facebook/react-native/pull/7597
Differential Revision: D3310941
Pulled By: vjeux
fbshipit-source-id: 0c95facaef5b69c021662af9fb6f268d890ecc3e
Summary:
This change fixes an issue with calling `setValue` for natively driven nodes. As of now an attempt to call this method from JS would trigger an error "Attempting to run JS driven animation on animated". That is because for natively animated nodes we don't allow for `setNativeProps` to be executed and method `_flush` is now responsible for triggering that call. To fix the issue we add extra flag to `_updateValue` method that indicates if we should be "flushing" updated values using `setNativeProps` and we pass an appropriate value depending on the status of the node (native/non-native). Note that in animation callback we always pass `true` - that is because natively driven animations will never call into that callback.
**Test Plan**
Run JS tests: `npm test Libraries/Animated/src/__tests__/AnimatedNative-test.js`
Closes https://github.com/facebook/react-native/pull/7138
Differential Revision: D3257696
fb-gh-sync-id: 13ec26bc36b56b3208f4279a95532bbe60551087
fbshipit-source-id: 13ec26bc36b56b3208f4279a95532bbe60551087
Summary:This change adds native animated support for Animated.interpolate
Animated.interpolate allows for defining nodes that outputs an interpolated value of their input node based on the interpolation node configuration. For now native animated implementation only supports a linear interpolation for a given input and output ranges (ranges can consists of multiple segments). Native interpolation node is compatible with the JS implementation with the exception that not all attributes that can be used in JS are supported. Before we migrate interpolation node from JS->native we verify that only supported props are used.
**Test Plan**
Run JS tests: `npm test Libraries/Animated/src/__tests__/AnimatedNative-test.js`
Run java tests: `buck test ReactAndroid/src/test/java/com/facebook/react/animated`
Closes https://github.com/facebook/react-native/pull/7141
Differential Revision: D3216546
fb-gh-sync-id: 29876e33956615c6370ca4d332abe048f8dba5b8
fbshipit-source-id: 29876e33956615c6370ca4d332abe048f8dba5b8
Summary:This change extends animated native module API with `stopAnimation` method that is responsible for interrupting actively running animation as a reslut of a JS call. In order for the `stopAnimation` to understand `animationId` argument I also had to add `animationId` to `startAnimation` method. As JS thread runs in parallel to the thread which executes the animation there is a chance that JS may call `stopAnimation` after the animation has finished. Because of that we are not doing any checks on the `animationId` parameter passed to `stopAnimation` in native and if the animation does not exists in the registry we ignore that call.
**Test Plan**
Run JS tests: `npm test Libraries/Animated/src/__tests__/AnimatedNative-test.js`
Run java tests: `buck test ReactAndroid/src/test/java/com/facebook/react/animated`
Closes https://github.com/facebook/react-native/pull/7058
Differential Revision: D3211906
fb-gh-sync-id: 3761509651de36a550b00d33e2a631c379d3900f
fbshipit-source-id: 3761509651de36a550b00d33e2a631c379d3900f
Summary:This change adds native animated support for Animated.multiply nodes.
Animated.multiply allows for defining nodes that would output a product of values of the input nodes.
**Test Plan**
Run JS tests: `npm test Libraries/Animated/src/__tests__/AnimatedNative-test.js`
Run java tests: `buck test ReactAndroid/src/test/java/com/facebook/react/animated`
Closes https://github.com/facebook/react-native/pull/7071
Differential Revision: D3197663
fb-gh-sync-id: 35f64244a2482c487a81e5e7cd08f3c0e56d9b78
fbshipit-source-id: 35f64244a2482c487a81e5e7cd08f3c0e56d9b78
Summary:This change adds suport native animated support for Animated.add.
Animated.add lets you declare node that outputs a sum of it input nodes.
**Test Plan**
Play with the following playground app: https://gist.github.com/39de37faf07480fcd7d1
Run JS tests: `npm test Libraries/Animated/src/__tests__/AnimatedNative-test.js`
Run java tests: `buck test ReactAndroid/src/test/java/com/facebook/react/animated`
Closes https://github.com/facebook/react-native/pull/6641
Differential Revision: D3195963
fb-gh-sync-id: bb1e1a36821a0e071ad0e7d0fa99ce0d6b088b0a
fbshipit-source-id: bb1e1a36821a0e071ad0e7d0fa99ce0d6b088b0a
Summary:The CSS spec doesn't allow for decimal values inside of rgb colors, however the RN implementation does, so there was a disconnect here.
This tests to see if the output range is an rgb color, and if so, rounds the first 3 interpolated components (but not the 4th, since that would be opacity and allows for a decimal).
cc vjeux
Closes https://github.com/facebook/react-native/pull/6984
Differential Revision: D3186473
fb-gh-sync-id: a320bf2311764e084386700bf8c8a42ab2a347eb
fbshipit-source-id: a320bf2311764e084386700bf8c8a42ab2a347eb
Summary:JEST tests for `useNativeDriver` option in AnimatedImplementation.js. Adding this to protect from potential changes in Animated.js that might break the interaction with the NativeAnimatedModule. Most of those tests just verify that a valid method of NativeAnimatedModule gets called as a result of animated nodes management operations.
**Test plan (required)**
Run `npm test Libraries/Animated/src/__tests__/AnimatedNative-test.js`
See 9 tests passed
Closes https://github.com/facebook/react-native/pull/6821
Differential Revision: D3149876
fb-gh-sync-id: 8911c5b0f96074115a62153c05162ff24ee2caa1
fbshipit-source-id: 8911c5b0f96074115a62153c05162ff24ee2caa1
Summary:fast & accurate implementation
See https://github.com/gre/bezier-easing
the library is embedded in React Native
fixes#6207 & to follow #6340 (or to replace it)
cc vjeux
tests
---
[the lib tests](https://github.com/gre/bezier-easing/blob/master/test/test.js) ensure the library is accurate.
It is tested that the library have a precision better than ±0.000001 .
performance
---
On my macbook pro, [the lib benchmark](https://github.com/gre/bezier-easing/blob/master/benchmark.js) have:
```
BezierEasing: instanciation x 1,043,725 ops/sec ±1.46% (82 runs sampled)
BezierEasing: call x 7,866,642 ops/sec ±0.93% (85 runs sampled)
BezierEasing: instanciation + call x 803,051 ops/sec ±1.58% (74 runs sampled)
```
Closes https://github.com/facebook/react-native/pull/6433
Differential Revision: D3045854
Pulled By: vjeux
fb-gh-sync-id: b3c5dba19195a6719967b4fdc8ef940cc067b1f4
shipit-source-id: b3c5dba19195a6719967b4fdc8ef940cc067b1f4
