Commit Graph

154 Commits

Author SHA1 Message Date
Emil Sjolander c43a3f5d84 Default scrollview to flexShrink to allow views below it
Summary: Changing from flex -> flexGrow on Scrollview caused some layouts to break due to having views below the scrollview. Adding flexShrink allows for the behavior again.

Reviewed By: blairvanderhoof

Differential Revision: D3936963

fbshipit-source-id: 0f43e6f5148918d3d431b98d26d185bbcc1548d0
2016-09-28 10:13:37 -07:00
Emil Sjolander 0a9b6bedb3 BREAKING - Fix unconstraint sizing in main axis
Summary:
This fixes measuring of items in the main axis of a container. Previously items were in a lot of cases measured with UNSPECIFIED instead of AT_MOST. This was to support scrolling containers. The correct way to handle scrolling containers is to instead provide them with their own overflow value to activate this behavior. This is also similar to how the web works.

This is a breaking change. Most of your layouts will continue to function as before however some of them might not. Typically this is due to having a `flex: 1` style where it is currently a no-op due to being measured with an undefined size but after this change it may collapse your component to take zero size due to the implicit `flexBasis: 0` now being correctly treated. Removing the bad `flex: 1` style or changing it to `flexGrow: 1` should solve most if not all layout issues your see after this diff.

Reviewed By: majak

Differential Revision: D3876927

fbshipit-source-id: 81ea1c9d6574dd4564a3333f1b3617cf84b4022f
2016-09-26 06:13:56 -07:00
Dustin Hoffner 727b7dffb4 Changed scrollEventThrottle check
Summary:
Hi there,

when using the ScrollView component with `onScroll` and `scrollEventThrottle = 0` as it is documented in [react-native/docs/scrollview](https://facebook.github.io/react-native/docs/scrollview.html#scrolleventthrottle) this message will appear unnecessary.

This happens because `!this.props.scrollEventThrottle` is `true` when the value is `0`.

So I changed it to `this.props.scrollEventThrottle == null`. Now it is `false` when the value is `0`.
Closes https://github.com/facebook/react-native/pull/10038

Differential Revision: D3909323

fbshipit-source-id: 3c701f23708b64576a8c9f47e140d87159087894
2016-09-22 13:58:31 -07:00
Janic Duplessis d0d1712851 Reverted commit D3827366
Summary:
This adds support for sticky headers on Android. The implementation if based primarily on the iOS one (https://github.com/facebook/react-native/blob/master/React/Views/RCTScrollView.m#L272) and adds some stuff that was missing to be able to handle z-index, view clipping, view hierarchy optimization and touch handling properly.

Some notable changes:
- Add `ChildDrawingOrderDelegate` interface to allow changing the `ViewGroup` drawing order using `ViewGroup#getChildDrawingOrder`. This is used to change the content view drawing order to make sure headers are drawn over the other cells. Right now I'm only reversing the drawing order as drawing only the header views last added a lot of complexity especially because of view clipping and I don't think it should cause issues.

- Add `collapsableChildren` prop that works like `collapsable` but applies to every child of the view. This is needed to be able to reference sticky headers by their indices otherwise some subviews can get optimized out and break indexes.
Closes https://github.com/facebook/react-native/pull/9456

Differential Revision: D3827366

Pulled By: fred2028

fbshipit-source-id: d346068734c5b987518794ab23e13914ed13b5c4
2016-09-15 12:13:39 -07:00
Janic Duplessis 0e8b75b22c Implement ScrollView sticky headers on Android
Summary:
This adds support for sticky headers on Android. The implementation if based primarily on the iOS one (https://github.com/facebook/react-native/blob/master/React/Views/RCTScrollView.m#L272) and adds some stuff that was missing to be able to handle z-index, view clipping, view hierarchy optimization and touch handling properly.

Some notable changes:
- Add `ChildDrawingOrderDelegate` interface to allow changing the `ViewGroup` drawing order using `ViewGroup#getChildDrawingOrder`. This is used to change the content view drawing order to make sure headers are drawn over the other cells. Right now I'm only reversing the drawing order as drawing only the header views last added a lot of complexity especially because of view clipping and I don't think it should cause issues.

- Add `collapsableChildren` prop that works like `collapsable` but applies to every child of the view. This is needed to be able to reference sticky headers by their indices otherwise some subviews can get optimized out and break indexes.
Closes https://github.com/facebook/react-native/pull/9456

Differential Revision: D3827366

fbshipit-source-id: cab044cfdbe2ccb98e1ecd3e02ed3ceaa253eb78
2016-09-14 20:43:29 -07:00
Emil Sjolander a6e1e33a50 Reverted commit D3855801
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this.

Reviewed By: astreet

Differential Revision: D3855801

fbshipit-source-id: 3c365f9e6ef612fd9d9caaaa8c650e9702176e77
2016-09-14 11:28:34 -07:00
Emil Sjolander 1f9c9ecb4b BREAKING - Fix unconstraint sizing in main axis
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this.

Reviewed By: astreet

Differential Revision: D3855801

fbshipit-source-id: 6077b0bcb68fe5ddd4aa22926acab40ff4d83949
2016-09-14 09:14:02 -07:00
Simon Ayzman 7e2e0deeb0 Updated ScrollView's keyboardShouldPersistTaps doc
Summary:
I noticed that even when a ScrollView's `keyboardShouldPersistTaps` prop is set to true, the ScrollView's children can still respond to tap events (even if the scroll view itself will not respond to tap events and the keyboard does not dismiss automatically). This is a point of ambiguity in the React Native docs; it implies that no touch events can be handled if `keyboardShouldPersistTaps` is set to true.
Closes https://github.com/facebook/react-native/pull/9053

Differential Revision: D3636711

Pulled By: hramos

fbshipit-source-id: 2f0aea86202ab66d5a9174ce8611509dff67e15f
2016-07-28 12:43:34 -07:00
Siqi Liu 235c059605 Support API "scrollTo" in RecyclerViewBackedScrollView on Android
Summary:
In Android `RecyclerViewBackedScrollView` didn't provide the `scrollTo` API, however iOS does.
If a ListView was created with `RecyclerViewBackedScrollView` as its `renderScrollComponent`, then calling `scrollTo` wouldn't work.

This diff enables the `scrollTo` API in `RecyclerViewBackedScrollView` on Android.

Reviewed By: dmmiller

Differential Revision: D3605233

fbshipit-source-id: f192053361f45453e5fce3fb6038ab03ac4025af
2016-07-22 09:28:40 -07:00
Leonardo Tegon 0c0ac6e21c Support RefreshControl in RecyclerViewBackedScrollView in Android
Summary:
In Android, `RecyclerViewBackedScrollView` wasn't using `refreshControl` prop.
If a ListView were created with `RecyclerViewBackedScrollView` as its `renderScrollComponent`, then the `refreshControl` wouldn't work.
example:
```js
        <ListView
          dataSource={this.props.dataSource}
          renderRow={this._renderRow.bind(this)}
          refreshControl={
            <RefreshControl
              refreshing={this.props.isRefreshing}
              onRefresh={this._onRefresh.bind(this)}
            />
          }
          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}/>;
```
This works in iOS, since the `RecyclerViewBackedScrollView` just returns an `ScrollView`.

This pull request uses the `refreshControl` to decide whether it should wrap the `NativeAndroidRecyclerView` with an
`AndroidSwipeRefreshLayout` or not.

This fixes the issue #7134.
Closes https://github.com/facebook/react-native/pull/8639

Differential Revision: D3564158

fbshipit-source-id: c10a880ea61cd80b8af789b00be90d46d63eaf9a
2016-07-14 14:43:24 -07:00
David Aurelio bd60d828c5 Remove `node_modules/react` from the list of discoverable haste modules
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.

Reviewed By: astreet

Differential Revision: D3509863

fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
2016-07-05 06:44:33 -07:00
Wenjing Wang 13dfb6267a Fix broken image cropper - can not scroll
Summary: ImageCropper is broken on iOS. Can not scroll up and down

Differential Revision: D3413397

fbshipit-source-id: 75096fc1d5dd14764c0ddd4fd3888a9576c1d1ce
2016-06-09 23:13:31 -07:00
Emil Sjolander 6603cef95c Fix ScrollView to work correctly for new css-layout
Reviewed By: sahrens

Differential Revision: D3367140

fbshipit-source-id: ea470f289c92ebca71543a9b9328a7a5ed6d572b
2016-06-01 04:28:29 -07:00
Janic Duplessis a71a9efe96 Remove deprecated PullToRefreshViewAndroid and onRefreshStart / endRefreshing
Summary:
Removes the deprecated APIs that were replaced by `RefreshControl`. Those API have been deprecated for a while already so I think it's fine to remove them at this point. Also ported the `SwipeRefreshLayoutTestModule` test to use `RefreshControl` instead of `PullToRefreshViewAndroid`.

**Test plan (required)**

Made sure no references are left in the codebase to `PullToRefreshViewAndroid`, `onRefreshStart` and `endRefreshing`.
Tested that `ScrollView` examples in UIExplorer still work properly.
Check that the `SwipeRefreshLayoutTestModule` passes on CI.
Closes https://github.com/facebook/react-native/pull/7447

Reviewed By: mkonicek

Differential Revision: D3292391

Pulled By: bestander

fbshipit-source-id: 27eb2443861e04a9f7319586ce2ada381b714d47
2016-05-24 03:28:25 -07:00
Nathan Spaun b67d4a20d7 Add FpsListener to React Scroll Views
Summary:
We want to give people the ability to log scroll performance (including Fb).
This adds an interface that can be enabled and disabled from the react scroll views.
This is a prerequisite to implementing the actual framerate logger that will log dropped
frames while scrolling in prod.

Reviewed By: astreet

Differential Revision: D3283588

fbshipit-source-id: ed9736cb9ed3f441511647f36b1460092bd91e56
2016-05-13 11:28:21 -07:00
Spencer Ahrens 2d43663ac8 Remove cruft from ScrollView
Reviewed By: dmmiller

Differential Revision: D3287077

fbshipit-source-id: dfc238469bce540d69c38d3e17c87163e10d7b23
2016-05-11 05:22:20 -07:00
Spencer Ahrens 892e509a0c Fix flow and lint for ScrollView
Summary:
- getScrollResponder returns a...ScrollView!
- no more var
- no more string refs

Reviewed By: spicyj

Differential Revision: D3286596

fbshipit-source-id: d9e6e0a318eadd2521c9f5c69d2ec368f1d7b626
2016-05-11 03:00:27 -07:00
Pieter De Baets 57ceeafd4f Move UI-specific logic from NativeModules to UIManager
Summary: Move all requires of UIManager to UIManager.js, so we can load the view manager configuration lazily when UIManager is required.

Reviewed By: majak

Differential Revision: D3270147

fb-gh-sync-id: 8208ee8d5919102ea5345e7031af47ee78162fe0
fbshipit-source-id: 8208ee8d5919102ea5345e7031af47ee78162fe0
2016-05-09 08:21:19 -07:00
Dave Miller a3146e41a2 Add pagingEnabled to HorizontalScrollView
Summary:
This adds support for pagingEnabled to the HorizontalScrollView.

This is an initial implementation.

Because Android doesn't provide great details about what is happening with a scroll view after you are done touching it, we have some post touch handling.  This is kicked off either by touch up or a fling call.
Once we are doing that handling, we start a runnable that basically checks if we are still scrolling.  If we are, we just schedule that runnable again and check a frame later.  If we are done scrolling (no onScrollChanged since we last fired), we could be in one of two states, the fling is done or we are done snapping to the page boundary.  If we are in the fling done case, we then check if we need to scroll to a page boundary.  If so, we call smoothScrollTo and schedule ourself to check onScroll events again until done with that scroll.  If we are done with both (either we only did momentum scroll or we did that and then snapped to page), we can then fire the final event and stop checking.  This logic is all in handlePostTouchScrolling.

Because of the decision to only do page scrolling after momentum ends, we do allow you to scroll through with momentum a number of pages and the transition can be a little strange where it stops a sec and then slides to be page aligned.  As a follow up, we can probably smooth that up by changing the value we pass to super.fling() that would adjust it to be let momentum carry it to the page boundary.

Reviewed By: weicool

Differential Revision: D3207608

fb-gh-sync-id: 02f62970ed9a5e3a5f9c0d959402756bc4b3699e
fbshipit-source-id: 02f62970ed9a5e3a5f9c0d959402756bc4b3699e
2016-05-05 04:14:22 -07:00
Joshua Pinter 449a81264b Add keys to hash as you need them.
Summary:
Just showing a hash of values is misleading. Makes the user think you can just pass in the values without the keys.
Closes https://github.com/facebook/react-native/pull/7310

Differential Revision: D3245834

fb-gh-sync-id: 39220ed7720e3ff402f2c2ba8bebdefb96bfa203
fbshipit-source-id: 39220ed7720e3ff402f2c2ba8bebdefb96bfa203
2016-04-30 20:40:28 -07:00
Joshua Pinter 4bbd64931b Indicate width and height params are being passed to onContentSizeChange.
Summary:
I had to do a little trial and error to find this out. Would be helpful to have it in the docs.

I'm not sure if there's a standard wording or format you prefer for indicating handler function params.
Closes https://github.com/facebook/react-native/pull/7312

Differential Revision: D3245838

fb-gh-sync-id: 89433c036f7287d9efb69605180734dbc4df4df3
fbshipit-source-id: 89433c036f7287d9efb69605180734dbc4df4df3
2016-04-30 18:28:22 -07:00
Dave Miller 850befa3cd Remove unused code
Reviewed By: davidaurelio

Differential Revision: D3240927

fb-gh-sync-id: b9ecb5269026314905a22eae3b32fd546574c5ef
fbshipit-source-id: b9ecb5269026314905a22eae3b32fd546574c5ef
2016-04-29 08:48:19 -07:00
Nick Lockwood 8cfa6b6ea6 Deprecated customDirectEventTypes, and removed from RCTScrollViewManager
Summary: Using customDirectEventTypes or customBubblingEventTypes causes a viewmanager to be initialized at app start. This diff deprecates those methods and removes their usage from RCTScrollViewManager.

Reviewed By: majak

Differential Revision: D3218973

fb-gh-sync-id: 295bef3be9623b49b0cdcbf8a56e10d9b28126d9
fbshipit-source-id: 295bef3be9623b49b0cdcbf8a56e10d9b28126d9
2016-04-28 07:44:19 -07:00
Janic Duplessis 49fdd99633 Display component methods on the website and tweak the documentation
Summary:The website now displays public methods on components. This was implemented mostly in react-docgen via #66. This adds a <Method> component that is used by the component and API doc pages to display documentation for a method.

It also adds some missing documentation and tweak some existing one to integrate with this feature. I also prefixed some component methods with an '_' so they don't show up in the doc.

**Test plan (required)**

Tested every component page locally to make sure the methods doc was displayed properly.
Tested an API page to make sure it still worked properly.
Closes https://github.com/facebook/react-native/pull/6890

Differential Revision: D3159911

Pulled By: vjeux

fb-gh-sync-id: 1e6a4640cda6794496d9844c1af6a1451c017dcc
fbshipit-source-id: 1e6a4640cda6794496d9844c1af6a1451c017dcc
2016-04-09 11:13:28 -07:00
Sebastian Markbage 613ca14612 React.findNodeHandle -> ReactNative.findNodeHandle
Summary:Since the React 0.14 split of modules, the findNodeHandle feature is part of the
renderer and not the generic React API.

This just greps for React.findNodeHandle and replace them with ReactNative.findNodeHandle. I fixed up the imports manually.

I also found two callers each of ReactNative.createClass and React.render with the exception of downstream and examples will fix them separately.

I'll need to find more things like `var { PropTypes } = ReactNative;` separately. I think this is a good start though.

Reviewed By: vjeux

Differential Revision: D3149356

fb-gh-sync-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
fbshipit-source-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
2016-04-07 19:44:31 -07:00
Nathan Spaun 4498bc8197 Add prop to FbReactScrollView to fill the rest of the background to avoid overdraw
Reviewed By: foghina

Differential Revision: D3079290

fb-gh-sync-id: b824d235ca34f8e0408f5f40e6b73e028006ac9f
fbshipit-source-id: b824d235ca34f8e0408f5f40e6b73e028006ac9f
2016-03-30 18:06:19 -07:00
Dave Miller bd8007300f Remove sendMomentumEvents property from public ScrollView properties
Summary: This property is only used by the native code as an optimization to not send events that no one is listening to.  We don't need to expose it externally on the js api.  Set sendMomentumEvent to be a native only property.

Reviewed By: bestander

Differential Revision: D3092650

fb-gh-sync-id: 95f5f0ae4cd04a7d1cbc9cf17c93647d3c644878
shipit-source-id: 95f5f0ae4cd04a7d1cbc9cf17c93647d3c644878
2016-03-24 05:43:25 -07:00
Dave Miller ad41a0b326 Clean up dead code in ScrollView
Summary: I see dead code

Reviewed By: bestander

Differential Revision: D3092668

fb-gh-sync-id: d80a0267aafd856b63e1d2ff1ae8b8e9f6deb8ce
shipit-source-id: d80a0267aafd856b63e1d2ff1ae8b8e9f6deb8ce
2016-03-24 05:29:20 -07:00
Nick Hudkins a3ba25ed90 Correct scrollEventThrottle docs
Summary:The docs indicated that a higher number was more accurate, however based on the implementation:

```
  /**
   * TODO: this logic looks wrong, and it may be because it is. Currently, if _scrollEventThrottle
   * is set to zero (the default), the "didScroll" event is only sent once per scroll, instead of repeatedly
   * while scrolling as expected. However, if you "fix" that bug, ScrollView will generate repeated
   * warnings, and behave strangely (ListView works fine however), so don't fix it unless you fix that too!
   */
  if (_allowNextScrollNoMatterWhat ||
      (_scrollEventThrottle > 0 && _scrollEventThrottle < (now - _lastScrollDispatchTime)))
```
https://github.com/facebook/react-native/blob/master/React/Views/RCTScrollView.m#L564

It appears that only 0 is a special case here, and perhaps a known issue ;)
Closes https://github.com/facebook/react-native/pull/3729

Differential Revision: D3074801

Pulled By: mkonicek

fb-gh-sync-id: f63b00755f7565165cc628085efa5ed96badcfe1
shipit-source-id: f63b00755f7565165cc628085efa5ed96badcfe1
2016-03-20 09:52:22 -07:00
Dave Miller a6ada1e946 Remove DEV warning about ScrollEventThrottle on Android where it is not supported
Reviewed By: bestander

Differential Revision: D3069574

fb-gh-sync-id: f0d9aca754e45a34836d26febdabacb6424ca371
shipit-source-id: f0d9aca754e45a34836d26febdabacb6424ca371
2016-03-18 09:05:22 -07:00
Szabó Krisztián 265b63866a Fix typo in ScrollView childLayoutProps error message
Summary:Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:

(You can skip this if you're fixing a typo or adding an app to the Showcase.)

Explain the **motivation** for making this change. What existing problem does the pull request solve?

Example: When "Adding a function to do X", explain why it is necessary to have a way to do X.

**Test plan (required)**

Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

Make sure tests pass on both Travis and Circle CI.

**Code formatting**

See the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).
Closes https://github.com/facebook/react-native/pull/6454

Differential Revision: D3049074

Pulled By: sahrens

fb-gh-sync-id: 61d085bb5c7bedf80204cdfb94e5c23542e15333
shipit-source-id: 61d085bb5c7bedf80204cdfb94e5c23542e15333
2016-03-14 14:35:27 -07:00
Nick Lockwood 520ad05ba0 Removed unnecessary exportedConstants
Summary: The exportedConstants method incurrs a penalty at bridge startup time for every module that implements it. This diff removes exportedConstants from a few modules that don't really need to use it.

Reviewed By: majak

Differential Revision: D2982341

fb-gh-sync-id: be016187d7b731a073311daacfcf88a0402e1688
shipit-source-id: be016187d7b731a073311daacfcf88a0402e1688
2016-03-10 10:21:34 -08:00
David Aurelio ad8a335864 Remove knowledge of fbjs from the packager
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
2016-03-02 04:28:38 -08:00
Konstantin Raev 6f1417c849 CI now builds docs website and deploys it to /%version% path
Summary:
Copy of #5760 reverted merge.

We need to preserve history of docs changes on the webserver.
The goal is to allow users to browse outdated versions of docs.
To make things simple all websites will be released to https://facebook.github.io/react-native/releases/version/XX folder when there is a branch cut.

I switched from Travis CI to Cirle CI because it works faster and I am more familiar with it.

How it works:

1. If code is pushed to `master` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/next folder.
Github will serve this website from https://facebook.github.io/react-native/releases/version/next URL.
All relative URLs will work within that website

2. If code is pushed to `0.20-stable` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/0.20 folder.
Github will serve this website from https://facebook.github.io/react-native/releases/v
Closes https://github.com/facebook/react-native/pull/5873

Reviewed By: svcscm

Differential Revision: D2926901

Pulled By: androidtrunkagent

fb-gh-sync-id: 16aea430bac815933d9c603f03921cc6353906f1
shipit-source-id: 16aea430bac815933d9c603f03921cc6353906f1
2016-02-11 06:17:42 -08:00
Austin Kuo 1e58a4287c Emend the comment
Summary:
Emend the comment error
Closes https://github.com/facebook/react-native/pull/5795

Reviewed By: svcscm

Differential Revision: D2910532

Pulled By: vjeux

fb-gh-sync-id: 9f8fe026e57e049db5a0f6d4e3ee4a752457c4a5
2016-02-07 07:13:32 -08:00
Keith Norman 98797177ab fix issue that breaks scroll views w/ RefreshControl on Android
Summary:
Fixes the issue I mentioned here https://github.com/facebook/react-native/pull/5623#issuecomment-180583142
Closes https://github.com/facebook/react-native/pull/5784

Reviewed By: svcscm

Differential Revision: D2908112

Pulled By: nicklockwood

fb-gh-sync-id: 8a2f053de3f7dc19807ee21dd969c53a57b71345
2016-02-05 16:25:35 -08:00
Brent Vatne 82b0df9d2a Add scrollEnabled prop to Android ScrollView
Summary:
Perhaps there is a better way to do this, curious to hear it!

- If momentum scroll is active when `scrollEnabled` is toggled, the momentum scroll continues and the onMomentumScrollEnd event fires, which is the same as on iOS.
Closes https://github.com/facebook/react-native/pull/5656

Reviewed By: svcscm

Differential Revision: D2889897

Pulled By: dmmiller

fb-gh-sync-id: b2f44d2bcb48373f9945f6afd966447a118df717
2016-02-03 13:39:33 -08:00
Janic Duplessis db74e713fe Fix scrollTo when using RefreshControl on Android
Summary:
The issue is that the ScrollResponder mixin assumes that the native scrollable node is the top level element and gets it using `React.findNodeHandle(this)` but since Android wraps the native `ScrollView` component with the `RefreshControl`, it finds the native `RefreshControl` node instead and the scroll command gets ignored because it doesn't exists.

This adds a hook to ScrollResponder mixin to allow specifying what is the native scrollable node.

The bug can be reproduced using this https://gist.github.com/janicduplessis/871c0b6d3ad0acaacba9 in UIExplorer.

Fixes #5725
Closes https://github.com/facebook/react-native/pull/5736

Reviewed By: svcscm

Differential Revision: D2896125

Pulled By: nicklockwood

fb-gh-sync-id: 0a00a20551421982c5bc519c542774877ba15c9b
2016-02-03 11:13:33 -08:00
Nick Lockwood 6941c4e027 Replace `ScrollView.scrollTo()` API with something less ambiguous.
Summary:
public
The current `ScrollView.scrollTo()` API is confusing due to the `(y, x)` parameter order, and the boolean `animated` argument. E.g.

    ScrollView.scrollTo(5, 0, true) // what do these arguments mean?

This diff replaces the API with a configuration object, so the arguments are all explicit:

    ScrollView.scrollTo({x: 0, y: 5, animated: true}) // much better

The `scrollTo()` method checks the argument types, and provides backwards compatibility with the old argument format for now. Using the old API will generate a warning, and this will eventually be upgraded to an error.

Reviewed By: davidaurelio

Differential Revision: D2892287

fb-gh-sync-id: cec4d504242391267c6e863816b6180ced7a7d5e
2016-02-03 04:00:40 -08:00
Kudo Chien 6d65a90017 Allow customized refreshControl in ScrollView for Android
Summary:
Original Android's refreshControl in ScrollView is tightly coupled with AndroidSwipeRefreshLayout. If someone use `ref=` for RefreshControl in ScrollView, it does nothing since RefreshControl in Android return null.

This change allows customized  RefreshControl especially for `ref=` as well as making ScrollView's code clearer.
Closes https://github.com/facebook/react-native/pull/5623

Reviewed By: svcscm

Differential Revision: D2890072

Pulled By: nicklockwood

fb-gh-sync-id: a8fc7746bcc050a6e46fedf3583979f4cb9021b6
2016-02-02 07:12:32 -08:00
Janic Duplessis 1c6e837504 Add a deprecatedPropType module to show deprecation warnings
Summary:
To allow smoother API changes for users we often deprecate props and keep them around for a while before removing them. Right now it is all done manually, this adds a consistent way to show a warning when using a deprecated prop.

This also adds a deprecation warning of the website generated from the deprecatedPropType.

<img width="643" alt="screen shot 2016-01-26 at 7 43 08 pm" src="https://cloud.githubusercontent.com/assets/2677334/12600172/7af28fb0-c465-11e5-85e5-3786852bf522.png">

It also changes places where we added the warnings manually to use deprecatedPropType instead.
Closes https://github.com/facebook/react-native/pull/5566

Reviewed By: svcscm

Differential Revision: D2874629

Pulled By: nicklockwood

fb-gh-sync-id: c3c63bae7bbec26cc146029abd9aa5efbe73f795
2016-01-29 02:05:38 -08:00
August Flanagan 0f7477f9f9 add flag to enable momentum scrolling on iOS
Summary:
Expose a `decelerationNormalEnabled` flag on WebView, which, when enabled, will WebView's ScrollView's `decelerationRate` to `UIScrollViewDecelerationRateNormal`. This gives the WebView the same "momentum" style scrolling as other iOS views.

This was discussed with ide in #5447. Please let me know if there's anything I'm missing, or anything else you'd like to see in this pull request.
Closes https://github.com/facebook/react-native/pull/5527

Reviewed By: svcscm

Differential Revision: D2870312

Pulled By: nicklockwood

fb-gh-sync-id: 7dbfd06a349e3365a5df40c3bacf25a4fdb306cf
2016-01-28 05:36:33 -08:00
Jean Regisser b84f5fb6c9 Added iOS indicatorStyle prop to ScrollView
Summary:
Hi,

The doc wording was adapted from https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIScrollView_Class/#//apple_ref/doc/c_ref/UIScrollViewIndicatorStyle

Note that the iOS doc is misleading, and `UIScrollViewIndicatorStyleDefault` is the same as `UIScrollViewIndicatorStyleBlack` (since iOS 7 I think).

Let me know what you think.
Closes https://github.com/facebook/react-native/pull/5583

Reviewed By: svcscm

Differential Revision: D2870011

Pulled By: nicklockwood

fb-gh-sync-id: d28a96e1a2d4610cbeaee0ae70108ab9d9f05fdb
2016-01-27 10:16:33 -08:00
Nick Lockwood ff6a2c3998 Deprecated `scrollResponderScrollWithoutAnimationTo`
Summary:
public

This diff deprecates `scrollResponderScrollWithoutAnimationTo` and replaces it with an optional `animated` param in `scrollResponderScrollTo`. This is more consistent with our other APIs.

Using the old `ScrollResponder.scrollResponderScrollWithoutAnimationTo` or  `ScrollView.scrollWithoutAnimationTo` functions will still work, but will trigger a warning.

Reviewed By: javache

Differential Revision: D2823479

fb-gh-sync-id: 259966512104ca7b3995c9586144812a91b8d3e9
2016-01-14 07:42:34 -08:00
Janic Duplessis f5062d0840 Add doc for RefreshControl on the website
Summary:
Exposes the doc for RefreshControl and add a link to the component page in ScrollView.
Closes https://github.com/facebook/react-native/pull/5209

Reviewed By: svcscm

Differential Revision: D2818217

Pulled By: mkonicek

fb-gh-sync-id: eb1ae70103e6a02af3a12866509f68eacc413dfd
2016-01-13 11:34:31 -08:00
Janic Duplessis 44f7a00e95 Cross platform PullToRefreshView component
Summary:
Both iOS and Android currently support some sort of native pull to refresh control but the API was very different. I tried implementing a component based on PullToRefreshViewAndroid but that works on both platforms.

I liked the idea of wrapping the ListView or ScrollView with the PullToRefreshView component and allow styling the refresh view with platform specific props if needed. I also like the fact that 'refreshing' is a controlled prop so there is no need to keep a ref to the component or to the stopRefreshing function.

It is a pretty rough start so I'm looking for feedback and ideas to improve on the API before cleaning up everything.

On iOS we could probably deprecate the onRefreshStart property of the ScrollView and implement the native stuff in a PullToRefreshViewManager. We could then add props to customize the look of the UIRefreshControl (tintColor). We could also deprecate the Android only component and remove it later.
Closes https://github.com/facebook/react-native/pull/4915

Reviewed By: svcscm

Differential Revision: D2799246

Pulled By: nicklockwood

fb-gh-sync-id: 75872c12143ddbc05cc91900ab4612e477ca5765
2016-01-04 08:00:29 -08:00
Brent Vatne fef01ed394 ScrollWithouth => ScrollWithout
Summary:
Oops!
Closes https://github.com/facebook/react-native/pull/5029

Reviewed By: svcscm

Differential Revision: D2793490

Pulled By: vjeux

fb-gh-sync-id: 0115d3ef38cad3e838241937263308827e56f25f
2015-12-29 12:42:26 -08:00
Brent Vatne 6df737d1e7 Expose in public interface
Summary:
Allows you to do:
```
var { RecyclerViewBackedScrollView } = require('react-native')
```

Rather than:
```
var RecyclerViewBackedScrollView = require('react-native/Libraries/Components/ScrollView/RecyclerViewBackedScrollView')
```

Also...

- Export `ScrollView` by default rather than `UnimplementedView` for `RecyclerViewBackedScrollView` on iOS -- this makes it easier on the user, so you don't have to always do a conditional for: `if IOS then use ScrollView else use RecyclerViewBackedScrollView`. I can't think of a case where this would lead to undesirable behaviour.
- Add `RecyclerViewBackedScrollView` to `MainReactPackage`
- Fix an issue with `MapView` that threw a red-screen when trying to access constants on Android because there is no `MapView` in open source and MapView.js doesn't have a platform extension.
Closes https://github.com/facebook/react-native/pull/4514

Reviewed By: svcscm

Differential Revision: D2753466

Pulled By: mkonicek

fb-gh-sync-id: 0b6e2133975c911d5117e7531cb9093faf314c52
2015-12-23 10:07:34 -08:00
Dave Miller fcf0431d25 Add support for more Scroll Events to Android
Summary:
public
This adds support for
onScrollBeginDrag/End
onMomentumScrolBegin/End

Reviewed By: astreet

Differential Revision: D2739035

fb-gh-sync-id: 2a49d1df54e5f5cd82008bdb0ffde0881ba39aff
2015-12-16 00:48:28 -08:00
Justas Brazauskas 0e8b207cc3 Bugfix - Typos
Summary:
Fixed few typos in `./Examples` and `./Libraries` folders.
Closes https://github.com/facebook/react-native/pull/4788

Reviewed By: svcscm

Differential Revision: D2759918

Pulled By: androidtrunkagent

fb-gh-sync-id: d692b5c7f561822353e522f9d4dfde7e60b491cf
2015-12-15 09:09:32 -08:00
Pieter De Baets 38db6fa465 Remove scrollview support from UIManager, remove mainScrollView(delegate)
Reviewed By: nicklockwood

Differential Revision: D2692749

fb-gh-sync-id: 48975d2f09f3b2902dfa2e56ff9d34257b2395bc
2015-11-25 04:12:34 -08:00
Roman Telicak 3622e44426 Update removeClippedSubviews prop default value 2015-11-24 16:04:35 +01:00
Martin Konicek 155a609781 Unbreak tests
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
2015-11-20 09:53:28 -08:00
Krzysztof Magiera 1195f9c8e8 Further improvements in RecyclerViewBackedScrollView.
Summary: public
Changed ListView to use onLayout and onContentSizeChange (new) events instead of measure. Updated ScrollView implementation to support contentSizeChange event with an implementation based on onLayout attached to the content view. For RecyclerViewBackedScrollView we need to generate that event directly as it doesn't have a concept of content view.
This greatly improves performance of ListView that uses RecyclerViewBackedScrollView

Reviewed By: mkonicek

Differential Revision: D2679460

fb-gh-sync-id: ba26462d9d3b071965cbe46314f89f0dcfd9db9f
2015-11-20 07:44:31 -08:00
EwanThomas 2faf8632d3 UIRefreshControl added to scroll view
Summary: **What:**

adds `onRefreshStart` property to `ScrollView.js` for displaying and activating pull to refresh.

**Why:**

Javascript implementations seemed a little flakey and inconsistent.  As you can see in the issues below:

https://github.com/facebook/react-native/issues/2356
https://github.com/facebook/react-native/issues/745

So this is an attempt a completely native implementation.

What do you think?

![Image of dog](http://i.imgur.com/HcTQnzJ.gif)
Closes https://github.com/facebook/react-native/pull/4205

Reviewed By: svcscm

Differential Revision: D2674945

Pulled By: nicklockwood

fb-gh-sync-id: 65113a5db9785df5a95c68323c2cdf19f3b217b1
2015-11-19 11:15:48 -08:00
Krzysztof Magiera f2545bafc9 Use requireNativeComponent everywhere.
Reviewed By: sahrens

Differential Revision: D2663780

fb-gh-sync-id: 94a7e2265f6f869a2bdf1576dd8ea76b4c5f0b34
2015-11-18 09:43:28 -08:00
Krzysztof Magiera e6093cff04 Use requireNativeComponent with propTypes for Android components.
Reviewed By: davidaurelio

Differential Revision: D2663502

fb-gh-sync-id: 550e7b7c783ec0463a6beb052c09a768a8086056
2015-11-18 06:36:28 -08:00
Krzysztof Magiera 5695ebdcf4 Perf improvements to RecyclerViewBackedScrollView.
Differential Revision: D2641500

fb-gh-sync-id: 7ec6e2863bccebc98f75f586c0f17d509808d46b
2015-11-11 01:21:26 -08:00
Krzysztof Magiera 8e2ec64763 Use RecyclerViewBackedScrollView in groups feed on Android.
Differential Revision: D2549975

fb-gh-sync-id: 98689a58a69ce8425c695acf74701509816821ae
2015-10-16 07:45:22 -07:00
Krzysztof Magiera f47e8ac6a1 Instrumentation test for native listview component.
Differential Revision: D2549707

fb-gh-sync-id: c9ff379383853c198274778e99a72b313d9dbda9
2015-10-16 03:41:18 -07:00
Krzysztof Magiera 1e52b8297c Wrapper for android RecyclerView to be used by ListView.js
Differential Revision: D2545291

fb-gh-sync-id: 5d745939f6d63aea4cd9bba2f55e68336efc1e9a
2015-10-15 09:22:31 -07:00
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