Summary:This avoids flattening styles in most common cases. It diffs against the nested
arrays. The special case is when a property gets removed, it creates an object
that stores the removed keys which then gets resolved using a second pass
through the nested array.
You can conceptually think of this algorithm as:
1) Diff and store changes as you go
2) If something was removed, flatten as necessary
I also merged in another commit that renames the StyleSheetRegistry to ReactNativePropRegistry. There is nothing in here that makes it specific to styles anymore. That's just a decoupled view attribute configuration option. This registry can be used for any set of nested props, if we even want to keep this feature at all.
Reviewed By: vjeux
Differential Revision: D2492885
fb-gh-sync-id: c976ac28b7e63545132c36da0ee0c1c562e7c9e5
shipit-source-id: c976ac28b7e63545132c36da0ee0c1c562e7c9e5
Summary:Follow-up to https://github.com/facebook/react-native/pull/5084
This…
- changes all requires within RN to `require('fbjs/lib/…')`
- updates `.flowconfig`
- updates `packager/blacklist.js`
- adapts tests
- removes things from `Libraries/vendor/{core,emitter}` that are also in fbjs
- removes knowledge of `fbjs` from the packager
Closes https://github.com/facebook/react-native/pull/5084
Reviewed By: bestander
Differential Revision: D2926835
fb-gh-sync-id: 2095e22b2f38e032599d1f2601722b3560e8b6e9
shipit-source-id: 2095e22b2f38e032599d1f2601722b3560e8b6e9
Summary:
public
Most of the time - especially during app startup - when we call UIManager.manageChildren(), we are actually just adding the first set of children to a newly created view.
This case is already optimized for in the JS code, by memoizing index arrays at various sizes, but this is not especially efficient since it is still sending an array of indices with each call that could be easily inferred on the native side instead.
I've added a hybrid native/JS optimization that improves the performance for this case. It's not a huge win in terms of time saved, but benchmarks show improvements in the ~1% range for several of the app startup metrics.
Reviewed By: tadeuzagallo
Differential Revision: D2757388
fb-gh-sync-id: 74f0cdbba93af2c04d69b192a8c2cc5cf429fa09
Summary: public
RCTUIManager is a public module with several useful methods, however, unlike most such modules, it does not have a JS wrapper that would allow it to be required directly.
Besides making it more cumbersome to use, this also makes it impossible to modify the UIManager API, or smooth over differences between platforms in the JS layer without breaking all of the call sites.
This diff adds a simple JS wrapper file for the UIManager module to make it easier to work with.
Reviewed By: tadeuzagallo
Differential Revision: D2700348
fb-gh-sync-id: dd9030eface100b1baf756da11bae355dc0f266f
Summary: public
We're seeing related crashes. The diff has no tests, the perf tests weren't conclusive, and the person who'd be supporting it no longer is available to work on it. We can try this again later in a less rushed manner with proper perf testing.
Reviewed By: davidaurelio
Differential Revision: D2696615
fb-gh-sync-id: 3b6814ac12af19516146d5c42d2add8321b10db5
Summary: The recent commits for RecyclerViewBackedScrollView introduced a bunch of Flow errors.
Disable Flow for now in `ReactNativeViewPool` as it looks like that file doesn't use Flow :)
public
Reviewed By: gabelevi
Differential Revision: D2679974
fb-gh-sync-id: 71512f403e3fa271f6c0fa1a64e877ca1750f675
Summary: public
Native view recycling implementation based on limited pools of views.
In this diff I introduced new UIManager method: dropViews. Instead of removing views from tag->view maps when they are detached we keep them there until we get a call to dropViews with the appropriate tag. JS may keep a pool of object and selectively decide not to enqueue drop for certain views. Then instead of removing those views it may decide to reuse tag that has been previously allocated for a view that is no longer in use.
Special handling is required for layout-only nodes as they only can transition from layout-only to non-layout-only (reverse transition hasn't been implemented). Because of that we'd loose benefits of view flattening if we decide to recycle existing non-layout-only view as a layout-only one.
This diff provides only a simple and manual method for configuring pools by calling `ReactNativeViewPool.configure` with a dict from native view name to the view count. Note that we may not want recycle all the views (e.g. when we render mapview we don't want to keep it in memory after it's detached)
Reviewed By: davidaurelio
Differential Revision: D2677289
fb-gh-sync-id: 29f44ce5b01db3ec353522af051b6a50924614a2
Summary: Unfortunately ReactTestUtils requires ReactDOM (for renderIntoDocument), and ReactTestUtils is required by ReactNative. This worked internally because we already shimmed ReactDOM for Relay; now we shim it externally too, at least until we figure out a better solution for this in React.
public
Reviewed By: vjeux
Differential Revision: D2629811
fb-gh-sync-id: 94aac2c4eda39d039fdcedd88295e7afb0f5c5b2
Summary: All minor changes since we were already on the beta: most notable is that destructors are required in pooling to help prevent memory leaks.
public
Reviewed By: sebmarkbage
Differential Revision: D2608692
fb-gh-sync-id: acdad38768f7f48c0f0e7e44cbff6f0db316f4ca
Summary: public
Native iOS has a good error message, but it's in native which makes
things a little harder to track down (can't use Chrome debugger as easily).
Android has no special handling, so a cryptic "Trying to add unknown view tag..."
redbox would come up.
This puts the error handling in JS so it's shared on all platforms and can be
debugged more easily in Chrome.
Reviewed By: vjeux
Differential Revision: D2606064
fb-gh-sync-id: 5295a44a028c7be79d60dbaf0b5d59fd0a56fdde
Summary: Set up the polyfills for console and process before initializing other modules. Some modules do work (e.g. call `invariant`) when they are first required, so requiring the DefaultInjection module at the beginning ensures we have a consistent JS environment.
Closes https://github.com/facebook/react-native/pull/3526
Reviewed By: spicyj
Differential Revision: D2560340
Pulled By: frantic
fb-gh-sync-id: 44c743e3212ff1dcdbe0169041dfd3ea8f1a54f7
Summary: The most common cases is either that nothing changed or that only one part of
an array changed.
@public
Reviewed By: @spicyj
Differential Revision: D2516385
fb-gh-sync-id: 0cd09b95ebac37ee1b575025d23ae2f2e6e2fb47
Summary: Decouple processStyle from the main reconciliation. It is now a process
extension to the style attribute `transform`. This effectively decouples a
large portion of special cases and helper dependencies from the reconciler.
The transform attribute becomes translated into the transformMatrix attribute on
the native side so this becomes a little weird in that I have to special case
it. I don't think it is worth while having a general solution for this so I
intend to rename the native attribute to `transform` and just have it accept the
resolved transform. Then I can remove the special cases.
The next step is generalizing the flattenStyle function and optimizing it.
@public
Reviewed By: @vjeux
Differential Revision: D2460465
fb-gh-sync-id: 243e7fd77d282b401bc2c028aec8d57f24522a8e
Summary: Move the ViewAttributes and StyleAttributes configuration into the
Components library since they're coupled and change with the
native component configuration.
This also decouples StyleAttributes from the reconciler by adding it
to the ReactViewAttributes.
To do that, I refactored the property diffing to allow for recursive
configurations. Now an attribute configuration can be a nested object,
a custom configuration (diff/process) or true.
The requireNativeComponent path incorrectly gets its attributes set up
on the root validAttributes instead of the nested style object.
So I also have to add the nested form. Effectively these currently allow
these attributes on props or nested.
@public
Reviewed By: @vjeux
Differential Revision: D2456842
fb-gh-sync-id: cd5405bd8316c2fcb016d06c61244ce7719c26c0
Summary: Concolidate the creation of the "update payload" into
ReactNativeAttributePayload which now has a create
and a diff version. The create version can be used by
both mountComponent and setNativeProps. This means that
diffRawProperties moves into ReactNativeAttributePayload.
Instead of storing previousFlattenedStyle as memoized
state in the component tree, I recalculate it every
time. This allows better use of the generational GC.
However, it is still probably a fairly expensive
technique so I will follow it up with a diff that
walks both nested array trees to do the diffing in a
follow up.
This is the first diff of several steps.
@public
Reviewed By: @vjeux
Differential Revision: D2440644
fb-gh-sync-id: 1d0da4f6e2bf716f33e119df947c044abb918471
Summary: @public
UIManagerStatTracker now provides allTime and perBatch stats so it's easy to see
how bit each batch is.
Reviewed By: @vjeux
Differential Revision: D2506218
fb-gh-sync-id: 635556185245d2bd6cb149497ea60b503b2523ce
Summary:
These are the changes needed for full interop with the (as yet unreleased) new
version of React Devtools.
- the on-device inspector is minimized when devtools is open
- devtools highlight -> device and device touch -> devtools select works
- editing react native styles :)
Summary:
Remove layout-only views. Works by checking properties against a list of known properties that only affect layout. The `RCTShadowView` hierarchy still has a 1:1 correlation with the JS nodes.
This works by adjusting the tags and indices in `manageChildren`. For example, if JS told us to insert tag 1 at index 0 and tag 1 is layout-only with children whose tags are 2 and 3, we adjust it so we insert tags 2 and 3 at indices 0 and 1. This keeps changes out of `RCTView` and `RCTScrollView`. In order to simplify this logic, view moves are now processed as view removals followed by additions. A move from index 0 to 1 is recorded as a removal of view at indices 0 and 1 and an insertion of tags 1 and 2 at indices 0 and 1. Of course, the remaining indices have to be offset to take account for this.
The `collapsible` attribute is a bit of a hack to force `RCTScrollView` to always have one child. This was easier than rethinking out the logic there, but we could change this later.
Summary:
Remove layout-only views. Works by checking properties against a list of known properties that only affect layout. The `RCTShadowView` hierarchy still has a 1:1 correlation with the JS nodes.
This works by adjusting the tags and indices in `manageChildren`. For example, if JS told us to insert tag 1 at index 0 and tag 1 is layout-only with children whose tags are 2 and 3, we adjust it so we insert tags 2 and 3 at indices 0 and 1. This keeps changes out of `RCTView` and `RCTScrollView`. In order to simplify this logic, view moves are now processed as view removals followed by additions. A move from index 0 to 1 is recorded as a removal of view at indices 0 and 1 and an insertion of tags 1 and 2 at indices 0 and 1. Of course, the remaining indices have to be offset to take account for this.
The `collapsible` attribute is a bit of a hack to force `RCTScrollView` to always have one child. This was easier than rethinking out the logic there, but we could change this later.
@public
Test Plan: There are tests in `RCTUIManagerTests.m` that test the tag- and index-manipulation logic works. There are various scenarios including add-only, remove-only, and move. In addition, two scenario tests verify that the optimization works by checking the number of views and shadow views after various situations happen.
Summary:
Without this, the displayName property wasn't found when looking at
`.constructor` on a component instance. Fixesfacebook/react-devtools#92.
Closes https://github.com/facebook/react-native/pull/1471
Github Author: Ben Alpert <balpert@fb.com>
Test Plan:
Used devtools on MoviesApp and saw RCTView instead of Unknown:
{F22491590}
Sebastian Markbage
Jeff Morrison
David Aurelio
Matthew Dapena-Tretter
Andrei Coman
Arjun Balaji
Gabe Levi
Justas Brazauskas
Nick Lockwood
Dan Witte
Huang Yu
Andy Street
Pieter De Baets
Martin Konicek
Krzysztof Magiera
Ben Alpert
Spencer Ahrens
Bhuwan Khattar
James Ide
Felix Oghina
Madelaine Boyd
Alexsander Akers
Tim Yung
Dorota Kapturkiewicz
Philipp von Weitershausen
Jared Forsyth
chaceliang
Tadeu Zagallo
Bill Fisher
Georgiy Kassabli