Commit Graph

51 Commits

Author SHA1 Message Date
Krzysztof Magiera b48f7e5605 Support for animated tracking in native driver
Summary:
This PR adds support for Animated tracking to Animated Native Driver implementation on Android and iOS.

Animated tracking allows for animation to be started with a "dynamic" end value. Instead of passing a fixed number as end value we can pass a reference to another Animated.Value. Then when that value changes, the animation will be reconfigured to drive the animation to the new destination point. What is important is that animation will keep its state in the process of updating "toValue". That is if it is a spring animation and the end value changes while the previous animation still hasn't settled the new animation will start from the current position and will inherit current velocity. This makes end value transitions very smooth.

Animated tracking is available in JS implementation of Animated library but not in the native implementation. Therefore until now, it wasn't possible to utilize native driver when using animated tracking. Offloading animation from JS thread turns out to be crucial for gesture driven animations. This PR is a step forward towards feature parity between JS and native implementations of Animated.

Here is a link to example video that shows how tracking can be used to implement chat heads effect: https://twitter.com/kzzzf/status/958362032650244101

In addition this PR fixes an issue with frames animation driver on Android that because of rounding issues was taking one extra frame to start. Because of that change I had to update a number of Android unit tests that were relying on that behavior and running that one additional animation step prior to performing checks.

As a part of this PR I'm adding three unit tests for each of the platforms that verifies most important aspects of this implementation. Please refer to the code and look at the test cases top level comments to learn what they do.

I'm also adding a section to "Native Animated Example" screen in RNTester app that provides a test case for tracking. In the example we have blue square that fallows the red line drawn on screen. Line uses Animated.Value for it's position while square is connected via tracking spring animation to that value. So it is ought to follow the line. When user taps in the area surrounding the button new position for the red line is selected at random and the value updates. Then we can watch blue screen animate to that position.

You can also refer to this video that I use to demonstrate how tracking can be linked with native gesture events using react-native-gesture-handler lib: https://twitter.com/kzzzf/status/958362032650244101

[GENERAL][FEATURE][Native Animated] - Added support for animated tracking to native driver. Now you can use `useNativeDriver` flag with animations that track other Animated.Values
Closes https://github.com/facebook/react-native/pull/17896

Differential Revision: D6974170

Pulled By: hramos

fbshipit-source-id: 50e918b36ee10f80c1deb866c955661d4cc2619b
2018-02-16 12:10:01 -08:00
Semen Zhydenko d2c569795c Typos in comments and log messages
Summary:
No code changes, no testing required.

alligned -> aligned
allignment -> alignment
completly -> completely
conseptually -> conceptually
decendents -> descendants
indefinetly -> indefinitely
dimention -> dimension
doesnt -> doesn't
safegaurd -> safeguard
intialization -> initialization
hierachy -> hierarchy
happend -> happened
gaurd -> guard
programatically -> programmatically
initalized -> initialized
immidiately -> immediately
occured -> occurred
unkown -> unknown
neccessary -> necessary
neccesarily -> necessarily
occuring -> occurring
comoponent -> component
propogate -> propagate
recieved -> received
referece -> reference
perfomance -> performance
recieving -> receiving
subsquently -> subsequently
scoll -> scroll
suprisingly -> surprisingly
targetting -> targeting
tranform -> transform
symetrical -> symmetrical
wtih -> with
Closes https://github.com/facebook/react-native/pull/17578

Differential Revision: D6718791

Pulled By: shergin

fbshipit-source-id: 4ab79c1131ec5971d35a0c7199eba7ec0a0918ad
2018-01-12 22:18:45 -08:00
Valentin Shergin 0a8721c340 Renaming uiManagerWillFlushUIBlocks -> uiManagerWillPerformMounting
Summary:
Because it is not simply flushing, it (in the future) is more complex process. And the names should represent logical meaning of the process, not particular implementation details.
It also nice to have unified terminology across our reactive UI frameworks.

See the next diffs.

Reviewed By: rsnara

Differential Revision: D6436770

fbshipit-source-id: 0a0b686e8ace89e30f6787a37c0a7965c5af757b
2017-12-11 17:10:48 -08:00
Janic Duplessis c47759a9ae Fix potential retain cycles in Animated iOS
Summary:
Fixes potential retain cycles detected by an internal fb tool.

```
First:

__NSDictionaryM
-> RCTPropsAnimatedNode
-> _parentNodes -> __NSDictionaryM
-> RCTStyleAnimatedNode
-> _childNodes -> __NSDictionaryM

Second:

RCTScrollView
-> _eventDispatcher -> RCTEventDispatcher
-> _observers -> __NSArrayM
-> RCTNativeAnimatedModule
-> _nodesManager -> RCTNativeAnimatedNodesManager
-> _uiManager -> RCTUIManager
-> _viewRegistry -> __NSDictionaryM
-> RCTScrollView
```

First fix:
Use weak map for parent and child nodes, strong refs are managed by RCTNativeAnimatedNodesManager

Second fix:
Make RCTEventDispatcher observers a weak array and make sure we don't keep strong refs to UIManager in RCTNativeAnimatedNodesManager and RCTPropsAnimatedNode.

Tested that native animations still work in UIExplorer

[IOS] [BUGFIX] [NativeAnimated] - Fix potential retain cycles in Animated iOS
Closes https://github.com/facebook/react-native/pull/16506

Differential Revision: D6126400

Pulled By: shergin

fbshipit-source-id: 1ac5083f8ab79a806305edc23ae4796ed428f78b
2017-10-23 13:20:59 -07:00
Valentin Shergin 6d67e2dbbc Bunch of utility funcs were moved to RCTUIManagerUtils
Summary: Because `RCTUIManager` is already overcomplicated and that stuff deserves separate file and header.

Reviewed By: javache

Differential Revision: D5856653

fbshipit-source-id: 7001bb8ba611976bf3b82d6a25f5619810a35b34
2017-09-26 14:08:28 -07:00
Janic Duplessis 3cbc36138a Native Animated - Allow events that are dispatched from any thread
Summary:
Instead of preventing events from working when not on the UI Thread we can just dispatch to it instead.

**Test plan**
Tested manually that animated events still work in RNTester
Closes https://github.com/facebook/react-native/pull/15953

Differential Revision: D5909816

Pulled By: shergin

fbshipit-source-id: 48d02b6aa9f2bc3bcb638e8852fccaac3f205276
2017-09-25 23:15:15 -07:00
Adam Miskiewicz 26133beda9 Add closed-form damped harmonic oscillator algorithm to Animated.spring
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
2017-09-20 23:38:16 -07:00
Adlai Holler 0f440130b6 Standardize project indentation settings on 2 spaces
Summary:
Hi React Native folks! Love your work!

To make contributing easier, this sets the indentation settings of all the Xcode projects to 2 spaces to match their contents.
Closes https://github.com/facebook/react-native/pull/15275

Differential Revision: D5526462

Pulled By: javache

fbshipit-source-id: cbf0a8a87a1dbe31fceed2f0fffc53839cc06e59
2017-07-31 05:20:03 -07:00
Krzysztof Magiera b8fafb46c1 Stop native driver animations when value is set.
Summary:
This diff changes the behaviour of natively driven animations in case the node that they are being run for has its value changed using `setValue` or as a result of an incoming event.

The reason for changing that is to match the JS implementation of `setValue` which behaves as described above (see relevant code here: 7cdd4d48c8/Libraries/Animated/src/AnimatedImplementation.js (L743))

**Test Plan:**
Use this sample app: https://snack.expo.io/B1V7RX9r-
Change: `USE_NATIVE_DRIVER` const between `true` and `false`.
See the animation stops regardless of the state of `USE_NATIVE_DRIVER` unlike before when it would stop only when `USE_NATIVE_DRIVER` was set to `false`
Closes https://github.com/facebook/react-native/pull/15054

Differential Revision: D5463750

Pulled By: hramos

fbshipit-source-id: e164c5299588ba8cac2937260c9ba9f6053b04e5
2017-07-20 14:20:30 -07:00
Janic Duplessis 11424a8bc6 Native Animated - Support Animated.loop on iOS
Summary:
Follow up to #11973 to add support to Animated.loop with useNativeDriver on iOS.

**Test plan**
Test with new UIExplorer example
Run unit tests
Closes https://github.com/facebook/react-native/pull/13359

Differential Revision: D4960754

Pulled By: javache

fbshipit-source-id: caa840281f1b060df7a2b1c50405fcae1e1b0de6
2017-05-26 03:30:33 -07:00
Janic Duplessis fc45471af2 Native Animations - Fix edge case with restore default values
Summary:
There was an edge case where sometimes a view could be added and removed in the same batch so this caused issues because we ran `disconnectAnimatedNodeFromView` before `connectAnimatedNodeToView`. This separates restoring default values from `disconnectAnimatedNodeFromView` so we can run only `restoreDefaultValues` on the pre-operations queue and just do nothing in case the view doesn't exist (it is fine because we know it will be removed immediately).

**Test plan**
Tested that native animations still work properly in RNTester and tested that the edge case crash was fixed.
Closes https://github.com/facebook/react-native/pull/14114

Differential Revision: D5128989

Pulled By: javache

fbshipit-source-id: 9f47a2d3aafeb06d8ed1a4dd1800b8af225edb7d
2017-05-25 06:18:36 -07:00
Valentin Shergin 712b1dd20a RCTUIManagerObserverCoordinator: new way to subscribe for granular notifications from UI Manager
Reviewed By: majak

Differential Revision: D4868591

fbshipit-source-id: 24a09ffa3e69dec5ce1f0a8715c7e4701d781996
2017-05-08 12:52:09 -07:00
Janic Duplessis 6c434f9404 Native Animated - Support decay on iOS
Summary:
This is one of the last feature that is missing from native animated, it was already supported on Android and this implementation is based on it.

**Test plan**
Test that the existing decay animation example now works on iOS
Run unit tests
Closes https://github.com/facebook/react-native/pull/13368

Differential Revision: D4938061

Pulled By: javache

fbshipit-source-id: 36b57b1029a542e9daf21e048a06d3b3347e9659
2017-04-24 04:31:43 -07:00
Janic Duplessis a85a86bd8d Fix tvOS build
Summary:
Not sure if this is the proper fix but changing PRODUCT_NAME to RCTAnimation did the trick. Also using `#import "RCTValueAnimatedNode.h"` instead of `#import <RCTAnimation/RCTValueAnimatedNode.h>` in `RCTNativeAnimatedNodesManager.h` can work too.
Closes https://github.com/facebook/react-native/pull/13190

Differential Revision: D4794401

Pulled By: javache

fbshipit-source-id: c33232a676131644afa80e34ca7a1516a2c89f7e
2017-03-29 02:35:59 -07:00
Janic Duplessis f46fd36a44 NativeAnimated - Fix missing update at the end of the batch
Summary:
This call got lost in the refactor of #11819 and caused some view updating issues.
Closes https://github.com/facebook/react-native/pull/13183

Differential Revision: D4787565

Pulled By: javache

fbshipit-source-id: 8f7d456824c67abee6ac1d5f906e4c831ede889b
2017-03-28 11:01:54 -07:00
Janic Duplessis 1d37dd063c Native Animated - Add tests on iOS
Summary:
Adds unit tests to the Native Animated implementation on iOS. This pretty much mirrors the tests we currently have on Android.

It also fixes 2 bugs I've found when adding the tests and pass the current time in `stepAnimation` instead of using `CACurrentMediaTime` to make testing easier.

- `stopListeningToAnimatedNodeValue` did not actually work at all, it should set the listener to nil.
- The finished value in the animation end callback was always true, this simplifies the `RCTAnimationDriver` interface to get rid of `removeAnimation` and fixes the end callback value.

**Test plan**
- Run the tests
- Make sure the UIExplorer example still works
Closes https://github.com/facebook/react-native/pull/13068

Differential Revision: D4786701

Pulled By: javache

fbshipit-source-id: a4f07e6eec1f363ca47b6f27984041793c915bfc
2017-03-28 09:16:58 -07:00
Janic Duplessis fb54a1eb3e Native Animated - Fix timing animation delay on iOS
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
2017-03-28 09:16:58 -07:00
Janic Duplessis c9fae2fb93 Native Animated - Restore default values when removing props on iOS
Summary:
This fixes a bug that causes properties to keep stale values because they were not restored to their default after being removed when their value was controlled by native animated.

To fix this we restore default values in `disconnectFromView` by updating views with null values for all props that we modified previously. However this causes another issue where we lose any props that were set by the normal process because NativeAnimated operations are always executed after UIManager operatations. To fix this I added a way to hook into UIManager view updating process to be able to execute NativeAnimated operations either before or after updating native views.

In the case of disconnecting we want to do it before updating views so that it does: Value changed by native animated -> value restored to default -> (optional) value updated by normal prop.

This PR also depends on #10658.

**Test plan**
Tested that this fixed a particular bug in an app that uses ex-navigation + native animations where a navbar w
Closes https://github.com/facebook/react-native/pull/11819

Differential Revision: D4752566

Pulled By: javache

fbshipit-source-id: 68ee28200ffeba859ae1b98ac753bd7dcb8910f0
2017-03-28 05:33:02 -07:00
Pieter De Baets 7c9173bc9e Enable -Wimplicit-retain-self en sync warning config for all projects
Summary:
This is enforced for all of our internal iOS code and a common cause of import failures.

cc janicduplessis
Closes https://github.com/facebook/react-native/pull/13124

Differential Revision: D4765016

fbshipit-source-id: 7c8248c98bca0fa6bad24d5a52b666243375e0db
2017-03-23 15:01:34 -07:00
Janic Duplessis 921b9ac53d Native Animated - Support multiple events attached to the same prop
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
2017-03-09 15:30:28 -08:00
Jiajie Zhu b87f4abf78 revert D4656347 to fix crashes
Reviewed By: jingc

Differential Revision: D4659669

fbshipit-source-id: 2c95c212a19cc8b67ce4ec62963c8374aecb3ef6
2017-03-06 11:15:45 -08:00
Janic Duplessis c708234f66 Native Animated - Support multiple events attached to the same prop
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
2017-03-05 10:16:57 -08:00
Mathieu Baudet 4a893ee071 remove unused includes in fbobjc/Libraries
Reviewed By: swolchok

Differential Revision: D4507573

fbshipit-source-id: 7fc6df52bc37c39698c7897be567758469417218
2017-02-19 18:33:49 -08:00
Ryan Gomba 7e869b9d0a Drive any numerical prop via NativeAnimated
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
2017-01-26 18:28:53 -08:00
Sokovikov e8a45c96a7 fix crash on reload during animation
Summary:
closes #11719

**Test plan (required)**

Cmd+r during native animation in uiexplorer
Closes https://github.com/facebook/react-native/pull/11720

Differential Revision: D4386449

fbshipit-source-id: a7b5ea2c77de260e8b95b5983438f9cef4d1d752
2017-01-05 21:59:19 -08:00
Pieter De Baets 59407f3660 Redo exported headers and include paths for opensource
Summary:
Xcode really sucks, per some discussion on e1577df1fd and https://developer.apple.com/library/content/technotes/tn2215/_index.html, if you use the headers phase, and mark headers in your static library as public, they will actually end up in the final package that's built and you can't submit to the app store! This changes our xcode setup to use a copy files phase instead.

I've also changed the header include path to be $(BUILT_PRODUCTS_DIR)/include, which is added to the include path by Xcode by default, so 3rd party libraries should not be impacted by these changes anymore.

Reviewed By: mkonicek

Differential Revision: D4291607

fbshipit-source-id: 969b9ebcbeb8161f85427f8c429e198d9d0fae30
2016-12-07 15:28:29 -08:00
Ryan Gomba c858420b2d Fix NativeAnimation invalidation & races on iOS
Summary:
This diff attempts to fix a number of iOS native animation bugs related to improper node invalidation and a race with view creation. The major issues were presented in #9120 as problems 3 and 3b, but I'll recap here:

The invalidation model we use is overly complicated and incomplete. The proper combination of `_needsUpdate` and `_hasUpdated` will result in nodes values being recomputed. However, we do not invalidate nodes in all the places we should, e.g. if we create a new view and attach it to an existing value node (see example in #9120). This diff chooses to remove the `_hasUpdated` flag, and simply relies on the `_needsUpdate` flag to mark a node as dirty.

We mark nodes as dirty when they are:
- created
- updated
- attached to new parents
- detached from old parents
- attached to a view

Calling `updateNodeIfNecessary` will, if necessary, compute all invalidated parent values before recomputing the node value. It will then apply the update, and mark the no
Closes https://github.com/facebook/react-native/pull/10663

Differential Revision: D4120301

Pulled By: mkonicek

fbshipit-source-id: e247afcb5d8c15999b8328c664b9f7e764d76a75
2016-11-28 11:13:31 -08:00
Pieter De Baets e1577df1fd Move all header imports to "<React/..>"
Summary:
To make React Native play nicely with our internal build infrastructure we need to properly namespace all of our header includes.

Where previously you could do `#import "RCTBridge.h"`, you must now write this as `#import <React/RCTBridge.h>`. If your xcode project still has a custom header include path, both variants will likely continue to work, but for new projects, we're defaulting the header include path to `$(BUILT_PRODUCTS_DIR)/usr/local/include`, where the React and CSSLayout targets will copy a subset of headers too. To make Xcode copy headers phase work properly, you may need to add React as an explicit dependency to your app's scheme and disable "parallelize build".

Reviewed By: mmmulani

Differential Revision: D4213120

fbshipit-source-id: 84a32a4b250c27699e6795f43584f13d594a9a82
2016-11-23 07:58:39 -08:00
Janic Duplessis b49e7afe47 Dispatch native handled events to JS
Summary:
When native events where handled they were not sent to JS as an optimization but this caused some issues. One of the major one is touches are not handled properly inside a ScrollView with an Animated.event because it doesn't receive scroll events so it can't cancel the touch if the user scrolled.
Closes https://github.com/facebook/react-native/pull/10981

Differential Revision: D4226403

Pulled By: astreet

fbshipit-source-id: 41278d3ed4b684af142d9e273b11b974eb679879
2016-11-23 05:43:35 -08:00
Pieter De Baets 7c91f894ba Fix CSSLayout import hack, update podspec
Summary: Correct header import paths, update podspec so we point at the copy in ReactCommon (and can eventually remove the copy under React)

Reviewed By: astreet

Differential Revision: D4204501

fbshipit-source-id: e979a010092f025b2cdc289e1e5f22fc7b65a8d1
2016-11-21 09:13:36 -08:00
Ryan Gomba 6535858c71 Add extractOffset to Animated
Summary:
`flattenOffset` has proven extremely useful, especially when dealing with pan responders and other gesture based animations, but I've also found a number of use cases for the inverse. This diff introduces `extractOffset`, which sets the offset value to the base value, and resets the base value to zero. A common use case would be to extractOffset onGrant and flattenOffset onRelease.
Closes https://github.com/facebook/react-native/pull/10721

Differential Revision: D4145744

fbshipit-source-id: dc2aa31652df0b31450556f611db43548180c7dd
2016-11-07 20:43:37 -08:00
James Ide fc11a5fde8 Add support for native animated events on iOS
Summary:
This adds native support for `Animated.event` on iOS.

**Test plan**
Tested in the native animated UIExplorer example that it works properly like on Android.
Closes https://github.com/facebook/react-native/pull/9598

Differential Revision: D4110331

fbshipit-source-id: 15748d23d0f475f2bcd1040ca3dca33e2620f058
2016-11-01 03:58:53 -07:00
Janic Duplessis cdd2d791c9 Support static values in NativeAnimated transforms on iOS
Summary:
Support static values (non-animated) in transform config like Android already does.

**Test plan**
Tested in UIExplorer native animated example by adding a transform with a static value and comparing with JS.
Closes https://github.com/facebook/react-native/pull/10664

Differential Revision: D4109515

fbshipit-source-id: 2d7de17d51d6df835c569fd45d2de8fc170bf928
2016-10-31 21:13:41 -07:00
Janic Duplessis 34c7e7610c Fix setAnimatedNodeValue in Native Animated on iOS
Summary:
`setAnimatedNodeValue` currently does not update views if there is no animation currently running. This simply updates the view immediately instead of relying on the animation loop. Extracted it out in a function to be able to use it for native `Animated.event` too.

**Test plan**
Tested this in an app using native driven animations with `NavigationCardStackPanResponder` that makes use of `setValue` to update `Animated.Values` during the back gesture.
Closes https://github.com/facebook/react-native/pull/10643

Differential Revision: D4106346

fbshipit-source-id: 7c639e03ded87058354340f1179f8b75be423e84
2016-10-31 14:28:42 -07:00
Ryan Gomba d950db4ef7 Add support for springs for NativeAnimated on iOS
Summary:
This diff adds support for native spring animations on iOS. This overlaps some spring work done by kmagiera on the Android side of things.

**Test plan (required)**

Run UIExplorer NativeAnimated examples before and after - compare the results. Pay special attention to the spring examples.
Closes https://github.com/facebook/react-native/pull/9048

Differential Revision: D4056088

Pulled By: foghina

fbshipit-source-id: a593408cb61cb850572bab4a0884f7157cece656
2016-10-21 04:29:03 -07:00
Ryan Gomba 5794ff61bc Add support for clamping for NativeAnimated on iOS
Summary:
This diff adds support for clamping on iOS. It separates out code originally submitted in #9048.

Test plan (required)

Run UIExplorer NativeAnimated examples before and after - compare the results. Pay special attention to the new clamped spring example.
Closes https://github.com/facebook/react-native/pull/9625

Differential Revision: D4053231

fbshipit-source-id: 29048de444ff5f6d7fe7dce7897399b483ee6d2d
2016-10-20 14:13:38 -07:00
Douglas Lowder 8622998335 Apple TV support 2: Xcode projects and CI (scripts/objc-test.sh)
Summary:
* Motivation *

Second PR for Apple TV support.

* Test plan *

Apple TV tests have been added to scripts/objc-test.sh
Closes https://github.com/facebook/react-native/pull/10227

Differential Revision: D3974064

Pulled By: javache

fbshipit-source-id: 36dffb4517efa489e40fa713a30655d1d76ef646
2016-10-05 07:28:44 -07:00
Kevin Gozali 0a0dd30c6a Introduced AnimatedDivision
Summary:
Combining 2 animated values via addition, multiplication, and modulo are already supported, and this adds another one: division.
There are some cases where an animated value needs to invert (1 / x) another animated value for calculation. An example is inverting a scale (2x --> 0.5x), e.g.:

```
const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
  toValue: 2,
}).start();
```

`b` will then follow `a`'s spring animation and produce the value of `1 / a`.

The basic usage is like this:

```
<Animated.View style={{transform: [{scale: a}]}}>
  <Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>
```

In this example, the inner image won't get stretched at all because the parent's scaling gets cancelled out.

Also added this to native animated implementation.

Reviewed By: foghina, mmmulani

Differential Revision: D3922891

fbshipit-source-id: 32508956c4b65b2deb7574d50a10c85b4809b961
2016-09-26 16:43:51 -07:00
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
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
Pieter De Baets 07553d0f1c Update React Native minimum OS version to iOS8
Reviewed By: majak

Differential Revision: D3723143

fbshipit-source-id: 482f9820370b752d937e6df7f74c33d53a0a2e7d
2016-09-01 19:43: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 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
Ryan Gomba bf82a8d1a8 Move RCTNativeAnimatedModule onto the main queue
Summary:
We're mutating dictionaries on one thread for bookkeeping (anytime we receive a call over the bridge) and iterating over them on the main thread each frame (in `updateAnimations`). Seems like this can all happen on the main thread without issue. Am I missing something?

**Test plan (required)**

Run UIExplorer NativeAnimated examples before and after - compare the results. Nothing should have changed.
Closes https://github.com/facebook/react-native/pull/9049

Differential Revision: D3682871

fbshipit-source-id: c6de62063e724b15b9678a9ef0290284e928b31b
2016-08-07 12:58:20 -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
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
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
Joel Arvidsson cc816fbd82 Harmonize native animation callback args with JS
Summary:
`Animated.parallel` among other functions expects the `start(callback)` function to be invoked with an `endState` object. Currently natively driven animations call the handler with `null`, this PR changes that to `{ finished: true }`.

**Test plan**

This should not throw any errors:
```js
Animated.parallel([
  Animated.timing(
    new Animated.Value(0),
    {
      toValue: 1,
      useNativeDriver: true
    }
  ),
  Animated.timing(
    new Animated.Value(0),
    {
      toValue: 1,
      useNativeDriver: true
    }
  )
]).start();
```
Closes https://github.com/facebook/react-native/pull/8567

Differential Revision: D3517291

Pulled By: javache

fbshipit-source-id: 0056a5b4261546b061451c0b1b249718739086bc
2016-07-05 11:13:23 -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