Commit Graph

53 Commits

Author SHA1 Message Date
Moti Zilberman 9b280ad1c5 Replace matchAll with exec
Summary:
When using the `g` modifier on the regex, match and matchAll's behaviour is equivalent, and match has better backwards compatibility on older iOS versions.

Changelog: [General][Fixed] Fixed a backwards compatibility issue with AnimatedInterpolation

Reviewed By: yungsters

Differential Revision: D41879036

fbshipit-source-id: 240dda85ef0de8e27452846c77114ac46823f74f
2022-12-13 02:45:49 -08:00
Sam Zhou ccefad049a Enable LTI in react-native
Summary: Changelog: [Internal]

Reviewed By: panagosg7

Differential Revision: D41788271

fbshipit-source-id: 8e40dc3279ee0283b2845b9559a80862fdf59a17
2022-12-06 19:34:14 -08:00
Pieter De Baets e7dbfb2dbd Support colors in AnimatedInterpolation on Android
Summary:
Color support for AnimatedInterpolation was incomplete with native drivers, as only rgba type strings were supported. There was also an issue where color props instead a StyleAnimatedNode would never get applied. We were also potentially duplicating color parsing support, which is already centralized in `normalizeColor` / `processColor`.

Changelog: [Android][Added] Enable AnimatedInterpolation to interpolate arbitrary color types.

Reviewed By: mdvacca

Differential Revision: D40571873

fbshipit-source-id: 41857ab0391279c5307bc31b855ea8fbcb4cccd8
2022-11-30 10:19:12 -08:00
Pieter De Baets b589123a3d Rewrite AnimatedInterpolation JS driver support for colors
Summary:
Restructured the JS implementation of AnimatedInterpolation to make it clearer how colors and other string-based interpolatables are supported. We're then able to use a very similar structure to implement this interpolation on the native driver as well, which simplifies implementation, and improves support for different color types.

Changelog: [General][Fixed] Improved support for AnimatedInterpolation of color props.

Reviewed By: mdvacca

Differential Revision: D40571890

fbshipit-source-id: 7c204a7b736722732dc5f9e0d158ef5af81b4bb1
2022-11-30 10:19:12 -08:00
Pieter De Baets dccb57fb50 Fix Animated.Color callbacks when switching between native colors
Summary:
Animated.Color was never calling `flush`, and thus didn't trigger any animated views to update when the Animated.Color had (a native-only) color change when using the JS driver.

Changelog: [General][Fixed] Improved handling of native colors in Animated.Colors

Reviewed By: mdvacca

Differential Revision: D41519965

fbshipit-source-id: 52f78460cf67ab9260d3868b0d27692b64fc3c58
2022-11-29 07:52:46 -08:00
Gabriel Donadel Dall'Agnol c06323f463 fix: Patch AnimatedStyle to avoid discarding the initial style info (#35198)
Summary:
This PR patches `AnimatedStyle` to avoid discarding the initial style information which destroys the output of web-style compilers and breaks rendering, as requested on https://github.com/facebook/react-native/issues/34425. This uses a slightly modified version of a patch used by react-native-web  https://github.com/necolas/react-native-web/commit/4c678d2912bddf30ad3d1f2c9a71f453d29427f0.

## Changelog

[General] [Fixed] - Patch AnimatedStyle to avoid discarding the initial style info

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

Test Plan:
Run `yarn jest Animated` and ensure CI is green

![image](https://user-images.githubusercontent.com/11707729/199869612-4f2302da-5791-492f-83a7-683305757c23.png)

Reviewed By: necolas

Differential Revision: D41379826

Pulled By: javache

fbshipit-source-id: 7e16726828b98def14847ec3499ff93777a9cbfb
2022-11-18 07:22:01 -08:00
Samuel Susla 49d5e7c519 Remove feature flag removeListenersOnDetach
Summary:
changelog: [internal]

Remove unused feature flag.

Reviewed By: yungsters

Differential Revision: D41188496

fbshipit-source-id: 13507197e7943aea9303ffb828feddb77c94ab0c
2022-11-15 06:30:42 -08:00
Pieter Vanderwerff 6743d15329 Enforce empty array providers in arvr/js
Summary: Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D41206042

fbshipit-source-id: 0d6a87fdb693a01a97783f5428111f428a94f80e
2022-11-10 18:52:53 -08:00
Pieter De Baets 9a87db266a Remove initialProps handling for legacy createAnimatedComponent
Summary: Changelog: [Internal] Remove additional Animated logic under Fabric that's no longer required

Reviewed By: jehartzog

Differential Revision: D40513977

fbshipit-source-id: 1e96366377ca4c3bf032d830b5641ab658462ce8
2022-10-24 05:58:05 -07:00
Jordan Brown 7884f6cfec Implicit instantiation codemod
Summary:
This diff adds explicit type arguments to polymorphic function calls that do not constrain their types. This codemod will reduce the error burden that will come in a future version of flow.

This specific diff was generated by running:
```
flow codemod annotate-implicit-instantiations --write .
flow --json --pretty | jq '.errors | .[] | .message | .[] | .loc |.source' | sort | uniq | sed -e 's/"//g' | xargs hg revert
hg st -n | xargs grep "generated" | sed -e 's/:.*//g' | xargs hg revert
arc f
```

So these are the codemod results that introduced no new errors and no generated files.

Changelog: [Internal]

drop-conflicts

Reviewed By: SamChou19815

Differential Revision: D40413074

fbshipit-source-id: 42b52719978f1098169662b503dbcfd8cefdad53
2022-10-19 10:25:09 -07:00
Samuel Susla cd8319433b Remove all listeners of AnimatedNode when detached
Summary:
changelog: [internal]

Removing listener on detached node leads to a red box, if the said node is `DiffClampAnimatedNode`. This is because calling `AnimatedNode.__getNativeTag()` makes native module call and creates node in native. This node is not completely initialised and red boxes because `[RCTAnimatedNode parentNodes]` is nil when it shouldn't be.

The fix is make sure all listeners are removed before node is destroyed. It is logically correct thing to do. The fix is global, for all components using `DiffClampAnimatedNode`.

Reviewed By: yungsters

Differential Revision: D40381895

fbshipit-source-id: 4f558faf8101b70552f30e6360998e902aacbc83
2022-10-17 05:59:03 -07:00
Fabrizio Cucci 7beaf3894e Extend AnimatedTransform to support transformation value arrays and objects
Summary:
Changelog:
[Internal][Added] - Add support for passing objects with `AnimatedNode` values and arrays of `AnimatedNode` elements in the `transform` styling prop.

Reviewed By: javache

Differential Revision: D40379943

fbshipit-source-id: 826b9cd0c0cfe02b55d86d1c735f8faf31196e64
2022-10-17 04:49:30 -07:00
Pieter De Baets 2f58e52006 Apply Animated initialProps handling to Fabric only (#34927)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/34927

The changes made in D36902220 (https://github.com/facebook/react-native/commit/a04195167bbd8f27c6141c0239a61a345cac5a88) and D36958882 (https://github.com/facebook/react-native/commit/d8c25ca1b62df2b93f70bbb1f7b379643ab9ccd4) attempted to reduce flickering and consistency issues when using Animated.

In the old renderer, we explicitly reset all animated props, and wait for the subsequent React commit to set the props to the right state, but if `initialProps` are used, the React reconciliation may not be able to identify the prop-update is required and will leave out the value. This behaviour is different in the new renderer, where we do not explicitly `restoreDefaultValues` on detaching the animated node, and instead rely on the latest state being correct(?).

Changelog:
[General][Fixed] Stop styles from being reset when detaching Animated.Values in old renderer

Fixes #34665

Reviewed By: rshest

Differential Revision: D40194072

fbshipit-source-id: 1b3fb1d1f4a39036a501a8a21e57002035dd5659
2022-10-11 03:35:58 -07:00
Tim Yung 494c47360f RN: Sort Imports via ESLint
Summary:
Applies the autofix from the newly introduced `lint/sort-imports` ESLint rule.

Changelog:
[Internal]

Reviewed By: cortinico, skinsshark

Differential Revision: D39907798

fbshipit-source-id: 17f5f11b08a5b4bb66286816b78eb26e07e829b8
2022-09-30 14:28:48 -07:00
Gabriel Donadel Dall'Agnol f63d4e7deb refactor: Convert Animated directory to use ESModule imports/exports (#34539)
Summary:
This PR refactors the Animated directory to use ESModule imports/exports instead of using a mixture of the 2 module formats, as requested on https://github.com/facebook/react-native/issues/34425.

## Changelog

[Internal] [Changed] - Convert all files in the Animated directory to use ESModule imports/exports

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

Test Plan: This doesn't really add or modify any existing features so checking if CI passes should be enough

Reviewed By: yungsters

Differential Revision: D39235720

Pulled By: yungsters

fbshipit-source-id: 84b4c0a71dc9fca1ab7053263f1cf7c336df58c1
2022-09-20 10:05:48 -07:00
Rubén Norte 699dabb2e3 Use findNodeHandle from RendererProxy instead of Paper in usages within the react-native package
Summary:
This replaces all direct references to `ReactNative` within the `react-native` package to use `findNodeHandle` with a reference obtained from `RendererProxy`, which will allow us to select the correct renderer.

Changelog: [internal]

Reviewed By: javache

Differential Revision: D39270689

fbshipit-source-id: a39875281ba7b7b1b00128564124b6adcacebc4d
2022-09-08 11:12:06 -07:00
Pieter Vanderwerff 3db19b464d Deploy 0.186.0 to xplat
Summary: Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D39185318

fbshipit-source-id: ca154a5c43eef3e30d5eab382947eedf30e9e850
2022-08-31 16:05:55 -07:00
Tim Yung b8425c8ee5 RN: Cleanup Existing ESLint Warnings
Summary:
Sometime over the past few months (and with changes such as migrating to the `hermes-eslint` parser), a bunch of lint warnings crept into the codebase.

This does a pass to clean them all up, ignore generated files, and refactor some code to be... better.

There should be no observable behavior changes as a result of this.

Changelog:
[Internal]

Reviewed By: NickGerleman

Differential Revision: D38646643

fbshipit-source-id: a7b55d1e4cd5700340cc5c21f928baf3ea1d5a58
2022-08-12 17:16:40 -07:00
Pieter Vanderwerff ee3d3c248d Add missing class annotations xplat/js
Reviewed By: SamChou19815

Differential Revision: D38373443

fbshipit-source-id: 1222c4845ebd6b72bd6f54af1a27cf8542dd883a
2022-08-03 12:43:58 -07:00
Pieter Vanderwerff e7a4dbcefc Add LTI annotations to function params in xplat/js [1/2]
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predicatable.

Reviewed By: evanyeung

Differential Revision: D37353648

fbshipit-source-id: e5a0c685ced85a8ff353d578b373f836b376bb28
2022-06-22 21:36:52 -07:00
Genki Kondo d8c25ca1b6 Use initial value of natively driven nodes on renders
Summary:
D36902220 (https://github.com/facebook/react-native/commit/a04195167bbd8f27c6141c0239a61a345cac5a88) changed Animated to only use value of natively driven nodes on initial render.

However, there remained a case where we could end up with a race condition between Fabric prop update (via SurfaceMountingManager.updateProps) and Animated (via NativeAnimatedNodesManager.runUpdates), when an animation on a node that was created natively is triggered close to render (such as in componentDidUpdate). This happens as Animated and Fabric aren't synchronized, and at the platform level, they do not know each other's state.

Say we have two items, where opacity is used to indicate whether the item is selected. On initial render, A's opacity is set to 1, and animated sets opacity to 1; B's opacity is set to 0, and animated sets opacity to 0. When B is selected (and causes A and B to rerender), A's opacity is now set to null, and animated sets opacity to 0; B's opacity is also now set to null, and animated sets opacity to 1. A's props have changed, and thus the default opacity value of 1 is applied via Fabric, but Animated also sets the opacity to 0 - either may end up being the value visible to the user due to the nondeterministic order of Fabric update props and Animated. This is what is causing T122469354.

This diff addresses this edge case by using the initial prop values for native animated nodes, for subsequent renders, to ensure that values of native animated nodes do not impact rerenders.

This diff also fixes a bug in OCAnimation where translateX/Y values of 0 in transition will result in render props containing translateX/Y instead of transform, resulting in potentially incorrect pressability bounds.

Changelog:
[Internal][Fixed] - Only use initial value of natively driven nodes on render

Reviewed By: JoshuaGross, javache

Differential Revision: D36958882

fbshipit-source-id: 10be2ad91b645fa4b8a4a12808e9299da33aaf7d
2022-06-07 20:02:57 -07:00
Genki Kondo a04195167b Only use value of natively driven nodes on initial render
Summary:
D36612758 (https://github.com/facebook/react-native/commit/40f4c662bc7a66e5caea4909d74f435f5b72190c) attempted to remove the check that the animated node was native when fetching animated prop values for render, in order to fix an issue that arises when a node is converted to native before the initial call to render to mount the component, where the initial value is not applied.

However, this causes issues for cases where we call setValue on an animated node soon after render, such as on componentDidUpdate. setValue first updates the animated node value on JS side, then calls the native API setAnimatedNodeValue. The problem is that the next render will then use these updated values in the style props (because we removed the check for native in D36612758 (https://github.com/facebook/react-native/commit/40f4c662bc7a66e5caea4909d74f435f5b72190c)), resulting in a diff in props. Since Animated and Fabric aren't synchronized, there's a race condition between SurfaceMountingManager.updateProps and NativeAnimatedNodesManager.runUpdates

To allow proper rendering of initial values of native animated nodes, and mitigate the issue when calling setValue on an animated node soon after render, during initial render we use the initial values of both native and non-native driven nodes, and on subsequent renders we only use the initial values of non-native driven nodes.

An alternative considered was to add internal state to the nodes themselves (AnimatedProps, AnimatedStyle), but keeping it in sync with the component state is not easy/clean as AnimatedProps can be recreated and reattached at any time for a mounted component.

Changelog:
[Internal][Fixed] - Only use value of natively driven nodes on initial render

Reviewed By: JoshuaGross

Differential Revision: D36902220

fbshipit-source-id: c20f711aa97d18a2ed549b5f90c6296bf19bb327
2022-06-03 13:33:50 -07:00
Genki Kondo 40f4c662bc Set correct initial value for AnimatedComponent for styles backed by native animated nodes
Summary:
In AnimatedComponent.render, we get the initial values of any styles backed by AnimatedNode, but ONLY for non-native animations. Thus, if convert an animated node to native before the call to render to mount the component, we will end up not applying the initial value until after the component is mounted. This may result in a visible flicker as the expected value is applied some time after the component is mounted and visible.
- Without native driver: BaseViewManager.setTransform called during view preallocation (ViewManager.createViewInstance)
- With native driver: BaseViewManager.setTransform called during MountingManager.updateProps (called from PropsAnimatedNode.updateView)

This diff removes the isNative check in AnimatedStyle and AnimatedProps when traversing style props. This shouldn't be a problem:
- Created as non-native, animated with JS driver
  - This diff does not affect this scenario
- Created as non-native, animated with native driver
  - Initial value is applied correctly on render/mount. On subsequent renders, the outdated value from JS side will not apply on the platform view as it has not changed.
- Created as native, animated with native driver
  - Initial value is applied correctly on render/mount. On subsequent renders, the outdated value from JS side will not apply on the platform view as it has not changed.

Changelog:
[Internal][Fixed] - Set correct initial value for AnimatedComponent for styles backed by native animated nodes

Reviewed By: JoshuaGross, javache

Differential Revision: D36612758

fbshipit-source-id: 922d6534c605b3eb0a1d9476753111b726f138f2
2022-05-25 10:33:17 -07:00
Pieter De Baets 406a474e52 Correctly batch AnimatedColor updates
Summary:
Call `setWaitingForIdentifier` before we do any `setValue` calls to make sure we execute them together (and only call start/finish batch once). Only calll `updateAnimatedNodeConfig` conditionally when we changed nativeColor.

Changelog: [Internal]

Reviewed By: JoshuaGross

Differential Revision: D36517302

fbshipit-source-id: ecbae2d1df69e4456620c58a922275406e22a2f8
2022-05-23 07:57:42 -07:00
Genki Kondo 73191edb72 Add optional configs to constructors for AnimatedValue/ValueXY/Color
Summary:
There are use cases of needing to setValue multiple times per second (for example, using PanResponder to update a slider component).

This requires the use of the native driver for perf reasons as using the JS driver will cause a rerender. Currently, the only way to make an animated node native is via setting useNativeDriver: true on an animation config. For example:
```
Animated.timing(animatedValue,
{
  toValue: newValue,
  duration: 0,
  useNativeDriver: true
}).start();
```

To avoid needing to call the above, add a useNativeDriver param to the constructor. When set to true, the node will be made native immediately.

```
const animatedValue = new Animated.Value(0, useNativeDriver);
...
animatedValue.setValue(newValue);
```

Note that, like with useNativeDriver in the animation config, once a node is made native, it cannot be reverted to JS-only.

 ---

As an aside, PanResponder uses JS-side events, and thus we cannot use Animated.event with native driver; we instead need to setValue on a native AnimatedValue. A much more thorough explanation is in D34564598.

 ---

Changelog:
[General][Added] - [Animated] Add useNativeDriver as a param for setValue

Reviewed By: JoshuaGross

Differential Revision: D36459457

fbshipit-source-id: 284148a6d16537429efeab8b07184019990909cd
2022-05-20 10:42:40 -07:00
George Zahariev 20d9d3aa6a Fixes to non-product code (e.g React Native)
Summary:
We are working on making the empty object literal `{}` have the type `{}` - i.e. exact empty object - rather than being unsealed.

Some manual fixes, in particular to React Native code, which is used and can be synced to other repos (e.g. WWW).

With these changes, error diff in Xplat is down to ~1990 errors

Note that after I roll out `exact_empty_objects`, I'll codemod all the `{...null}` (the only way to get an exact empty object currently) back to `{}`

Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D36142838

fbshipit-source-id: 054caf370db230f42a4c5f5706c88979ef246537
2022-05-04 16:13:07 -07:00
George Zahariev 0337a2981d Add annotations to empty objects that look like indexers in Xplat
Summary:
We are working on making the empty object literal `{}` have the type `{}` - i.e. exact empty object - rather than being unsealed.
Making this change exposes a variety of errors. We can prevent these errors by annotating what we want the type of the empty object to be.

Reduces Xplat error diff to 2.3k

- Announcement: [post](https://fb.workplace.com/groups/flowlang/posts/903386663600331)
- Support group: [Flow Support](https://fb.workplace.com/groups/flow)

drop-conflicts

Format:
```
arc f
```
Sort imports
```
hg l -n | xargs js1 lint --fix --rule 'fb-tools/sort-requires'
```

Changelog: [Internal]

Reviewed By: samwgoldman

Differential Revision: D36086696

fbshipit-source-id: 90447279f2e6e38f44189b74ec0297719f7adf58
2022-05-03 19:59:28 -07:00
Moti Zilberman 7b86fa2b79 Distinguish between string/number-valued interpolation nodes at the type level
Summary:
Changelog:
[General][Fixed] - Improved Flow type inference in Animated `.interpolate()`

Improves the ergonomics of `.interpolate()` by allowing Flow to infer the correct type for `outputRange`. This is achieved by adding a new type parameter `OutputT` to `interpolate()` (and `Animated.Interpolation` and `InterpolationConfigType`), which Flow infers as either `number` or `string` based on usage.

Admittedly, at the call site, this is not that much safer compared to something like `outputRange: $ReadOnlyArray<number | string>`, but it does document the intent of the API a bit better and provide some downstream type safety. For example, we can now express `Animated.Number` (D35869375) more precisely by excluding string-valued interpolation nodes.

Reviewed By: javache

Differential Revision: D35869725

fbshipit-source-id: e03ec22e9b3368ee196b392af011062ac99d8bb9
2022-05-03 12:04:02 -07:00
almouro f503b21203 improve interpolation performance with big input range (#33598)
Summary:
This drastically improves `Animated.interpolate` performance when `inputRange` has a considerable amount of elements (~100 in my tests).

For instance in `ActivityIndicator` inside `react-native-paper`, the input has 144 elements https://github.com/callstack/react-native-paper/blob/main/src/components/ActivityIndicator.tsx#L170. `react-native-elements` has 9k stars, so I'm assuming this is widely used.

### Cause

The reason for the performance drop is that if we assume `n` to be the size of the range, calculating `'inputRange must be monotonically non-decreasing ' + arr` essentially calculates `arr.toString()` which has O(n) complexity.
Since it is recalculated in a for loop, we end up with `checkValidInputRange` having a O(n²) complexity. Which means ~10k operations if the array has a size close to 100.

## Changelog

[General] [Fixed] - Fix performance issue on Animated.interpolate with big input range

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

Test Plan:
[Here's a repo](https://github.com/Almouro/AnimatedInterpolationRepro) reproducing the issue.
The branch `fix` includes the fix.
Clicking `Interpolate` runs:

```js
new Animated.Value(0).interpolate({
  inputRange: Array(144)
    .fill()
    .map((_, i) => 1 / (i + 1))
    .reverse(),
  outputRange: Array(144)
    .fill()
    .map((_, i) => 1 / (i + 1))
```

Here's a comparison of JS thread perf before the fix and after the fix:
- on a Samsung J3 2017 (lower end)
- using Flipper and https://github.com/bamlab/react-native-performance)
- ` __DEV__` mode deactivated
- clicking the button and waiting 15s

| Before   |      After      |
|----------|:-------------:|
| ![image](https://user-images.githubusercontent.com/4534323/162413692-307c2be1-5c7f-4e7f-ba69-8ba8d7c52bda.png) |  ![image](https://user-images.githubusercontent.com/4534323/162413842-780f12d2-ce8b-457c-b66c-c6d86f14ed28.png)|

The error still throws if `inputRange` is incorrect:

<img width="517" alt="image" src="https://user-images.githubusercontent.com/4534323/162439219-6ce120ae-98e5-496b-899a-492978689d6d.png">

However if `__DEV__` mode is deactivated, no error is thrown

Reviewed By: yungsters

Differential Revision: D35507441

Pulled By: javache

fbshipit-source-id: 36ac49422f7a42d247130c42d12248b2be1232c6
2022-04-11 10:37:33 -07:00
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