Commit Graph
24 Commits
Author SHA1 Message Date
Genki Kondo 47820cba39 Optimize AnimatedColor when setting platform color
Summary:
Before, when we called setValue with a PlatformColor, we unnecessarily called setValue on all component AnimatedValues before updateAnimatedNodeConfig.

This diff also fixes a bug where if we set a PlatformColor as the initial color, calling setValue with a non-PlatformColor would not have any effect. The fix is to reset AnimatedColor.nativeColor to null upon calling setValue.

Changelog:
[Internal] Optimize AnimatedColor when setting platform color

Reviewed By: javache

Differential Revision: D34187540

fbshipit-source-id: a0005d13f392a858d2eade912f2353f67eec1fd9
2022-02-14 11:15:19 -08:00
Genki Kondo bb435a2b11 Support AnimatedColor.setValue for platform colors
Summary:
In order to support AnimatedColor.setValue for platform colors, we need to pass the platform color object to the native animated node which will then resolve and apply the color.

Thus, the approach is:
- Add a new API updateAnimatedNodeConfig to NativeAnimatedModule
- [JS] On AnimatedColor.setValue, if the value is a platform color, then we call updateAnimatedNodeConfig
- [Android] We introduce AnimatedNodeWithUpdateableConfig interface with a method updateConfig. On ColorAnimatedNode.java, we use updateConfig to resolve and apply the color

Changelog:
[Internal][Fixed] - Use context from view when resolving platform color

Reviewed By: javache, mdvacca

Differential Revision: D34025193

fbshipit-source-id: 8b368f6b7cb2cf7cebe8b66461cd4185cbadd44c
2022-02-08 16:31:14 -08:00
Moti Zilberman 6584304c10 Make Animated.Interpolation config read-only
Summary:
Changelog:
[General] [Changed] Type the argument of Animated.interpolate as read-only

Reviewed By: javache

Differential Revision: D33950698

fbshipit-source-id: b959d34eb9752358f4a8ba1d290b56c099f535e0
2022-02-03 03:45:23 -08:00
Genki Kondo 1f778014a7 Fix JS animated node value updating when listener is attached
Summary:
The JS-side animated node values were not being updated on AnimatedValue (and thus AnimatedValueXY); however, the native event "onAnimatedValueUpdate" is being handled properly in AnimatedNode. It turns out that single underscore prefixed methods are obfuscated at FB. And thus AnimatedValue._onAnimatedValueUpdateReceived was not getting called. Changing the method name to double underscore as a way to denote "protected" fixes the issue.

Changelog:
[General][Fixed] - JS animated node value updates properly when listener is attached

Reviewed By: yungsters

Differential Revision: D33962038

fbshipit-source-id: c4f60e1f1ccc0cef3e65b89034bdb91376a26416
2022-02-02 19:56:43 -08:00
Genki Kondo cb42049e0a Support platform color with AnimatedColor on Android
Summary:
Adds support for platform colors in AnimatedColor.
Passes the processed native color object to the native ColorAnimatedNode via the native config; ColorAnimatedNode then uses ColorPropConverter.getColor to resolve the resource path.

Note: setting a platform color via setValue on an existing AnimatedColor is not supported yet

Changelog:
[Android][Added] - Support platform color with AnimatedColor

Reviewed By: yungsters

Differential Revision: D33922266

fbshipit-source-id: 04d39a5ce0872b31d06ffbd4639d2f2213cf3314
2022-02-01 16:12:30 -08:00
Genki Kondo 3f49e6763e Support color animation with native driver for Android
Summary:
Adds support for Animated.Color with native driver for Android. Reads the native config for the rbga channel AnimatedNodes, and on update(), converts the values into an integer (0xaarrggbb)

Followup changes will include support for iOS and platform colors.

Changelog:
[Android][Added] - Support running animations with AnimatedColor with native driver

Reviewed By: javache

Differential Revision: D33833600

fbshipit-source-id: 2bf05c9715b603cf014ace09e9308b2bfd67f30a
2022-01-29 13:51:41 -08:00
Genki Kondo d3a0c4129d Support string color values in Animated.Color
Summary:
In addition to rgba values, allow creating Animated.Color with a string color.

Followup changes will include support for platform colors and native driver.

Changelog:
[General][Added] - Support string color values in Animated.Color

Reviewed By: javache

Differential Revision: D33810717

fbshipit-source-id: 208bc2675b6153a515fbf2122da15a065c473e73
2022-01-27 17:36:35 -08:00
Genki Kondo ea90a76efe Initial non-native implementation of AnimatedColor
Summary:
Creates Animated.Color for animating color props.

Implement AnimatedColor, which basically consists of 4 AnimatedValues (along the same vein as ValueXY) which allows us to just use AnimatedValue's interpolation. Provides a string color value of shape 'rgba(r, g, b, a)'

AnimationNode DAG looks like:

{F696076974}

Followup changes will include support for string color values, platform colors, and native driver.

Changelog:
[General][Added] - New Animated.Color node

Reviewed By: mdvacca

Differential Revision: D33778456

fbshipit-source-id: 83ddbc955156bf589c864f229a5f83fe6875fd0e
2022-01-27 13:37:59 -08:00
Genki Kondo 8858c21124 Make sure that AnimatedTracking is started when CompositeAnimation.start is called
Summary:
In Animated, when a toValue of AnimatedValue (as opposed to a number) is passed in, the [AnimatedValue starts tracking via AnimatedTracking](https://www.internalfb.com/code/fbsource/[b688f3747a706236fce300636978ed1ca5e4081a]/xplat/js/react-native-github/Libraries/Animated/AnimatedImplementation.js?lines=142) but it doesn't actually start animating even if start() is called on the animation.

This behavior is inconsistent with a toValue of a number, which executes immediately on start(). This diff adds a call to AnimatedTracking.update within AnimatedValue.track, which starts the tracking animation.

Changelog:
[General][Fixed] - Fixes execution of animation when a toValue of AnimatedValue is used.

Reviewed By: JoshuaGross

Differential Revision: D33800373

fbshipit-source-id: 85ee6f51bc2bb2e078b586b076a8d1dfe92c1155
2022-01-26 21:23:54 -08:00
Eric Rozell 4a227ce2ab Add platformConfig to native animations and nodes (#32736)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/32736

The ability to pass an additional property bag to further configure NativeAnimated is useful for a few reasons, e.g., experimentation with multiple implementations of the NativeAnimated module.

The specific use case this solves is on react-native-windows, where there are two underlying animation graph options, one "optimized" animation graph that uses UI.Composition, and another similar to the approach to iOS and Android that uses a frame rendering callback.

The platform configuration can be supplied to the animation node when `useNativeDriver` is set to `true`, and we pass the platform configuration object to the connected AnimatedValue and all it's children.

Changelog:
[General][Added] - Option to supply `platformConfig` to NativeAnimated

Reviewed By: yungsters

Differential Revision: D32988285

fbshipit-source-id: ab8a7bbf197573fc9e9a4737c255f124321295ac
2022-01-19 19:45:21 -08:00
Andres Suarez 8bd3edec88 Update copyright headers from Facebook to Meta
Reviewed By: aaronabramov

Differential Revision: D33367752

fbshipit-source-id: 4ce94d184485e5ee0a62cf67ad2d3ba16e285c8f
2021-12-30 15:11:21 -08:00
Eric Rozell fe53cae954 Deduct offset from getValue result when detaching
Summary:
The NativeAnimated `getValue` API returns `value + offset`:
Android:
iOS: https://github.com/facebook/react-native/blob/main/Libraries/NativeAnimation/Nodes/RCTValueAnimatedNode.m#L44
Android: https://github.com/facebook/react-native/blob/main/ReactAndroid/src/main/java/com/facebook/react/animated/ValueAnimatedNode.java#L36

When we store the value after detaching the NativeAnimated node, it stores the result of the NativeAnimated `getValue` call to the `_value` property, so if we call `__getValue` at some later point on the `AnimatedValue`, we will count the offset twice.

This change deducts the offset value from the result returned from `getValue` when storing the latest value.

Changelog:
[General][Fixed] - AnimatedValue.__detach should store getValue result with offset deducted

Reviewed By: yungsters

Differential Revision: D32987003

fbshipit-source-id: 488d1fe512f886c7a9de1e5a4de8f19441ebd81e
2021-12-10 08:07:38 -08:00
Eric Rozell 8ba771c3dd Fire AnimatedValue.stopAnimation callback with correct native value
Summary:
AnimatedValue fires a callback with the current value (raw value + offset) after calling it's `stopAnimation` method. The `_value` field on the `AnimatedValue` node is not necessarily kept in sync with the NativeAnimated value node, so the value provided to the callback may be out of sync.

This change checks if the `AnimatedValue` is a native node and passes the callback to the `NativeAnimatedAPI.getValue` callback, defaulting to the previous current JS node state if the node is not native.

Changelog:
[General][Fixed] - AnimatedValue.stopAnimation callback with correct value for NativeAnimated

Reviewed By: yungsters

Differential Revision: D32968572

fbshipit-source-id: b83f86eabe5456f762a15bc29cacb43f84513f6c
2021-12-09 11:40:13 -08:00
Genki Kondo f8fc90546c Fix reference URLs in Animated
Summary:
Fix reference URLs in Animated library

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D32507849

fbshipit-source-id: ec10202b0f07305e74c787d818fa1f288b775673
2021-11-17 20:35:19 -08:00
Evan Yeung 037e346197 Add LTI annotations to xplat/js
Summary:
This diff runs the codemod to add type annotations to function parameters in preparation for Flow's local type inference (LTI) project. I ran the codemod over xplat/js and reverted any files that had flow errors in them. See the list of commands run to see the regeneration of various files.

Changelog:
[Internal][Changed] - Added type annotations

Reviewed By: yungsters

Differential Revision: D32075270

fbshipit-source-id: 6a9cd85aab120b4d9e690bac142a415525dbf298
2021-11-10 15:40:15 -08:00
Evan Yeung 83a1791991 Manually fix types for LTI annotations in xplat/js
Summary:
This diff makes the manual changes necessary to fix many of the errors in the stacked diff codemod.

See https://fb.workplace.com/groups/flowlang/posts/917522612186736 for details on this effort.

Reviewed By: bradzacher

Differential Revision: D31615035

fbshipit-source-id: 179b2df516833d59873b9003350f81eb4a6b4e9d
2021-11-10 15:40:15 -08:00
Tim Yung 77ecc7ede1 JS: Format with Prettier v2.4.1 [3/n]
Summary:
Changelog:
[General][Internal]

Reviewed By: zertosh

Differential Revision: D31883447

fbshipit-source-id: cbbf85e4bf935096d242336f41bf0cc5d6f92359
2021-11-02 22:14:16 -07:00
Daniel Sainati 74d5d03dbd pre-suppress Flow errors in xplat ahead of 153 release
Summary:
This pre-suppresses the 153 error diff ahead of its release, since it is large.

Changelog: [Internal]

Reviewed By: mroch

Differential Revision: D28754374

fbshipit-source-id: 1806f53bc7d804644d434583a2dcd6da63d00328
2021-06-01 09:01:26 -07:00
Tien Pham 129180c77b Fix natively driven animations not getting reset properly (#29585)
Summary:
Fixes https://github.com/facebook/react-native/issues/28517

Animated.loop needs to reset the animation after each iteration but currently, natively driven animations are not getting reset properly.
## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Fixed] - Fix natively driven animations not getting reset properly

Pull Request resolved: https://github.com/facebook/react-native/pull/29585

Test Plan: Tested within RNTester

Reviewed By: kacieb

Differential Revision: D28383538

Pulled By: yungsters

fbshipit-source-id: 40790ad8f825c402afc3515ef6afc00570704109
2021-05-13 00:43:47 -07:00
Tim Yung faf4550047 Animated: Decouple __attach from new AnimatedProps
Summary:
Decouples `__attach` from the constructor in `AnimatedProps`.

This change will enable the instantiation of `AnimatedProps` (and subsequent invocation of `__getValue()`) without having to trigger side effects until after mount or update. This is important in order for `Animated` to ever become safe for Concurrent Mode.

Changelog:
[Internal]

Reviewed By: lunaleaps

Differential Revision: D28271628

fbshipit-source-id: 6ccfed6de79382cecdfa6939c7dad3134e1ecaaa
2021-05-10 17:02:59 -07:00
Andrei Shikov 382e90c0dd Batch Animation setValue call in a separate batch
Summary:
NativeAnimationModule on Android is using batches to combine related updates together. In Fabric, this process is controlled by JS, which schedules starts batching when Animated component props are about to be updated.

In rare cases when there's no prop update (like calls to `setValue` on `AnimatedValue`), changes weren't applied until the next batch was scheduled. This change ensures that such changes get applied directly.

This problem doesn't happen on iOS or non-Fabric surfaces, because they use per-frame scheduling instead.

Changelog: [Internal]

Reviewed By: JoshuaGross

Differential Revision: D28100641

fbshipit-source-id: 87b3acb3a8de131cdcb2104dc121d40eccfbc29d
2021-04-30 10:21:36 -07:00
Luna Wei bac2c2c801 Update FlowFixMes to use error codes in react-native-github
Summary:
Changelog:
[Internal] - Add error codes to existing FlowFixMe's

Reviewed By: kacieb

Differential Revision: D27445689

fbshipit-source-id: 2b19692e1cb822ab6785efcc5f93ee33e7dce1e5
2021-03-31 18:21:47 -07:00
Valentin Shergin 27378b7f10 Animated: Early detection of division by zero in AnimatedDivision
Summary:
Same as D20969087 (https://github.com/facebook/react-native/commit/be7867375580ed391bb10c50b768d998087e848d) but a bit more sophisticated.

We currently see a lot of errors happens because of division by zero in AnimatedDivision module. We already have a check for that in the module but it happens during the animation tick where the context of execution is already lost and it's hard to find why exactly it happens.
Adding an additional check to the constructor should trigger an error right inside render function which should make the error actionable.

Changelog: [Internal] Fabric-specific internal change.

Reviewed By: fkgozali

Differential Revision: D23908993

fbshipit-source-id: d21be9a72ec04fe4ff0740777d9ff49cf1bcde73
2020-09-26 17:23:15 -07:00
Tim Yung 9c9e677918 RN: Remove react-animated Legacy Package
Summary:
Removes the legacy `react-animated` package configuration and collapses the `Animated/src/` directory into `Animated/`.

Also, reconfigures all references to `Animated/src/` to just be `Animated/`.

Changelog:
[Internal]

Reviewed By: cpojer

Differential Revision: D22450848

fbshipit-source-id: 9fd4861e9f357d817d82e9fec71967a2936a3830
2020-08-25 14:15:35 -07:00