Commit Graph

43 Commits

Author SHA1 Message Date
rxb dcf245a9a2 Definable distance pagination for ScrollView
Summary: This is an enhancement for ScrollView that adds the ability to paginate based on a width other than the width of the ScrollView itself. This is a fairly common pattern used on apps like Facebook, App Store, and Twitter to scroll through a horizontal set of cards or icons:

![img_8726 2](https://cloud.githubusercontent.com/assets/451050/8017899/39f9f47c-0bd2-11e5-9c1d-889452f20cf7.PNG) ![img_8727 2](https://cloud.githubusercontent.com/assets/451050/8017898/39f962dc-0bd2-11e5-98b4-461ac0f7f21b.PNG)  ![img_8728 2](https://cloud.githubusercontent.com/assets/451050/8017900/39fd91a4-0bd2-11e5-8786-4cf0316295a0.PNG)

After trying to accomplish this only with JS, it appears that attempting to take over an in-progress native scroll animation with JS is always going to result in some amount of jankiness and jumping.

This pull request uses `scrollViewWillEndDragging` in RCTScrollView.m to adjust `targetContentOffset` based on two new optional props added to ScrollView. `snapToInterval` sets the multiple that the
Closes https://github.com/facebook/react-native/pull/1532

Reviewed By: @​svcscm, @​trunkagent

Differential Revision: D2443701

Pulled By: @vjeux
2015-09-23 11:47:25 -07:00
James Ide 3b68869fc8 Add scrollWithoutAnimationTo to Android
Summary: `ScrollView.scrollWithoutAnimationTo` is supported on iOS but not Android. This is an existing API, and this diff adds Android support.

Closes https://github.com/facebook/react-native/pull/2695

Reviewed By: @​svcscm

Differential Revision: D2452630

Pulled By: @mkonicek
2015-09-23 05:58:27 -07:00
Andrei Coman e9735556f6 [ReactNative] Sync [react_native] Fix keyboard behavior for android 2015-08-14 02:58:37 -08:00
Philipp von Weitershausen 3e79838a31 [React Native] sync JS for D2287297 2015-07-31 21:31:46 -08:00
Rui Chen accf6f12e4 Make the scrollResponderScrollNativeHandleToKeyboard works on Android 2015-07-23 18:14:43 -08:00
Ben Alpert e01f90784f [ReactNative] Update core RN modules to work with React 0.14-beta1 2015-07-23 18:07:59 -08:00
Martin Konicek 19a8eff668 [ReactNative] ScrollView docs
Summary:
In preparation for open sourcing React Native for Android, document which ScrollView props are platform-specific.
2015-07-23 06:56:46 -08:00
Spencer Ahrens c43e93d1b4 Reverted ca9d1b3bf5a6f46ec29babe8685634690ff9a2bc to unbreak groups 2015-07-17 04:03:01 -08:00
Spencer Ahrens 4b82673484 revert [React Native] Fix scroll view sticky headers 2015-07-16 16:31:53 -08:00
Alex Akers bfbc280fb4 [React Native] Fix scroll view sticky headers
Summary:
The `ScrollView` component tells the native side the subview indices of the views to make sticky. The problem is that, once layout-only views are collapsed, the indices are no longer reflective of the original views to make stick to the top.
2015-07-08 09:35:16 -08:00
Alexsander Akers 02db374e50 [React Native] Remove layout-only nodes (Take 2!)
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.
2015-07-07 05:06:50 -08:00
chaceliang 7159a4e947 Revert "[React Native] Remove layout-only nodes" 2015-06-25 13:30:06 -08:00
Alex Akers 3c5b4b0a9f [React Native] Remove layout-only nodes
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.
2015-06-25 09:12:00 -08:00
Peter Cottle a331bb7526 [RFC] Add ScrollView bounded height explanation
Summary:
As discussed in our internal group, think this is a fairly easy error to run into so I added some explanation.

@frantic / @vjeux open to better wording here, but I tried to explain how setting the height directly is discouraged and it's probably better to pipe `flex: 1` all the way down.

I didn't regenerate the website since the script assumes some permissions (push permission to master repo) and has some missing npm dependencies (and after fixing that, still had some obscure error :P )
Closes https://github.com/facebook/react-native/pull/1633
Github Author: Peter Cottle <pcottle@fb.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-06-16 15:48:30 -08:00
James Ide 6b621a5677 [Idea: ScrollView] Add `getScrollResponder` to ScrollView for composition
Summary:
This is a proposal to add `getScrollResponder` to all ScrollView-like components, including ListView. This allows multiple higher-order scroll views to be composed while allowing the owner of the top-level scroll view to call `scrollableView.getScrollResponder().scrollTo(...)` regardless of whether `scrollableView` is a ScrollView, ListView, InvertedScrollView, etc.
Closes https://github.com/facebook/react-native/pull/766
Github Author: James Ide <ide@jameside.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-06-12 11:15:51 -08:00
Gabe Levi b05e99a531 [Flow] Fix or suppress react-native github errors for Flow v0.12.0 2015-06-10 13:34:19 -08:00
Nick Lockwood 45d8fb0ef6 Removed deprecated RCT_EXPORT + code paths 2015-06-05 09:58:25 -08:00
Ben Alpert a2f73b4d77 [react-native] Add React.findNodeHandle 2015-05-13 13:24:37 -07:00
Krzysztof Magiera ff00e1496c [ReactNative] Rename ReactIOS JS module (and relatives) to ReactNative. 2015-05-13 13:24:35 -07:00
Tadeu Zagallo 8d1fcfd615 Merge pull request #1112 from brentvatne/fix-scrollview-doc-typo
Fix scrollview doc type - canimprove -> can improve
2015-05-07 02:57:44 +01:00
Krzysztof Magiera 4402c4c885 [react_native] JS files from D2038965: Extract view specific commands from UIManager. 2015-05-05 02:58:05 -08:00
Brent Vatne 2f9cc9723f Fix scrollview doc type - canimprove -> can improve 2015-05-02 19:51:18 -07:00
Krzysztof Magiera 4bd56ca6d1 [react_native] JS files from D2038898: Move view specific constants out of UIManager to the cooresponding view manager class. 2015-05-01 07:06:51 -08:00
Spencer Ahrens 65b6d209d9 [ReactNative] cleanup some requireNativeComponent cruft 2015-04-17 15:45:12 -08:00
Spencer Ahrens 915151c5d7 [ReactNative] verifyPropTypes against native exports 2015-04-16 18:15:36 -08:00
Charlie Cheever 774442efd2 Adding `scrollWithoutAnimationTo` method for ScrollViews
Summary:
Implementing the consensus approach from the comments on
this PR:
https://github.com/facebook/react-native/pull/486

We use a boolean flag in the Obj-C code to determine whether
to animate or not, and then provide two public JS functions
that call the Obj-C with or without the flag.
Closes https://github.com/facebook/react-native/pull/509
Github Author: Charlie Cheever <ccheever@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-03-31 16:11:40 -08:00
James Ide 2f00cb05bd [ScrollView] Add "bounces" property to ScrollView propTypes
Summary:
The `bounces` property lets you disable rubber-banding. It was already exposed on the native side so this diff is just documenting it in JS.
Closes https://github.com/facebook/react-native/pull/264
Github Author: James Ide <ide@jameside.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-03-31 15:15:17 -08:00
Nick Lockwood 961f301d65 Renamed throttleScrollCallbackMS to scrollEventThrottle 2015-03-30 04:56:59 -08:00
Basil Hosmer 95deed578c flowified Libraries from Avik 2015-03-25 12:44:28 -08:00
Christopher Chedeau e1ef0328d9 [ReactNative] Expanded license on js files 2015-03-23 13:17:54 -08:00
Spencer Ahrens 9086365faf [ReactNative] Strip prefixes from NativeModules keys 2015-03-17 21:54:27 -08:00
Spencer Ahrens d8ee4e87a1 [ReactKit] Remove NativeModulesDeprecated 2015-03-17 02:48:58 -08:00
Spencer Ahrens b396de3cc8 [ReactNative] s/RK/RCT in OSS 2015-03-17 02:48:57 -08:00
Christopher Chedeau 2b38a70e9c [ReactNative] Fix ScrollView.scrollTo() 2015-03-13 10:28:59 -08:00
Christopher Chedeau 7577f0e0b3 [ReactNative] Remove keyboardDismissMode from static 2015-03-13 10:00:18 -08:00
Nick Lockwood 24da269404 Fixed sticky section headers in ListView 2015-03-12 02:41:48 -08:00
Christopher Chedeau 0f2a2e73f0 [ReactNative] Remove nativePropTypes 2015-03-09 09:49:27 -08:00
Christopher Chedeau dc309b9dd4 [ReactNative] Inline ScrollViewPropTypes 2015-03-09 09:49:26 -08:00
Christopher Chedeau 7466846c7e [ReactNative] Unify ScrollView.android and ScrollView.ios 2015-03-09 09:49:25 -08:00
Christopher Chedeau d8e83c882e [ReactNative] Move around and reformat comments for the documentation 2015-03-09 09:49:24 -08:00
Christopher Chedeau fd198b71dc [ReactNative] Use spread operator and .propTypes for ScrollView/ListView 2015-03-04 08:29:57 -08:00
Christopher Chedeau 46f41c3d4b [ReactNative] Use strings instead of constants for keyboardDismissMode 2015-03-03 11:26:22 -08:00
Spencer Ahrens efae175a8e [react-packager][streamline oss] Move open sourced JS source to react-native-github 2015-02-19 21:25:11 -08:00