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
Summary:
**Problem:**
As I was trying to document what color formats we supported, I realized that our current implementation based on the open source project tinycolor supported some crazy things. A few examples that were all valid:
```
tinycolor('abc')
tinycolor(' #abc ')
tinycolor('##abc')
tinycolor('rgb 255 0 0')
tinycolor('RGBA(0, 1, 2)')
tinycolor('rgb (0, 1, 2)')
tinycolor('hsv(0, 1, 2)')
tinycolor({r: 10, g: 10, b: 10})
tinycolor('hsl(1%, 2, 3)')
tinycolor('rgb(1.0, 2.0, 3.0)')
tinycolor('rgb(1%, 2%, 3%)')
```
The integrations of tinycolor were also really bad. processColor added "support" for pure numbers and an array of colors!?? ColorPropTypes did some crazy trim().toString() and repeated a bad error message twice.
**Solution:**
While iteratively cleaning the file, I eventually ended up reimplementing it entierly. Major changes are:
- The API is now dead simple: returns null if it doesn't parse or returns the int32 representation of the color
- Stricter parsing of at
Closes https://github.com/facebook/react-native/pull/5529
Reviewed By: svcscm
Differential Revision: D2872015
Pulled By: nicklockwood
fb-gh-sync-id: df78244eefce6cf8e8ed2ea51f58d6b232de16f9
Summary: Adds a new option to animation configs so that animations can be marked as non-interactions. This solves the "loading indicator problem" where an animated loading screen would deadlock as it waits for all interactions to complete.
As for the API, what we really want long term is better scheduling. This needs to be built at the runtime level (into the RN bridge) and take care of things like priority donation that are probably overkill right now. Basically this API is a medium-term fix and I won't be upset if it gets replaced with a finer-grained scheduler.
Closes https://github.com/facebook/react-native/pull/3433
Reviewed By: @svcscm
Differential Revision: D2545300
Pulled By: @vjeux
fb-gh-sync-id: c1216bf69bfbbbae00c76c4697183fe96a6a01dd
Summary: 1. Should I add an example of this to the UIExplorer Animation example?
2. Should I support mixing hex and rgba values in outputRange? It is possible with this implementation, but may cause confusion
Closes https://github.com/facebook/react-native/pull/3177
Reviewed By: @svcscm
Differential Revision: D2506947
Pulled By: @vjeux
Summary: @public
This diff does a couple of things:
- Move all the code in a src/ folder
- Move bezier.js in the Animated folder
- Rename Animated.js into AnimatedImplementation.js and adds two entry points: AnimatedReactNative.js and AnimatedWeb.js
- Implement very dumb polyfills for flattenStyle, Set and InteractionManager
- Import my work in progress demo.html file to make sure that the code is actually working.
Everything is not working correctly:
- It calls forceUpdate on every frame and doesn't use bindings because setNativeProps is not implemented
- None of the style: {transform} are working because React web doesn't know about the array notation for transform
- The demo need more work
Reviewed By: @sahrens
Differential Revision: D2464277
