Commit Graph
422 Commits
Author SHA1 Message Date
Ethan ZhuandFacebook GitHub Bot 3b0c65583d Suppress useNativeDriver is not supported warning
Summary:
Changelog:
[Internal] - Suppress unnecessary warning for native module in jest tests

Reviewed By: yungsters

Differential Revision: D40653968

fbshipit-source-id: ff3d894c36a18943a7b3fd061f52b65685a481a6
2022-10-25 11:45:17 -07:00
Pieter De BaetsandFacebook GitHub Bot 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
Sam ZhouandFacebook GitHub Bot 466ba91657 Implicit instantiation codemod
Summary: Changelog: [Internal]

Reviewed By: bradzacher

Differential Revision: D40543059

fbshipit-source-id: 4d10671d8f2734b47d2aa86646be7f543a174515
2022-10-20 19:06:09 -07:00
Jordan BrownandFacebook GitHub Bot 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
Fabrizio CucciandFacebook GitHub Bot e22217fe8b Add useAnimatedValue to public API
Summary:
Changelog:
[General][Added] - Introduce `useAnimatedValue` hook to make it easier working with `Animated.Value`s in function components.

Reviewed By: javache

Differential Revision: D40434219

fbshipit-source-id: 3caf6ad98d11a534b8cc6816820bc1d125150380
2022-10-18 04:22:58 -07:00
Samuel SuslaandFacebook GitHub Bot 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 CucciandFacebook GitHub Bot 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
Sam ZhouandFacebook GitHub Bot 3e58a9c531 Deploy 0.190.0 to xplat
Summary: Changelog: [Internal]

Reviewed By: jbrown215

Differential Revision: D40393734

fbshipit-source-id: cc7a5e1fd28512c8141a0f705580a447efcd5575
2022-10-14 14:07:54 -07:00
Jiamin ZhuandFacebook GitHub Bot 4631cf933e Revert D40374535: Deploy 0.190.0 to xplat
Differential Revision:
D40374535 (https://github.com/facebook/react-native/commit/5359f1de12c9ef1924926c881e6752016f245913)

Original commit changeset: 92788a21a4f2

Original Phabricator Diff: D40374535 (https://github.com/facebook/react-native/commit/5359f1de12c9ef1924926c881e6752016f245913)

fbshipit-source-id: a0115dc24590bc50fa1aee2770dbb13b2edaf580
2022-10-14 10:45:04 -07:00
Sam ZhouandFacebook GitHub Bot 5359f1de12 Deploy 0.190.0 to xplat
Summary: Changelog: [Internal]

Reviewed By: mvitousek

Differential Revision: D40374535

fbshipit-source-id: 92788a21a4f22628782735dfb60d51661d6b27fa
2022-10-14 09:01:51 -07:00
Pieter De BaetsandFacebook GitHub Bot 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
Sam ZhouandFacebook GitHub Bot abb21dd908 Annotate empty objects in xplat
Reviewed By: pieterv

Differential Revision: D40134090

fbshipit-source-id: 3dd0bdb41ed559d9f72f0ff35c14e5551789fcc0
2022-10-06 13:19:11 -07:00
Sam ZhouandFacebook GitHub Bot b56d709e6e Annotate useCallback in xplat (11/n)
Summary:
Add explicit annotations to useCallback as 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 predictable.

Codemod command: `flow codemod annotate-use-callback`

drop-conflicts
bypass-lint

Changelog: [Internal]

Reviewed By: evanyeung

Differential Revision: D40079418

fbshipit-source-id: 59750a5d07b2ac1f440927794a7523682f048a5e
2022-10-04 18:51:59 -07:00
Tim YungandFacebook GitHub Bot 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
Nick GerlemanandFacebook GitHub Bot 8cdc9e7f04 Place TypeScript Declarations Alongside Source Files
Summary:
React Native's TS definitions are currently mostly stored in one monolithic file. This change splits the definitions up to correspond to the source files they came from, and are placed next to the source files. I think this should help inform, and make it easy to update the TS declarations when touching the Flow file.

I noticed as part of the change that the typings have not yet removed many APIs that were removed from RN. This is bad, since it means using the removed/non-functional API doesn't cause typechecker errors. Locating typings next to source should prevent that from being able to happen.

The organization here means individual TS declarations can declare what will be in the RN entrypoint, which is a little confusing. Seems like a good potential next refactor, beyond the literal translation I did.

Changelog:
[General][Changed] - Place TS Declarations Alongside Source Files

Reviewed By: lunaleaps, rshest

Differential Revision: D39796598

fbshipit-source-id: b36366466fd1976bdd2d4c8f7a4104a33c457a07
2022-09-26 12:09:45 -07:00
Sharon ZhengandFacebook GitHub Bot 77e79d6308 Animated.ScrollView with RefreshControl applying Animated transform twice
Summary:
There was a bug on Android when an Animated.ScrollView had a RefreshControl while an Animated style was applied, ie `transform`:
```
<Animated.ScrollView
  refreshControl={<RefreshControl />}
  style={{
    transform: [{
      translateY: new Animated.Value(200, {useNativeDriver: true})
    }]
  }}
/>
```

The transform value was being incorrectly applied twice. Since the styles were applied once on RefreshControl and once on NativeScrollView, the transform style is effectively applied twice:

**1. ScrollView.js**
- RefreshControl gets the transform through Fabric commit
- [The RefreshControl gets wrapped around ScrollView](https://fburl.com/code/k60krxbj) while on iOS there is no change in the parent/child relationship. [Outer/inner styles are split and applied to RefreshControl/ScrollView](https://fburl.com/code/b2to75er), and transform styles are applied on the parent (RefreshControl)

**2. createAnimatedComponent.js**
- NativeScrollView gets the transform through Animated
- [ScrollView forwards its ref to NativeScrollView](https://fburl.com/code/w1whtl5f), which means AnimatedComponent is setting the transform styles on NativeScrollView and not RefreshControl as ScrollView.js did

This diff fixes this bug by using the `useAnimatedProps` hook which makes both RefreshControl and ScrollView components into animated components. Otherwise, the components don't know what to do with Animated values.
 ---
Changelog:
[Internal][Fixed] - Animated transform style properties were being applied twice when used on an Animated.ScrollView with RefreshControl on Android

Reviewed By: javache

Differential Revision: D38815633

fbshipit-source-id: 2b76639d2237176b6aae4fb1e22cf1a1ec70a69a
2022-09-26 11:28:56 -07:00
Gabriel Donadel Dall'AgnolandFacebook GitHub Bot 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
Rujin CaoandFacebook GitHub Bot b2ac528156 @emails -> @oncall (remaining ones)
Differential Revision: D39536169

fbshipit-source-id: 6c8d6787328eefecd23f3498b14a6d9ff750a670
2022-09-15 15:54:10 -07:00
Rubén NorteandFacebook GitHub Bot 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 VanderwerffandFacebook GitHub Bot 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
Samuel SuslaandFacebook GitHub Bot b3e8c0fbf9 Flush animation queue directly in useAnimatedProps
Summary:
changelog: [internal]

Call flushQueue directly from useAnimatedProps to avoid mismatch between `NativeAnimatedHelper.API.setWaitingForIdentifier` and `NativeAnimatedHelper.API.unsetWaitingForIdentifier`

Previously, animation queue only got called if every `setWaitingForIdentifier` call was matched by `unsetWaitingForIdentifier`. If an error is thrown, this is not the case and they get out of sync. WHen they get out of sync, they never recover and animation queue is never flushedddddd.

Reviewed By: yungsters

Differential Revision: D38938858

fbshipit-source-id: c38fdef05cc70ce274b8e16114ffe49cc2dcb9b3
2022-08-23 08:53:59 -07:00
Tim YungandFacebook GitHub Bot 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 VanderwerffandFacebook GitHub Bot 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
George ZaharievandFacebook GitHub Bot f392ba6725 Codemod {...null} to {} in xplat/js
Summary:
Now that [exact_empty_objects has been enabled](https://fb.workplace.com/groups/flowlang/posts/1092665251339137), we can codemod `{...null}` to `{}` - they are now equivalent.

1) Run my one-off jscodeshift codemod
2) `scripts/flow/tool update-suppressions .` (as some suppressions move around due to the change)

drop-conflicts

Reviewed By: bradzacher

Differential Revision: D37834078

fbshipit-source-id: 6bf4913910e5597e5dd9d5161cd35deece6a7581
2022-07-14 17:00:28 -07:00
George ZaharievandFacebook GitHub Bot 67e12a19cb Suppress errors ahead of launch
Summary:
Ahead of enabling the `exact_empty_objects` option, suppress errors so that actually enabling the option is easier. We can do this without enabling the option by codemoding `{}` to `{...null}` in files that have errors.

Process:
1) Get list of files with errors when enabling the option
2) Codemod `{}` to `{...null}` in those files
3) Suppress resulting errors
4) Land diff with `drop-conflicts` flag
5) Announce and enable option (with many fewer files to edit)
6) Codemod all `{...null}` to `{}`

drop-conflicts

We are working on making the empty object literal `{}` have the type `{}` - i.e. exact empty object - rather than being unsealed.
More info in these posts: https://fb.workplace.com/groups/flowlang/posts/903386663600331, https://fb.workplace.com/groups/floweng/posts/8626146484100557

Reviewed By: pieterv

Differential Revision: D37731004

fbshipit-source-id: a9305859ba4e8adbdb8ae8feff3ec8a2f07ed236
2022-07-11 11:33:24 -07:00
Pieter VanderwerffandFacebook GitHub Bot c940eb0c49 Add LTI annotations to function params in xplat/js [manually-modified]
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: bradzacher

Differential Revision: D37363351

fbshipit-source-id: a9d3df7db6f9d094ac2ce81aae1f3ab4f62b243a
2022-06-22 23:01:55 -07:00
Pieter VanderwerffandFacebook GitHub Bot 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 KondoandFacebook GitHub Bot 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 KondoandFacebook GitHub Bot 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
Jordan BrownandFacebook GitHub Bot 6064fd0600 Presuppress xplat and upgrade to 0.178.1
Summary:
This diff upgrades xplat to 0.178.1 and pre-suppresses errors from turning on constrained writes.

To generate this diff I:
* Modified every `env_mode=constrain_writes` to `env_mode=ssa` and made a commit (this is so our upgrade script will work)
* Ran   scripts/flow/upgrade.sh 0.178.1 to upgrade all the flowconfigs to 178.1 and suppress new-env errors
* Modified arvr/js/flowconfig.ejs to use 0.178.1 and ran `scripts/gen-flowconfig/gen-flowconfig --project arvr`
* Modified xplat/js/flowconfig.ejs to use 0.178.1 and ran `scripts/gen-flowconfig/gen-flowconfig --project xplat`
* Unstacked from the commit in point 1

Reviewed By: SamChou19815

Differential Revision: D36676019

fbshipit-source-id: c3032f18ed838afc327f00de563e7f20713bdc26
2022-05-26 12:59:52 -07:00
Eric HartzogandFacebook GitHub Bot 0ef73f2a82 Restore early return to NativeAnimatedHelper.flushQueue
Summary:
Brings back a small performance win of avoiding starting/stopping a batch if the queue is empty.

## Background

This was attempted previously but it happened to expose a single frame animation visual regression in VR.

1. First added in D36298399 (https://github.com/facebook/react-native/commit/55ee8ce0c4157ce5d8a95eaa60b9945b435fc988), reverted in D36378363
2. Added in a different form in D36338606 (https://github.com/facebook/react-native/commit/35e2a63b8d45a52445266bd8106600cb49081a59), reverted in D36479089 (https://github.com/facebook/react-native/commit/a4690d054ff636a15f14f086acd44656412441ec)
3. Root cause of the visual regressions introduced was fixed in D36612758 (https://github.com/facebook/react-native/commit/40f4c662bc7a66e5caea4909d74f435f5b72190c)

Now that we've fixed the root cause of the visual regression, this is safe to restore.

Changelog: [Internal]

Reviewed By: JoshuaGross

Differential Revision: D36670591

fbshipit-source-id: 42b6bc9c7764484f2dbb9edb122780a91b7393b4
2022-05-25 16:35:11 -07:00
Genki KondoandFacebook GitHub Bot 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
Joshua GrossandFacebook GitHub Bot 87d3ac3762 Use setImmediate instead of setTimeout in Animated queue debounce
Summary:
setImmediate will result in these debounced/queued operations being sent to native immediately at the end of a ReactJS render loop instead of in the next tick, which could result in more fluid animations.

I verified with logs that batching still occurs.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D36521717

fbshipit-source-id: 4f94e26503d4e6e40f52a4120ae407044af0c451
2022-05-23 16:54:58 -07:00
Pieter De BaetsandFacebook GitHub Bot 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
Pieter De BaetsandFacebook GitHub Bot 7e646361ee Avoid start/finishOperationBatch when using singleOp Animated experiment
Summary:
Splitting these changes of from D36482630, which is a minor improvement to the singleOp experiment. Since we call start/finish already on the native side, we don't need to repeat it from JS.

Changelog: [Internal]

Reviewed By: JoshuaGross

Differential Revision: D36541700

fbshipit-source-id: 7d61669710faca3153be557fb2d214011eda87c5
2022-05-23 07:57:42 -07:00
Genki KondoandFacebook GitHub Bot 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
Pieter De BaetsandFacebook GitHub Bot d7dd1789ff Improve type-safety of NativeAnimated with singleOpBatching
Summary:
Improve the types of `queueOperation` so flow can assert that the parameters match.

Also in the case of `singleOpBatching == false`, nativeOps is just an alias of NativeModule so there's no overhead.

Changelog: [Internal]

Reviewed By: JoshuaGross

Differential Revision: D36482617

fbshipit-source-id: e000d11b04166cd7a069af024b9c2cc226efa701
2022-05-20 07:26:15 -07:00
Pieter De BaetsandFacebook GitHub Bot a4690d054f Disable early return in NativeAnimatedHelper.flushQueue
Summary:
This is the same issue as https://www.internalfb.com/diff/D36298399 (https://github.com/facebook/react-native/commit/55ee8ce0c4157ce5d8a95eaa60b9945b435fc988) which was reverted earlier this week.

Changelog: [Internal]

Differential Revision: D36479089

fbshipit-source-id: 2bce05882a558db0c3464ec4a2b05eee36a3048a
2022-05-18 10:36:03 -07:00
Joshua GrossandFacebook GitHub Bot 35e2a63b8d Batch Animated calls into one JSI call per frame
Summary:
We introduce a few optimizations:

(1) Previous diff: We defer calling any NativeAnimatedModule methods by waiting 1ms before flushing the queue, and debouncing until no flush is requested. Practically, this just means that we'll call NativeAnimatedModule methods N times at once, at the end of a render loop, instead of N times smeared throughout the render loop.
(2) Additionally, instead of calling N methods, we create multi-operation argument buffer and call a single NativeAnimatedModule API, which should essentially throttle NativeAnimatedModule API calls to once-ish per frame. On the native side, this also reduces a lot of overhead associated with scheduling work on the UI thread (we schedule 1 function to run on the UI thread and perform N operations, as opposed to scheduling N functions to run on the UI thread).

TODO:
- implement stubs for iOS
- write gating code so this can be properly tested in VR and in fb4a

Changelog: [Internal]

Reviewed By: genkikondo

Differential Revision: D36338606

fbshipit-source-id: 29ac949b53b874683128a76525586c22def3143b
2022-05-17 16:42:41 -07:00
Joshua GrossandFacebook GitHub Bot 29a91babd4 Delay Animated operations by at most 1ms (one render loop) to batch all operations and execute at once
Summary:
Because of the disconnect between the ReactJS render loop and Animated nodes, we don't know when a render loop begins or ends. Historically we haven't cared about that much,
but now for perf reasons we're attempting to batch them. Scheduling a function to execute at the end of the runloop and canceling until nothing interrupts it achieves that.

Impact seems fairly minimal and this should work everywhere (android, ios, etc) but we may want to gate the behavior as it *could* change things in surprising ways.

Changelog: [Internal]

Reviewed By: genkikondo

Differential Revision: D36338621

fbshipit-source-id: 48e52a1b2e2bcfb3ef13d3abd38d735967356de7
2022-05-17 16:42:41 -07:00
Joshua GrossandFacebook GitHub Bot bd2d0b28bd Patch loophole that caused some Animated instructions to be executed out of order
Summary:
This patches a loophole in the logic that caused some operations to execute immediately and some to be deferred, even within the same render loop. This caused the non-queued operations to be executed out of order. Instead, if an operation is created and a queued exists, we just push the operation to the end of the queue so ordering is preserved.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D36379125

fbshipit-source-id: d9f63f4d47d8453d51add61763b7b9c74ffe9d88
2022-05-13 13:32:02 -07:00
Pieter De BaetsandFacebook GitHub Bot 75fb346e74 Revert D36298399: Check queue size before starting Animated batch
Differential Revision:
D36298399 (https://github.com/facebook/react-native/commit/55ee8ce0c4157ce5d8a95eaa60b9945b435fc988)

Original commit changeset: b43c07994ba2

Original Phabricator Diff: D36298399 (https://github.com/facebook/react-native/commit/55ee8ce0c4157ce5d8a95eaa60b9945b435fc988)

fbshipit-source-id: 20989b3e22beb6f991aad44b89d96c2946d3e39b
2022-05-13 09:19:24 -07:00
Pieter De BaetsandFacebook GitHub Bot 55ee8ce0c4 Check queue size before starting Animated batch
Summary:
Small win: if the queue is empty we shouldn't start/stop the batch.

Changelog: [Internal]

Reviewed By: rshest

Differential Revision: D36298399

fbshipit-source-id: b43c07994ba28b4c890fe52af4e81c265a3b8ac7
2022-05-12 05:49:01 -07:00
George ZaharievandFacebook GitHub Bot 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 ZaharievandFacebook GitHub Bot 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 ZilbermanandFacebook GitHub Bot 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
Moti ZilbermanandFacebook GitHub Bot 9eb7629ac6 Add Animated.Numeric Flow type
Summary:
Changelog: [General][Added] - Add `Animated.Numeric` Flow type

Adds a Flow type to represent the various Animated node types that evaluate to numeric values and can be `interpolate()`d.

I'm including `AnimatedInterpolation` as "numeric" here even though it can technically evaluate either to a number or to a string, depending on its config. Note that calling `interpolate()` on a string-valued `AnimatedInterpolation` is a runtime error.

In a future diff, I'm planning to add a type argument to `AnimatedInterpolation` (and its config type), at which point we can refine `Animated.Numeric` to correctly include only `AnimatedInterpolation<number>`.

Reviewed By: javache

Differential Revision: D35869375

fbshipit-source-id: 2ff6754f1a5abc68c9da2c6836872c2022b25676
2022-05-03 12:04:02 -07:00
almouroandFacebook GitHub Bot 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
Moti ZilbermanandFacebook GitHub Bot c56754ae39 Add default Instance type and variance to AnimatedComponentType
Summary:
Updates `AnimatedComponentType`'s type arguments to match [`React.AbstractComponent`](https://flow.org/en/docs/react/types/#toc-react-abstractcomponent)'s more closely in [variance](https://flow.org/en/docs/types/generics/#toc-variance-sigils) and defaults (`Instance = mixed`).

Changelog: [Internal]

Reviewed By: genkikondo

Differential Revision: D34254030

fbshipit-source-id: 622d1e4ecbc493bba8ec857454dd28583b677d78
2022-02-17 13:10:58 -08:00
Genki KondoandFacebook GitHub Bot 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