Summary:
A nice bit of polish for apps is to update the separators between list items
when press actives the highlight (things get especially noticeable/ugly when
the separators are not full width and don't adjust). This can be difficult to
coordinate and update efficiently, so we bake the functionality into
`VirtualizedList`.
The approach taken here is a little different from `ListView`. We pass a new
`separators` object with `renderItem` that has easy-to-use callbacks for toggling
the 'highlighted' prop on both adjacent separators - they can be wired up
directly to the `onShow/HideUnderlay` props of `TouchableHighlight` (pit of
success and all that - we want those RN apps to be polished!), but we also
provide a more generic `separators.updateProps` method to set any custom
props. This also passes in `leadingItem` so more custom wiring can be done on
initial render (e.g. linking the highlight state with `Animated`).
This also moves the separator rendering into the `CellRenderer`. I think this might
also fix some subtle measurement bugs with the `onLayout` not capturing the
height of the separator, so that's nice too, but the main reason is to have
an easy place to store the state so we don't have to re-render the entire list
like `ListView` does. Instead we track references to the cells and call update
only on the two we care about so the feedback is instantaneous even with big,
heavy lists.
This diff also messes with a bunch of flow and updates the example to be more
like a standard list.
`SectionList` support is coming in a stacked diff.
**TestPlan**
Video demo:
https://youtu.be/uFE7qGA0mg4
Pretty sure this is backwards compatible....
Reviewed By: thechefchen
Differential Revision: D4833557
fbshipit-source-id: 685af46243ba13246bf280dae8a4223381ce8cea
Summary: It can be much more convenient instead of binding and setting `extraData` or what-not.
Reviewed By: blairvanderhoof
Differential Revision: D4829165
fbshipit-source-id: bb781fedc831059e7b5065ea4357955aed79beda
Summary:
I noticed I didn't get type defs anymore for react-native. Looks like it is broken since we removed the .flow file in 3e153b2a5b. To fix it we can now enable flow in react-native-implementation since it now supports properties.
**Test plan**
Tested that I get type hints when using imports from react-native in a project.
Closes https://github.com/facebook/react-native/pull/12917
Differential Revision: D4704753
Pulled By: ericvicenti
fbshipit-source-id: cf882588d7f371931de8d7861a1a6d50f6c425dc
Summary:
Use `getChildDrawingOrder` instead of reordering views. The old implementation didn't work properly when `removeClippedSubviews` was enabled and this one should have better performance since we don't play with the view hierarchy at all.
This fixes weird bugs with sticky headers in `SectionList` and allows removing the hack that disabled `removeClippedSubviews` when using sticky section headers.
**Test plan**
Tested using the SectionList and ListViewPaging examples that use sticky headers which uses z-index.
Closes https://github.com/facebook/react-native/pull/13105
Reviewed By: sahrens
Differential Revision: D4765869
Pulled By: achen1
fbshipit-source-id: be3c824658a3ce965b6e7324ad95c77cbd8a86ae
Summary:
Adds unit tests to the Native Animated implementation on iOS. This pretty much mirrors the tests we currently have on Android.
It also fixes 2 bugs I've found when adding the tests and pass the current time in `stepAnimation` instead of using `CACurrentMediaTime` to make testing easier.
- `stopListeningToAnimatedNodeValue` did not actually work at all, it should set the listener to nil.
- The finished value in the animation end callback was always true, this simplifies the `RCTAnimationDriver` interface to get rid of `removeAnimation` and fixes the end callback value.
**Test plan**
- Run the tests
- Make sure the UIExplorer example still works
Closes https://github.com/facebook/react-native/pull/13068
Differential Revision: D4786701
Pulled By: javache
fbshipit-source-id: a4f07e6eec1f363ca47b6f27984041793c915bfc
Summary:
Delay was broken with native animations on iOS. After checking what android does to handle delay, I noticed it does nothing at all since the delay is already handled when generating the animation frames. This removes all code that tried to handle delay on iOS since it is not needed and breaks it. Also updated an example to have delay in UI explorer.
Fixes#12388
**Test plan**
Tested that delay works in UIExplorer on iOS and Android.
Closes https://github.com/facebook/react-native/pull/12443
Differential Revision: D4582514
Pulled By: javache
fbshipit-source-id: dc53295e716c8476c71ccd578380962f056de2be
Summary:
Various fixes of xcode projects and cleaning up some warnings
Closes https://github.com/facebook/react-native/pull/13109
Differential Revision: D4762652
Pulled By: lacker
fbshipit-source-id: b452976a58962439de4adecc8e703264af40cb38
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:
This should fix the failing ImageSnapshotTest that was added to the IntegrationTests for iOS and tvOS.
Closes https://github.com/facebook/react-native/pull/12391
Differential Revision: D4578345
Pulled By: javache
fbshipit-source-id: 13ff305276c46256fcdbb9fc070a8c08cdc0dd0a
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
Spencer Ahrens
Brian Vaughn
Janic Duplessis
Pieter De Baets
Eric Vicenti
Pieter De Baets
Andrew Clark
Marc Horowitz
Valentin Shergin
Fred Liu
Martin Konicek
Douglas Lowder
Jeff Morrison
Ludo Fardel
Adam Comella
Bhuwan Khattar
Michael Bolin
Gabe Levi
Mathieu Baudet
Hector Ramos
