Summary:
It was just adding unnecessary complexity. Users should just use standard React perf best practices, like `PureComponent` and `shouldComponentUpdate`.
This should be backwards compatible - existing `shouldItemUpdate` usage will just be ignored and should consider migrating to this pattern:
```
class MyItem extends React.PureComponent {
_onPress = () => {
this.props.onPressItem(this.props.id);
};
render() {
return (
<SomeOtherWidget title={this.props.title} onPress={this._onPress} />
)
}
}
...
_renderItem = ({item}) => (
<MyItem onPressItem={this._onPressItem} title={item.title} id={item.id} />
);
```
Which will automatically prevent re-renders unless the relavent data changes.
Reviewed By: yungsters
Differential Revision: D4730599
fbshipit-source-id: 0f61efe96eb4d95bb3b7c4ec889e3e0e34436e56
Summary:
This adds support for both automagical sticky section headers in
`SectionList` as well as the more free-form `stickyHeaderIndices` on
`FlatList` or `VirtualizedList`.
The basic concept is to take the initial `stickySectionHeaders` and remap them
to the indices corresponding to the mounted subset in the render window. The
main trick here is that the currently stuck header might itself be outside of
the render window, so we need to search the gap to see if that's the case and
render it (with spacers above and below it instead of one big spacer).
In the `SectionList` we simply pre-compute the sticky headers at the same time
as when we scan the sections to determine the flattened length and pass those
to `VirtualizedList`.
This also requires some updates to `ScrollView` to work in the churny
environment of `VirtualizedList`. We propogate the keys on the children to the
animated wrappers so that as items are removed and the indices of the
remaining items change, react can keep proper track of them. We also fix the
scroll back case where new headers are rendered from the top down and aren't
updated with the `setNextLayoutY` callback because the `onLayout` call for the
next header happened before it was mounted. This is done by just tracking all
the layout values in a map and providing them to the sticky components at
render time. This might also improve perf a little by property configuring the
animations syncronously instead of waiting for the `onLayout` callback. We
also need to protect against stale onLayout callbacks and other fun stuff.
== Test Plan ==
https://www.facebook.com/groups/react.native.community/permalink/940332509435661/
Scroll a lot with and without debug mode on. Make sure spinner
still spins and there are no crashes (lots of crashes during development due
to the animated configuration being non-monotonic if anything stale values get
through). Also made sure that tapping a row to change it's height would
properly update the animation configurations so the collision point would
still be correct.
Reviewed By: yungsters
Differential Revision: D4695065
fbshipit-source-id: 855c4e31c8f8b450d32150dbdb2e07f1a9f9f98e
Summary:
I don't remember exactly where we talked about this but LayoutAnimation on Android is pretty stable now so there's no reason to keep it behind an experimental flag anymore. The only part that is not really stable is delete animations, so what I did is remove the default delete animation that we provide in presets.
**Test plan**
Tested that layout animations work properly without any config.
Closes https://github.com/facebook/react-native/pull/12141
Differential Revision: D4494386
Pulled By: mkonicek
fbshipit-source-id: 5dd025584e35f9bff25dc299cc9ca5c5bf5f17a3
Summary:
MapView has been deprecated in open source for a while: http://facebook.github.io/react-native/docs/mapview.html
We still want to use it internally. Moving it away from the GitHub folder.
Reviewed By: mmmulani
Differential Revision: D4646199
fbshipit-source-id: f469971e448dbca12afe141b43fa8a2518c7d467
Summary:
Enable back navigation on Apple TV (with the remote's menu button) in code making use of BackAndroid. The module is renamed to BackHandler. BackAndroid is still exported to ReactNative for now, until external projects switch to using the new name for the module. The navigation in https://github.com/react-community/react-navigation makes use of this module.
**Test plan**: Manual testing with an example app (https://github.com/dlowder-salesforce/react-nav-example).
Closes https://github.com/facebook/react-native/pull/12571
Differential Revision: D4665152
Pulled By: ericvicenti
fbshipit-source-id: 925400ce216379267e014457be6f5eedbe4453ec
Summary:
This re-implements sticky headers in JS to make it work on Android.
The only change that was needed was to expose a way to attach a an animated value to an event manually since we can't use the Animated wrapper and `Animated.event` to do it for us because this is implemented directly in the `ScrollView` component. Simply exposed `attachNativeEvent` that takes a ref, event name and event object mapping. This is what is used by `Animated.event`.
TODO:
- Need to check why momentum scrolling isn't triggering scroll events properly on Android.
- Remove native iOS implementation
- cleanup / fix flow
**Test plan**
Test the example list in UIExplorer, test the ListViewPaging example.
Closes https://github.com/facebook/react-native/pull/11315
Differential Revision: D4450278
Pulled By: sahrens
fbshipit-source-id: fec8da2cffce9807d74f8e518ebdefeb6a708667
Summary: NavigationExperimental is deprecated, so we should avoid documenting it with examples
Reviewed By: lacker, hramos
Differential Revision: D4634484
fbshipit-source-id: 6c8b114d2a7b49c75ec548025384fa6ed75cb2d2
Summary:
This adds blurRadius support for <Image>, similar to iOS.
The heavy-lifting was done by lambdapioneer in the stack of diffs ending with
D3924013, we're just patching this in.
Two notes: we might need to apply two postprocessors going forward, will tackle
that in a separate diff, so we can ship this asap.
However, we need a new version of fresco to be released in order
to ship this.
Reviewed By: lexs
Differential Revision: D3936438
fbshipit-source-id: 353bf1f1120ebd5f4f8266c5a20188b41478a741
Summary: Simplify the UIExplorer setup, and remove dependency on NavigationExperimental, which is being phased out in favor of React Navigation.
Reviewed By: mkonicek
Differential Revision: D4627131
fbshipit-source-id: 6294623a885074a73c831b0d817770fbe8a90221
Summary:
After a fair bit of use, we have concluded that the `ItemComponent` mechanism is not worth the
hassle. Flow has trouble type checking it thoroughly, requiring an 'item' prop is annoying, and it
is very common to need to capture `this` anyway, e.g. for an `onPress` handler. A common pattern was
something like:
_renderItem = ({item}) => <MyItem foo={item.foo} onPress={() => this._onPress(item)} />};
...
ItemComponent={this._renderItem}
which wouldn't flow check the props and doesn't benefit from reusing components.
If we find some specific patterns that would benefit from the `ItemComponent` pattern, we can create
a new component that provides that API and wraps `FlatList` under the hood.
I'm going to do `SectionList` in a stacked diff.
Reviewed By: bvaughn
Differential Revision: D4625338
fbshipit-source-id: a4901f1c9d77e0115b0b8032b8c210f624e97ea3
Summary:
It's pretty common to want to wait until the user scrolls a view to consider any items
viewable, so `waitForScroll` enables that behavior.
It's also pretty common to want to ignore items that are quickly scrolled out of view, so we add
`minViewTime` to handle that case.
Reviewed By: bvaughn
Differential Revision: D4595659
fbshipit-source-id: 07bc8e89db63cb68d75bdd9bedde3183c38a3034
Summary:
This PR is based on files ericvicenti gave me. Specifically, he gave me:
- AccessibilityInfo.android.js
- AccessibilityInfo.ios.js
- AccessibilityInfoModule.java
Before this change, only a native iOS implementation of AccessibilityInfo existed. This change includes:
- A native Android implementation of AccessibilityInfo.
- JavaScript wrappers for the AccessibilityInfo module for both iOS and Android.
- UIExplorer changes to illustrate how to use AccessibilityInfo on iOS and Android.
- Documentation for the AccessibilityInfo APIs.
**Test plan (required)**
Tested the UIExplorer AccessibilityInfo example on iOS and Android with the screen reader both enabled and disabled.
Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/12273
Reviewed By: mkonicek
Differential Revision: D4527224
Pulled By: ericvicenti
fbshipit-source-id: d04638465ccbdbb35ecfc9504daaeb8e33aab57a
Summary: Adding providesModule annotations to files that don't have a `providesModule` annotation but are in directories that packager crawls.
Reviewed By: cpojer
Differential Revision: D4612455
fbshipit-source-id: b23f0d6bbe2d26f480e93b56b67c6c8b1075e9f7
Summary:
After taking a look at the existing animation docs, I found that most of the documentation on using `Animated` was spread out throughout the Animations guide and the `Animated` API reference, without any particular structure in place.
This PR aims to clean up the API reference, focusing on documenting all the provided methods exhaustively, and deferring to the Animations guide for long form examples and supporting content.
The `Easing` module is referred to at various points in the API reference, so I decided to clean up this doc as well. easings.net provides some handy visualizations that should make it easier for the reader to understand what sort of easing curve each method provides.
The site was built locally, and I verified all three documents render correctly.
Closes https://github.com/facebook/react-native/pull/12410
Differential Revision: D4581314
Pulled By: hramos
fbshipit-source-id: 27c0bce2afac8f084311b9d6113a2641133b42e5
Summary:
- Properly inherit flow types from base components, including `defaultProps`
- template-ify the `Item` type as it flows from the `data` prop into `ItemComponent`
Note that for `SectionList` is is harder to do the `Item` typing because each section in the
`sections` array can have a different `Item` type, plus all the optional overrides...not sure how to
tackle that.
Reviewed By: yungsters
Differential Revision: D4557523
fbshipit-source-id: a0c5279fcdaabe6aab5fe11743a99c3715a44032
Summary: Makes it easy to render separators between sections, as opposed to between items.
Reviewed By: yungsters
Differential Revision: D4555707
fbshipit-source-id: 34572ab4b2c5b47db640543149fe2551c34ccf7b
Summary:
The index is used to make sure the layout corresponds to the correct index, which can get
out of sync if cell layout is cached and then cells are re-ordered.
Reviewed By: bvaughn
Differential Revision: D4554721
fbshipit-source-id: 9acb37f390a6e40ad89f813b78f81b399ec11e9a
Summary:
Simple API takes structured `sections` prop instead of `data` array. `sections` is an array of
`Section` objects, each of which has a `key` and an `itemData` array which is analogous to a
`FlatList` `data` prop, plus optional props like `ItemComponent` that can be overridden on a
per-section level, allowing heterogeneous section item rendering via clean composition.
Flattens the sections data and renders with VirtualizedList under the hood. Doesn't support
sticky headers yet.
Reviewed By: yungsters
Differential Revision: D4519354
fbshipit-source-id: 58de959dadb6f55f681245ecd99a5dc356a48f36
Summary:
We were saving the old state, so it would always be one screen away when reloading before.
Now it works the same way as android. Ideally we would factor out all this shared code...
Reviewed By: ericvicenti
Differential Revision: D4537509
fbshipit-source-id: 28ea8fd579521bd45829013364e884678af81c30
Summary: Now layout direction (LTR or LTR) can be specified not only for whole app but also for view subtree via `direction` style property.
Reviewed By: mmmulani
Differential Revision: D4510206
fbshipit-source-id: 4e56c5886b6e42f2343165eb76be897e681c5ba4
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
Summary:
**Motivation**
Ability to customize slider colors is desirable to match the brand. Currently iOS allows using images for slider parts, but android doesn't have any customization options. This PR adds support for customizing `thumbTintColor`, `trackTintColor` and `progressTintColor`.
**Test plan (required)**
Run UIExplorer example with the changes and verify everything works fine.
cc brentvatne
Closes https://github.com/facebook/react-native/pull/11946
Differential Revision: D4427474
fbshipit-source-id: ec3a38db600bac6108691a4cfa15e2409143b9f3
Summary:
The `successCallback` passed via `static showShareActionSheetWithOptions(options, failureCallback, successCallback)` has two parameters (see [native code](e1577df1fd/Libraries/ActionSheetIOS/RCTActionSheetManager.m (L174))), and the name used for the first parameter in the JS example is confusing. This fixes that.
The first parameter is a boolean indicating whether the user completed the sharing (when TRUE) or cancelled it (when FALSE). Instead of calling it "success" in the example, I propose using `completed`, which is more in line with what you see in the native code.
Otherwise, we have a "successCallback" function whose first parameter tells us if we were "successful", and that's confusing (indeed, I think it already caused some confusion in the [react-native-share](https://github.com/EstebanFuentealba/react-native-share/) module: see [this issue](https://github.com/EstebanFuentealba/react-native-share/issues/48)).
Closes https://github.com/facebook/react-native/pull/11914
Differential Revision: D4490039
Pulled By: mkonicek
fbshipit-source-id: 5d7f01eae760e3fb271e7fa080c2f0147c53418a
Summary:
If you have a new example that you add to the UIExplorer, enter the example, but
then change the name of the example or remove it, the explorer enters a
completely broken state. It remembers the name of the last module entered and
keeps trying to enter it. Reloading, refreshing, nothing will work until you
completely reinstall the app.
This fixes this by not trying to render the current module if it doesn't exist.
It will simply skip it.
Reviewed By: yungsters
Differential Revision: D4475088
fbshipit-source-id: d4a530b235aa2712d663377e33fe65091163d262
Summary:
RecyclerViewBackedScrollView was deprecated, this removes usages in Examples as well as in NetworkOverlay.
**Test plan**
Tested that RecyclerViewBackedScrollView deprecation warning doesn't show up anymore.
Closes https://github.com/facebook/react-native/pull/11999
Differential Revision: D4443707
Pulled By: hramos
fbshipit-source-id: 087afc9f183b3f2087965a2fe84301f422e48e9c
Summary:
In theory, we should be able to animate any non-layout property, including custom ones. While there is still work to be done on the native side to fully enable this, we should start by dropping the prop whitelist.
Closes https://github.com/facebook/react-native/pull/10658
Differential Revision: D4379031
Pulled By: ericvicenti
fbshipit-source-id: fe9c30ea101e93a8b260d7d09a909fafbb82fee6
Summary:
Following the PR https://github.com/facebook/react-native/pull/6195, this adds a `HEIGHT` constant on `StatusBar` for iOS.
Combined with `statusBarFrameDidChange` and `statusBarFrameWillChange` StatusBar native events, it solves various problems with In-Call cellar bar / Location bar / others 40pt status bars, and offers a correct `keyboardVerticalOffset` value for the KeyboardAvoidingView component.
Closes https://github.com/facebook/react-native/pull/12041
Differential Revision: D4450924
Pulled By: hramos
fbshipit-source-id: 664798260f4226140f3fa3f9222a415a305d0d78
Spencer Ahrens
Valentin Shergin
Fred Liu
Janic Duplessis
Martin Konicek
Douglas Lowder
Jeff Morrison
Eric Vicenti
Ludo Fardel
Adam Comella
Bhuwan Khattar
Gabe Levi
Hector Ramos
Sokovikov
Satyajit Sahoo
Peter W
Andrei Coman
Ryan Gomba
Pieter De Baets
Mathieu Acthernoene
