Summary:
Re-applying the diff that was reverted in D4659669 / b87f4abf78 because of some crashes with fixes from D4659708 merged in.
---
Fixes a bug that happens when trying to use ScrollView with sticky headers and native `Animated.event` with `onScroll`. Made a few changes to the ListViewPaging UIExplorer example to repro https://gist.github.com/janicduplessis/17e2fcd99c6ea49ced2954d881011b09.
What happens is we need to be able to add multiple events to the same prop + viewTag pair. To do that I simple changed the data structure to `Map<prop+viewTag, List<AnimatedEventDriver>>` and try to optimize for the case where there is only one item in the list since it will be the case 99% of the time.
**Test plan**
Tested by reproducing the bug with the above gist and made sure it was fixed after applying this diff.
Closes https://github.com/facebook/react-native/pull/12697
Reviewed By: fkgozali
Differential Revision: D4661105
Pulled By: sahrens
fbshipit-source-id: c719dc85f45c1a142ef5b9ebfe0a82ae8ec66497
Summary:
Fixes a bug that happens when trying to use ScrollView with sticky headers and native `Animated.event` with `onScroll`. Made a few changes to the ListViewPaging UIExplorer example to repro https://gist.github.com/janicduplessis/17e2fcd99c6ea49ced2954d881011b09.
What happens is we need to be able to add multiple events to the same prop + viewTag pair. To do that I simple changed the data structure to `Map<prop+viewTag, List<AnimatedEventDriver>>` and try to optimize for the case where there is only one item in the list since it will be the case 99% of the time.
**Test plan**
Tested by reproducing the bug with the above gist and made sure it was fixed after applying this diff.
Closes https://github.com/facebook/react-native/pull/12697
Differential Revision: D4656347
Pulled By: sahrens
fbshipit-source-id: b5c36ba796f478e56028c7a95bc0f86bc54cb2ce
Summary:
In theory, we should be able to animate any non-layout property, including custom ones. While there is still work to be done on the native side to fully enable this, we should start by dropping the prop whitelist.
Closes https://github.com/facebook/react-native/pull/10658
Differential Revision: D4379031
Pulled By: ericvicenti
fbshipit-source-id: fe9c30ea101e93a8b260d7d09a909fafbb82fee6
Summary:
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
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
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
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
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
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
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
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
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
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
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
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
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
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:
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
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
Janic Duplessis
Jiajie Zhu
Ryan Gomba
Sokovikov
Pieter De Baets
James Ide
Kevin Gozali
Brandon Withrow