Commit Graph

135 Commits

Author SHA1 Message Date
Ryan Gomba 9462a73189 Value offsets
Summary:
This diff adds support for value offsets on iOS. It separates out code originally submitted in #9048.

Test plan (required)

Set up an animation with an offset, and `useNativeModule: true`. Compare results with `useNativeModule: false`.
Closes https://github.com/facebook/react-native/pull/9627

Differential Revision: D3924410

fbshipit-source-id: 8177a25a5f6b9e33f00ea66143c782aeea24507d
2016-09-26 10:28:35 -07:00
Erik Arvidsson 1142d9d059 Remove unused/invalid Flow suppression
Summary:
The suppression comment was not formatted correctly and thus not
used.
Closes https://github.com/facebook/react-native/pull/10076

Differential Revision: D3917036

fbshipit-source-id: 92927993fb7223dc131d82096ca92017aea5f1aa
2016-09-23 16:28:56 -07:00
Cristian Carlesso 7b2080e118 Removing automatically reset modules between test run
Reviewed By: bestander

Differential Revision: D3886125

fbshipit-source-id: c8f47c3466add1e2c89649a1c6f47b01f0d7a89e
2016-09-19 12:43:55 -07:00
Janic Duplessis 6565929358 Add support for animated events
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
2016-09-19 04:14:01 -07:00
Gaëtan Renaudeau 19d0429a76 Expose getNode() on component created with createAnimatedComponent
Summary:
see also: eb3360b02a (commitcomment-19042340)

commit eb3360b02a recently break some third libraries that was (weakly) relying on traversing `animatedNode.refs.node` to get the original node of the decorated (animated) component (at least 2 libs: gl-react-native and react-native-material-kit).
Instead of now doing `animatedNode._component` (that might later break again), getNode() is a more 'public' solution for these third party.

as you expose a way to create an animated component (`createAnimatedComponent`) you sometimes still want a way to get the reference.
That way, third party components can continue providing some extra native methods to the animated version.
Closes https://github.com/facebook/react-native/pull/9944

Differential Revision: D3885973

Pulled By: foghina

fbshipit-source-id: 43ffdbfe7f9c52f5a1689e6a9a4052d4973f5c5f
2016-09-19 03:58:28 -07:00
Tobias Ritzau 3eb4bae138 Disables munging in animated to make dynamic dispatch work for private methods
Reviewed By: javache

Differential Revision: D3828458

fbshipit-source-id: 0170b199e4dc33df1d836de7475900dd95c4d2e7
2016-09-08 05:44:08 -07:00
Tobias Ritzau 3ff4ee961c Fix bad type specification in animated
Reviewed By: javache

Differential Revision: D3828502

fbshipit-source-id: 8270b00053d25f72d50f79f895ea77981e3000bb
2016-09-08 04:43:28 -07:00
Janic Duplessis e26c135746 Add support for DiffClamp node
Summary:
Add native support on iOS and Android for `Animated.diffClamp` that was added in #9419.

**Test plan**
Tested that it works properly using the native animations UIExplorer example.
Closes https://github.com/facebook/react-native/pull/9691

Differential Revision: D3813440

fbshipit-source-id: 48a3ecddf3708fa44b408954d3d8133ec8537f21
2016-09-06 15:43:35 -07:00
Janic Duplessis 6d978c3c8b Add support for extrapolation
Summary:
Adds support for the `extrapolate` parameter on the native interpolation node. This is pretty much a 1 to 1 port of the JS implementation.

**Test plan**
Tested by adding the `extrapolate` parameter in the native animated UIExplorer example.
Closes https://github.com/facebook/react-native/pull/9366

Differential Revision: D3824154

fbshipit-source-id: 2ef593af827a8bd3d7b8ab2d53abbdc9516c6022
2016-09-06 15:28:38 -07:00
Jake Murzy 64009b61cc fix NativeAnimated event listener bug
Summary:
This bugfix cleans up reference to value listener upon unsubscribing to native events ultimately preventing RCTEventEmitter from throwing a [listener count error](https://github.com/facebook/react-native/blob/v0.33.0-rc.0/React/Modules/RCTEventEmitter.m#L90):

`Attempted to remove more RCTNativeAnimatedModule listeners than added`

/cc janicduplessis sahrens

🍺
Closes https://github.com/facebook/react-native/pull/9729

Differential Revision: D3818241

Pulled By: sahrens

fbshipit-source-id: e235e3f97534ef2a50df29877ce36d3b6095237e
2016-09-04 15:58:47 -07:00
Ryan Gomba 82dba51f1a Modulo node
Summary:
This diff adds ModuloAnimatedNode on iOS. It separates out code originally submitted in #9048.

Test plan (required)

Set up an animation with a modulo node, and `useNativeModule: true`. Compare results with `useNativeModule: false`.
Closes https://github.com/facebook/react-native/pull/9626

Differential Revision: D3799636

fbshipit-source-id: 594499f11be41bf3ee709249056a3feedeace9eb
2016-08-31 14:43:43 -07:00
Janic Duplessis cd1d652af4 Add AnimatedDiffClamp node
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
2016-08-23 14:13:52 -07:00
Felix Oghina 2a7f4be8f8 native decay animation
Summary: Add support for `useNativeDriver: true` to `Animated.decay`. Add example in Native Animated Example UIExplorer app.

Reviewed By: ritzau

Differential Revision: D3690127

fbshipit-source-id: eaa5e61293ed174191cec72255ea2677dbaa1757
2016-08-19 07:13:45 -07:00
vaukalak 26e8ae74b6 added onComplete callback to animation config
Summary:
This fix provides possibility to subscribe to a child animation lifecycle. You'll be able to observe every single animation:
```
Animated.sequence([
            Animated.timing(
                this.state.scale,
                {
                    toValue: 0,
                    duration: 300,
                    onComplete: () => this.setState({someProp: 'new value'})
                }
            ),
            Animated.timing(
                this.state.scale,
                {
                    toValue: 1,
                    duration: 300
                }
            ),
        ]).start();
```
`state.someProp`, will updated with `'new value'` when the first animation will be completed.
Closes https://github.com/facebook/react-native/pull/8494

Reviewed By: javache

Differential Revision: D3735322

Pulled By: foghina

fbshipit-source-id: fb69a4b993f7ab6a16da4fdd670e6c0b11c93517
2016-08-18 04:58:39 -07:00
Janic Duplessis 0e204e1141 Add support for value listener
Summary:
Adds support for `Animated.Value#addListener` for native driven animated values. Same as #8844 but for iOS. This depends on some JS code in #8844 so only review the 2nd commit and let's wait for #8844 to land first.

**Test plan**
Tested using the UIExplorer example.
Closes https://github.com/facebook/react-native/pull/9194

Differential Revision: D3681749

fbshipit-source-id: 521a61e2221c1ad1f6f40c75dd2dc957361d0271
2016-08-11 18:13:31 -07:00
Felix Oghina 9965642ebc Fix docs generation
Summary: Docs generator can't handle arrow functions as class members, resort to old-style function & bind in constructor.

Reviewed By: bestander

Differential Revision: D3703698

fbshipit-source-id: 894e2ba3686cbda437d186c913979b2f1170fe34
2016-08-11 12:13:28 -07:00
Felix Oghina eb3360b02a fix all eslint errors/warnings in AnimatedImplementation.js
Summary: It was bothering me.

Reviewed By: davidaurelio

Differential Revision: D3690646

fbshipit-source-id: 50551f0bc4e879c36a262e923649745377ff0e2f
2016-08-11 04:28:30 -07:00
Konstantin Raev 52e771dc2f Reduced precision in bezier test
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
2016-08-09 07:43:51 -07:00
David Aurelio 94666f16c7 Auto-fix lint errors
Reviewed By: bestander

Differential Revision: D3683952

fbshipit-source-id: 9484d0b0e86859e8edaca0da1aa13a667f200905
2016-08-09 06:43:46 -07:00
Felix Oghina e6b850871b flow autofix AnimatedImplementation.js
Reviewed By: davidaurelio

Differential Revision: D3683918

fbshipit-source-id: af402bcd61872667b82a25c1e6614c6ae74e2097
2016-08-09 04:28:53 -07:00
Felix Oghina b7903e4f96 fix method overriding when using native animations
Reviewed By: davidaurelio

Differential Revision: D3683921

fbshipit-source-id: 8be9437c1f2625c69d0e07142010494a01f52005
2016-08-09 04:13:46 -07:00
Janic Duplessis df05311777 Add transform support for native animated on Android
Summary:
This adds support for the `transform` animated node. This brings feature parity with the iOS implementation and allows running the NativeAnimated UIExplorer example that was created with the iOS implementation on Android. This is based on some work by kmagiera in the exponent RN fork.

This also adds support for mixing static values with animated ones in the same transform as well which is not supported on iOS at the moment. It is also implemented in a way that rebuilds the transform matrix the same way as we build it in JS so it will be easy to remove some of the current limitations like forcing the transforms order and only supporting one of each type.

**Test plan (required)**

Tested with the NativeAnimated example on Android and iOS. Also tested mixing in static values in a transform (`[{ rotate: '45deg' }, { translateX: animatedValue }]`).
Closes https://github.com/facebook/react-native/pull/8839

Differential Revision: D3682143

fbshipit-source-id: 5e6fd4b0b8be6a76053f24a36d1785771690a6f8
2016-08-07 00:58:36 -07:00
Krzysztof Magiera 8f75d7346f Support for spring animations
Summary:
This change adds support for spring animations to be run off the JS thread on android. The implementation is based on the android spring implementation from Rebound (http://facebook.github.io/rebound/) but since only a small subset of the library is used the relevant parts are copied instead of making RN to import the whole library.

**Test Plan**
Run java tests: `buck test ReactAndroid/src/test/java/com/facebook/react/animated`
Add `useNativeDriver: true` to spring animation in animated example app, run it on android
Closes https://github.com/facebook/react-native/pull/8860

Differential Revision: D3676436

fbshipit-source-id: 3a4b1b006725a938562712989b93dd4090577c48
2016-08-05 12:14:06 -07:00
leeight 53c1da0047 InterpolationAnimatedNode fromDoubleArray should support the string type
Summary:
The `NativeAnimationsExample` in Android can not work due to inputRange and outputRange were limited to double array type, which is different from iOS.

So we need let android version to support string array type.
Closes https://github.com/facebook/react-native/pull/8900

Differential Revision: D3674754

fbshipit-source-id: e7844f00940bf0fdd6f7f5003dd4eeefa0c317a0
2016-08-05 02:58:30 -07:00
Janic Duplessis 158d435f36 Implement native Animated value listeners on Android
Summary:
Adds support for `Animated.Value#addListener` for native driven nodes on Android. This is based on work by skevy in the exponent RN fork. Also adds a UIExplorer example.

** Test plan **
Run unit tests

Tested that by adding a listener to a native driven animated node and checked that the listener callback is called properly.

Also tested that it doesn't crash on iOS that doesn't support this yet.
Closes https://github.com/facebook/react-native/pull/8844

Differential Revision: D3670906

fbshipit-source-id: 15700ed7b93db140d907ce80af4dae6be3102135
2016-08-04 13:13:33 -07:00
Ryan Gomba eb96b7fabc Maintain transform order
Summary:
This diff addresses the issues raised by kmagiera in https://github.com/facebook/react-native/pull/7884. Transforms should be applied in the order they are defined, just like in `processTransform.js`. A scale applied before a translation, for instance, should give a different result than a translation applied before a scale.

We leverage CATransform3D to do the heavy lifting. A concatenated transform is passed all the way to `RCTViewPropertyMapper`. It is compared with the transform currently applied to the view, and if different, applied. The same approach is used for opacity.

I think it makes the most sense to do this diffing in `RCTViewPropertyMapper`, as opposed to creating and cleaning up an `_updatedPropsDictionary` each frame in `RCTTransformAnimatedNode` and `RCTStyleAnimatedNode`. The node should keep its full value; applying a minimal set of altered props is an optimization.  The higher up this optimization is implemented, the more assumptions it makes. e.g. that there will only ever be a sing
Closes https://github.com/facebook/react-native/pull/9050

Differential Revision: D3658139

fbshipit-source-id: ad6286762ef734084cbdf83c9bd9241190302d34
2016-08-02 14:28:29 -07:00
Elliot Lynde d905af4736 Delete AnimatedNative-test
Reviewed By: cpojer

Differential Revision: D3546643

fbshipit-source-id: d0484e55e8e2943584d9084f2663dbdbfe3fce0e
2016-07-11 19:43:21 -07:00
Konstantin Raev 3ddf3db551 Fixed objc test runner and bezier test
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
2016-07-08 03:28:58 -07:00
David Aurelio bd60d828c5 Remove `node_modules/react` from the list of discoverable haste modules
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.

Reviewed By: astreet

Differential Revision: D3509863

fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
2016-07-05 06:44:33 -07:00
Joel Arvidsson d7672d80fc Fix frame calculation for natively driven animations
Summary:
Currently the algorithm for calculating frames will not always have an correct value for the endframe making some natively driven animations stuck almost at the end. This PR ensures the animation ends at `1`.

**Test plan**

Tested with the code in `NativeAnimationsExample.js`.
Closes https://github.com/facebook/react-native/pull/8489

Differential Revision: D3502973

fbshipit-source-id: b9b114d3982341571ac6ff315620d3d2292d9266
2016-06-30 05:28:24 -07:00
Christoph Pojer 89a9ca6688 Update some JS in preparation for some Jest updates.
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
2016-06-30 01:58:40 -07:00
Pieter De Baets 482b4b6bfa Delay some requires in Animated
Reviewed By: sahrens

Differential Revision: D3424476

fbshipit-source-id: 487835e310b7651e952f46991f2a64bc4967d58a
2016-06-14 05:14:01 -07:00
Brandon Withrow 19e2388a76 Add support for native animations on iOS
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
2016-06-09 10:43:51 -07:00
Brandon Withrow b29c938312 Reverted commit D3401811
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

Differential Revision: D3401811

Pulled By: nicklockwood

fbshipit-source-id: 709e533243130153febef03ddd60d39e9fe70e3e
2016-06-07 23:43:30 -07:00
Brandon Withrow 5ecdb252c3 Add support for native animations on iOS
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

Differential Revision: D3401811

Pulled By: nicklockwood

fbshipit-source-id: c8d750b75e4410923e17eaeb6dcaf079a09942e2
2016-06-07 20:43:37 -07:00
Sean Kelley 908041b80b Round alpha channel when interpolating colors to the nearest thousandth.
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
2016-05-17 10:13:29 -07:00
wusuopu 17f08070e8 Animated: Implement toJSON method of Animated
Summary:
Fix issue https://github.com/facebook/react-native/issues/7441
Closes https://github.com/facebook/react-native/pull/7442

Differential Revision: D3274594

fb-gh-sync-id: 720d7dcdaa97a2ee5235547bad6ba020398b57d2
fbshipit-source-id: 720d7dcdaa97a2ee5235547bad6ba020398b57d2
2016-05-08 01:09:21 -07:00
Krzysztof Magiera 6c80f886ae Fix setValue to work properly on natively driven nodes
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
2016-05-04 02:48:22 -07:00
Christoph Pojer d363b1f2e2 Update Jest APIs on fbsource
Reviewed By: javache

Differential Revision: D3229435

fb-gh-sync-id: b0e252d69e1f399a946fca6e98ef62ff44c2ef9c
fbshipit-source-id: b0e252d69e1f399a946fca6e98ef62ff44c2ef9c
2016-04-27 19:16:32 -07:00
Krzysztof Magiera dd244f5530 Support for Animated.interpolate
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
2016-04-23 02:37:28 -07:00
Krzysztof Magiera cd11738819 Support for stopping animations that run on UI thread.
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
2016-04-22 00:02:25 -07:00
Krzysztof Magiera ec5dfbf8c7 Support for Animated.multiply node
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
2016-04-19 13:20:20 -07:00
Krzysztof Magiera b5375bdc09 Support for Animated.add
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
2016-04-19 02:58:21 -07:00
Angela Hess 64d5da7754 Replace opacity console error with warning
Summary: This error message is remarkably aggressive relative to the severity of the issue, particularly since the pattern in question is used / necessary throughout the codebase. Animated ReactART components with set opacities trigger this error, and opacity coming from the style prop is not respected.

Reviewed By: sahrens

Differential Revision: D3177554

fb-gh-sync-id: 96061d5ff526177814996b28e4394e6649839582
fbshipit-source-id: 96061d5ff526177814996b28e4394e6649839582
2016-04-18 18:53:20 -07:00
Leland Richardson 4ee0f7b218 Round interpolation for RGB components
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
2016-04-15 14:51:27 -07:00
Krzysztof Magiera 874bcd3ee3 JS tests.
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
2016-04-07 01:27:20 -07:00
Krzysztof Magiera 65ccdffc8d Execute Animated.js declarative animation on UIThread on Android.
Summary:This is the first from the series of PRs I'm going to be sending shorty that would let Animated.js animations to run off the JS thread (for Android only).

This PR introduce a new native module that will be used for offloading animations - NativeAnimatedModule. It has a simple API that allows for animated nodes management via methods like: create/drop animated node, connect/disconnect nodes, start animation of a value node, attach/detach animated from a native view.

Similarly to how we handle UIManager view hierarchy updates we create a queue of animated graph operations that are then executed on the UI thread. This isolates us from problems that may be caused by concurrent updates of animated graph while UI thread is "executing" the animation.

The most important class NativeAnimatedNodesManager.java implements a management interface for animated nodes graph as well as implements a graph traversal algorithm that is run for each animation frame. For each animation frame we visit animated nodes th
Closes https://github.com/facebook/react-native/pull/6466

Differential Revision: D3092739

Pulled By: astreet

fb-gh-sync-id: 665b49900b7367c91a93b9d8864f78fb90bb36ba
shipit-source-id: 665b49900b7367c91a93b9d8864f78fb90bb36ba
2016-03-24 06:19:27 -07:00
Aaron Franks 11985d5c77 Remove invalid comma from Animated example
Summary:Helps for suckers like me, who copy and paste example code ;)
Closes https://github.com/facebook/react-native/pull/5133

Differential Revision: D3074849

Pulled By: mkonicek

fb-gh-sync-id: 8311dc26b173e341433866f66db374464c3c9f63
shipit-source-id: 8311dc26b173e341433866f66db374464c3c9f63
2016-03-20 11:02:27 -07:00
Gaëtan Renaudeau b5985cf690 Refactor bezier implementation from bezier-easing library
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
2016-03-12 14:13:22 -08:00
Jeff Morrison 593d766ec5 Fix fbsource errors
Reviewed By: kassens

Differential Revision: D3032708

fb-gh-sync-id: e697a2433dcdcb70ddeafdee607f14e570cfb245
shipit-source-id: e697a2433dcdcb70ddeafdee607f14e570cfb245
2016-03-09 16:54:24 -08:00
Jeff Morrison b473d496c4 Update FBSource to use Flow 0.22
Reviewed By: gabelevi

Differential Revision: D3021265

fb-gh-sync-id: f4c857505c1a7b6b813bcdccd629e595ef7a81af
shipit-source-id: f4c857505c1a7b6b813bcdccd629e595ef7a81af
2016-03-08 12:39:29 -08:00
David Aurelio d3f2081d90 Fix unit tests in open source environment
Summary:**Test plan**

run `npm test`, see all tests pass
Closes https://github.com/facebook/react-native/pull/6243

Differential Revision: D2999993

Pulled By: davidaurelio

fb-gh-sync-id: 54f2d5f9d28a31d132783694133df78370660421
shipit-source-id: 54f2d5f9d28a31d132783694133df78370660421
2016-03-02 07:07:38 -08:00
Martin Konicek 4654b34c97 Revert Remove invariant hack for jest
Summary: This reverts D2988899 as it consistently broke the Invariant test on Travis: https://travis-ci.org/facebook/react-native

Reviewed By: bestander

Differential Revision: D2999915

fb-gh-sync-id: 781ab5f6fc8e3b97bc4d215af855823f4b5014dd
shipit-source-id: 781ab5f6fc8e3b97bc4d215af855823f4b5014dd
2016-03-02 05:46:33 -08:00
David Aurelio ad8a335864 Remove knowledge of fbjs from the packager
Summary:Follow-up to https://github.com/facebook/react-native/pull/5084

This…
- changes all requires within RN to `require('fbjs/lib/…')`
- updates `.flowconfig`
- updates `packager/blacklist.js`
- adapts tests
- removes things from `Libraries/vendor/{core,emitter}` that are also in fbjs
- removes knowledge of `fbjs` from the packager

Closes https://github.com/facebook/react-native/pull/5084

Reviewed By: bestander

Differential Revision: D2926835

fb-gh-sync-id: 2095e22b2f38e032599d1f2601722b3560e8b6e9
shipit-source-id: 2095e22b2f38e032599d1f2601722b3560e8b6e9
2016-03-02 04:28:38 -08:00
Spencer Ahrens 85801ef874 Remove invariant hack for jest
Reviewed By: vjeux, cpojer

Differential Revision: D2988899

fb-gh-sync-id: e1b2a32a3f665b8f8a246e73e8dd620ff8506ea7
shipit-source-id: e1b2a32a3f665b8f8a246e73e8dd620ff8506ea7
2016-03-01 13:42:59 -08:00
Zack ae0ad1fc7e Implement modulo operator method
Summary:This is an initial take on how to allow for value wrapping in Animated (currently `.timing` only). It adds a wrap config options which is an array specifying a range of values to be wrapped around. Anytime the delta of `toValue and fromValue > wrapDistance / 2` instead of animating the long way it will animate towards the range extremity and then after breaching the range it will readjust to animated to the true toValue.

Example Usage:
```js
Animated.timing(
  this.state.animatedDegrees,
  {toValue: Math.random()*360, wrap: [0, 360]}
).start()
```

This is presumably very valuable in rotation based animations, but could also be useful in other applications like wrapping the edges of the viewport.

Questions & Todo:
- Is `wrap` as a config key semantically meaningful and accurate?
- Is there a way to expose this as a config option on `.interpolate` rather than timing
- Generalize to all animated API's (spring, decay), and will this work with ValueXY out of the box?
- Add tests
Closes https://github.com/facebook/react-native/pull/5743

Differential Revision: D2979992

fb-gh-sync-id: 69be510feba8c43acb10c253036f5854adff9258
shipit-source-id: 69be510feba8c43acb10c253036f5854adff9258
2016-02-25 17:19:31 -08:00
Zack a9846da9fa support plain numbers in add and multiply operators
Summary:This adds support for passing plain numbers into the add and multiply operators. This can be useful if you want to have one AnimatedValue for a component that is say a scale 0 -> 1 and then animated many style properties accordingly using derivative Animated values.

Thoughts?

As far as implementation, there may be more performant implementations that do not require creating a whole new AnimatedValue for every static number. I am open to suggestion.
Closes https://github.com/facebook/react-native/pull/6154

Differential Revision: D2979962

Pulled By: vjeux

fb-gh-sync-id: b5ecb568b4c64b995dc4100991f02c17f0dd97dd
shipit-source-id: b5ecb568b4c64b995dc4100991f02c17f0dd97dd
2016-02-25 17:16:09 -08:00
Martin Konicek 9d3d9dfbce Make fbsource and GitHub consistent 2016-02-25 17:13:25 -08:00
Konstantin Raev 6f1417c849 CI now builds docs website and deploys it to /%version% path
Summary:
Copy of #5760 reverted merge.

We need to preserve history of docs changes on the webserver.
The goal is to allow users to browse outdated versions of docs.
To make things simple all websites will be released to https://facebook.github.io/react-native/releases/version/XX folder when there is a branch cut.

I switched from Travis CI to Cirle CI because it works faster and I am more familiar with it.

How it works:

1. If code is pushed to `master` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/next folder.
Github will serve this website from https://facebook.github.io/react-native/releases/version/next URL.
All relative URLs will work within that website

2. If code is pushed to `0.20-stable` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/0.20 folder.
Github will serve this website from https://facebook.github.io/react-native/releases/v
Closes https://github.com/facebook/react-native/pull/5873

Reviewed By: svcscm

Differential Revision: D2926901

Pulled By: androidtrunkagent

fb-gh-sync-id: 16aea430bac815933d9c603f03921cc6353906f1
shipit-source-id: 16aea430bac815933d9c603f03921cc6353906f1
2016-02-11 06:17:42 -08:00
Pieter De Baets 042862a010 Update Interpolation to use new color format
Reviewed By: bestander

Differential Revision: D2911363

fb-gh-sync-id: eddfc1f1e33ee6c74f3a492a69f6d93de018e4ae
2016-02-08 04:49:33 -08:00
glevi@fb.com 5ec1d354c2 Deploy v0.21.0
Reviewed By: jeffmo

Differential Revision: D2888689

fb-gh-sync-id: fe94e50c7872b9a1344a054acccab365d385f6ed
2016-02-01 17:13:35 -08:00
Christopher Chedeau c8a0a3eff6 Reimplement color processing
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
2016-01-29 09:13:32 -08:00
sunnylqm 7b63b225a5 remove a typo
Summary:
I can't guess the point. Just simply removed this typo.
Closes https://github.com/facebook/react-native/pull/4943

Reviewed By: svcscm

Differential Revision: D2786863

Pulled By: bestander

fb-gh-sync-id: 0f36f796cae23bacb86ffe224b6b05915e228f47
2016-01-06 10:33:29 -08:00
Qiao Liang 521983480a updated deprecated sample code in animation doc 2015-12-18 00:11:00 +08:00
Justas Brazauskas 0e8b207cc3 Bugfix - Typos
Summary:
Fixed few typos in `./Examples` and `./Libraries` folders.
Closes https://github.com/facebook/react-native/pull/4788

Reviewed By: svcscm

Differential Revision: D2759918

Pulled By: androidtrunkagent

fb-gh-sync-id: d692b5c7f561822353e522f9d4dfde7e60b491cf
2015-12-15 09:09:32 -08:00
Huang Yu 4373aa6822 fix animated lint warnings
Summary:
fix lint warnings under 'Libraries/Animated' directory
Closes https://github.com/facebook/react-native/pull/4448

Reviewed By: svcscm

Differential Revision: D2753880

Pulled By: androidtrunkagent

fb-gh-sync-id: c6619c636ff67a74e6f063f70526327d756271db
2015-12-13 11:45:28 -08:00
Leland Richardson 3eb32cbb0e Animated.multiply and Animated.add to combine animated values
Summary:
This PR was created in response to feedback from an older PR: https://github.com/facebook/react-native/pull/2045

The `.interpolate()` API of Animated values is quite effective to accomplish transformations based on a single animated value, but currently there is a class of animations that is impossible: animations being driven by more than one value.

Usage would be like the following:

```js
getInitialState: function() {
  return {
    panY: new Animated.Value(0),
    offset: new Animated.Value(0),
  };
}
```

```js
var scale = Animated.add(panY, offset).interpolate({
  inputRange: [...],
  outputRange: [...],
});
```

I have a real use case for this, and I cannot think of any way to accomplish what I need without an API like this.

The animation I am trying to accomplish is I have a PanResponder being used to detect both x and y panning. The y-axis panning drives a 3d sroll-like animation (which we can call `panY`), and the x-axis panning is driving a "swipe-to-remove" animation (
Closes https://github.com/facebook/react-native/pull/4395

Reviewed By: svcscm

Differential Revision: D2731305

Pulled By: vjeux

fb-gh-sync-id: 3b9422f10c7e7f3b3ecd270aeed8ea92315a89e9
2015-12-10 13:30:27 -08:00
Wenjing Wang 0058b0806b propTypes could be undefined
Summary:
public
This causes a warning since propType not exist

Reviewed By: vjeux

Differential Revision: D2713358

fb-gh-sync-id: 58406d1dc969e6f1d40bee958c28cc87036b30c2
2015-12-02 12:33:30 -08:00
SangYeob Bono Yu e6b0eaee35 Fixed Typo
Summary: Closes https://github.com/facebook/react-native/pull/4199

Reviewed By: svcscm

Differential Revision: D2668739

Pulled By: sebmarkbage

fb-gh-sync-id: 4c40feb9088a1631bcd0304bc94e956b6c38883d
2015-11-18 08:10:30 -08:00
Tadeu Zagallo b907f40957 Fix breakages when upgrading to babel 6
Reviewed By: vjeux

Differential Revision: D2628092

fb-gh-sync-id: 077a3572fe8b261d390be2bdc32d9d06c2b80a01
2015-11-10 10:56:48 -08:00
Jeff Morrison d4eb8201f1 Deploy Flow 0.18.1 to fbobjc
Reviewed By: gabelevi

Differential Revision: D2575778

fb-gh-sync-id: 2cf610959db6a493d1813455b17f66bc997a9ef3
2015-10-26 15:36:14 -07:00
James Ide c38d7fab97 `isInteraction` option to keep InteractionManager unblocked
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
2015-10-15 09:22:33 -07:00
gabe@fb.com 08ec89d2e6 Fix errors in preparation for v0.17.0
Reviewed By: @jeffmo

Differential Revision: D2512681

fb-gh-sync-id: dedf465af43cf3c8839fa960c5f1a2c2648e4e1e
2015-10-07 12:03:20 -07:00
Sebastian Markbage 2ea3b93784 Add warning to setNativeProps and Animated for non-nested styles
Summary: These were accidentally supported because they were merged at a lower
level. That's an implementation detail. setNativeProps should still
normalize the API.

I fixed some callers.

Setting props the normal way used to ignore these. Unfortunately we can't
warn for those cases because lots of extra props are spread. (The classic
transferPropsTo issue.)

@​public

Reviewed By: @vjeux

Differential Revision: D2514228

fb-gh-sync-id: 00ed6073827dc1924da20f3d80cbdf68d8a8a8fc
2015-10-06 15:36:23 -07:00
Pieter De Baets 7c1b6b0fb6 Vendor tinycolor; strip unnecessary components
Reviewed By: @vjeux

Differential Revision: D2503048
2015-10-05 04:41:26 -07:00
Dral 463b072dac Support hex values in outputRange
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
2015-10-04 14:37:59 -07:00
Christopher Chedeau a50b4ea7b9 Initial web implementation
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
2015-09-22 11:58:37 -07:00
Christoph Pojer fa01b2e4cb Codemod tests to use top-level-requires
Reviewed By: @DmitrySoshnikov

Differential Revision: D2456250
2015-09-19 15:41:29 -07:00
Christopher Chedeau be966f5a25 Testing import script
Summary: Closes https://github.com/facebook/react-native/pull/2622

Reviewed By: @​trunkagent, @​svcscm

Differential Revision: D2427801

Pulled By: @vjeux
2015-09-15 18:25:31 -07:00
Bill Fisher 493cb35966 Fix flow typing of TimingAnimationConfig
Summary: @​public
Make the flow type of TimingAnimationConfig and TimingAnimation the same as SpringAnimationConfig and SpringAnimation.
This is a more accurate flow type as both are multiplexed through maybeVectorAnim().

Reviewed By: @sahrens

Differential Revision: D2410166
2015-09-09 23:55:30 -07:00
Spencer Ahrens cc1a9fa3f3 [RN] Document Animated.js 2015-09-03 19:25:41 -08:00
Spencer Ahrens fdeb6a842a [RN] New AnimationExample 2015-09-03 12:52:56 -08:00
Spencer Ahrens 4379aa00de [RN] Use default param for elastic bounciness 2015-09-01 20:38:50 -08:00
Spencer Ahrens 9ad2c322c0 [RN] improve elastic easing
Summary:
1) Makes params more intuitive (only one now, bounciness, which maps intuitively to number of oscillations).
2) Satisfies boundary conditions (f(0) = 0, f(1) = 1) so animation actually goes where you tell it (before it would finish at a random location depending on the input params).
3) Simple test to verify boundary conditions.
2015-08-31 13:39:00 -08:00
Eric Vicenti 6f17dba39b [ReactNative] Remove POPAnimation
Summary:
Thanks to @vjeux' work on Animated, we have transitioned away from POPAnimation entirely
2015-08-20 22:24:28 -07:00