Commit Graph

49 Commits

Author SHA1 Message Date
Spencer Ahrens 346fe33077 Make invalid scrolling bugs easier to track down
Reviewed By: jingc, olegbl

Differential Revision: D4887662

fbshipit-source-id: d24590fd79ad1b5f6ada79583dbe870b350ec358
2017-04-14 16:16:40 -07:00
Spencer Ahrens 6dbcb47e4c use performanceNow instead of Date.now() in ScrollResponder
Reviewed By: shergin

Differential Revision: D4833701

fbshipit-source-id: cb127cb6c40ecb188100eeb204412401c7772c9e
2017-04-05 18:46:34 -07:00
Spencer Ahrens 27c3e32abf FrameRateLogger JS module
Summary:
This adds a flowified JS module for the FrameRateLogger native module and plugs
it into `ScrollResponder` and `AppRegistry`.

If there is no `FrameRateLogger` native module, then the function calls will be no-ops.

One major limitation is that we can't track animated/programatic scrolls because we don't
have reliable end events. Would be generally useful to add those in a followup though.

Reviewed By: fkgozali

Differential Revision: D4765694

fbshipit-source-id: f3bec771df6ac918200c1afd1a7d8b6da540a4e2
2017-03-24 18:30:59 -07:00
Martin Konicek ad8cbb6dea Support ScrollView.scrollToEnd on Android natively
Summary:
This is a followup for https://github.com/facebook/react-native/pull/12088 and implements the scrolling to end on Android natively rather than sending a large scroll offset from JS.

This turned out to be an OK amount of code, and some reduction in the amount of JavaScript. The only part I'm not particularly happy about is:

```
// ScrollView always has one child - the scrollable area
int bottom = scrollView.getChildAt(0).getHeight() + scrollView.getPaddingBottom();
```

According to multiple sources (e.g. [this SO answer](http://stackoverflow.com/questions/3609297/android-total-height-of-scrollview)) it is the way to get the total size of the scrollable area, similar to`scrollView.contentSize` on iOS but more ugly and relying on the fact the ScrollView always has a single child (hopefully this won't change in future versions of Android).

An alternative is:

```
View lastChild = scrollLayout.getChildAt(scrollLayout.getChildCount() - 1);
int bottom = lastChild.getBottom() + scrollLayout.getPadd
Closes https://github.com/facebook/react-native/pull/12101

Differential Revision: D4481523

Pulled By: mkonicek

fbshipit-source-id: 8c7967a0b9e06890c1e1ea70ad573c6eceb03daf
2017-01-30 10:28:32 -08:00
Martin Konicek 9dee696ed8 Add scrollToEnd to ScrollView and ListView
Summary:
**Motivation**

A basic task of making a React Native ScrollView or ListView scroll to the bottom is currently very hard to accomplish:
- https://github.com/facebook/react-native/issues/8003
- https://github.com/facebook/react-native/issues/913
- http://stackoverflow.com/questions/29829375/how-to-scroll-to-bottom-in-react-native-listview

**NOTE:** If you're building something like a chat app where you want a ListView to keep scrolling to the bottom at all times, it's easiest to use the [react-native-invertible-scrollview](https://github.com/exponent/react-native-invertible-scroll-view) component rather calling `scrollToEnd` manually when layout changes. The invertible-scrollview uses a clever trick to invert the direction of the ScrollView.

This pull request adds a `scrollToEnd` method which scrolls to the bottom if the ScrollView is vertical, to the right if the ScrollView is horizontal.

The implementation is based on this SO answer:
http://stackoverflow.com/questions/952412/uiscrollview-scrol
Closes https://github.com/facebook/react-native/pull/12088

Differential Revision: D4474974

Pulled By: mkonicek

fbshipit-source-id: 6ecf8b3435f47dd3a31e2fd5be6859062711c233
2017-01-27 10:13:29 -08:00
Leland Richardson 71f32fb5a3 Fix documentation for scrollResponderScrollNativeHandleToKeyboard
Summary:
I'm pretty sure this is supposed to be "bottom" as opposed to "top", as it's the offset from the keyboard, which is at the bottom of the screen.
Closes https://github.com/facebook/react-native/pull/11446

Differential Revision: D4339957

Pulled By: lacker

fbshipit-source-id: 62dca544a0167704d76cd972c44570f277ea63aa
2016-12-16 15:13:36 -08:00
Maxime Lapointe d56530d7d5 Reworking keyboardShouldPersistTaps to have a middle ground
Summary:
Right now, the ScrollView's keyboard hiding behavior is either all or nothing: Hide the keyboard on any tap, or do nothing ever. This PR introduces a third mode to keyboardShouldPersistTaps which is much closer to what I consider should be the default.

In the new behavior, the tap responding is done in the bubbling phase (instead of the capture phase like =true). As a result, a child can handle the tap. If no child does, then the ScrollView will receive the tap and will hide the keyboard. As a result, changing TextInput focus works as a user expects, with a single tap and without keyboard hiding. But taping on Text or on the empty part of the ScrollView hides the keyboard and removes the focus.

You can view the behavior in a monkey patched ScrollView demo on rnplay:
https://rnplay.org/apps/E90UYw
https://rnplay.org/apps/UGzhKA

In order to have a uniform props set, i added 3 values to the keyboardShouldPersistTaps:
'never' and 'always' are the same as false and true.
'handled' is the new behavior.

I don't
Closes https://github.com/facebook/react-native/pull/10628

Differential Revision: D4294945

Pulled By: ericvicenti

fbshipit-source-id: 1a753014156cac1a23fabfa8e1faa9a768868ef2
2016-12-07 21:43:35 -08:00
Gaëtan Renaudeau 20e99f5b93 Fix invariant in scrollResponderZoomTo
Summary:
This fixes a cryptic bug to appear when you try to use scrollResponderZoomTo in Android.
before this PR it would break with a `Error: TaskQueue: Error with task : invariant requires an error message argument` because the invariant() was not properly used..

Also, instead of detecting the platform, I think it's better practice to duck type.
Closes https://github.com/facebook/react-native/pull/11186

Differential Revision: D4246674

fbshipit-source-id: 47002a85d8252e5abbd1cd9ecef3d7676fa8615a
2016-11-29 14:43:38 -08:00
Janic Duplessis 552c601921 Don't dismiss keyboard when tapping another text input
Summary:
When using text inputs inside a ScrollView with `keyboardShouldPersistTaps=false` (default behavior) tapping another text input dismisses the keyboard instead of keeping it open and focusing the new text input which I think is the better and expected behavior.

See #10628 for more discussion about that. Note that this affects nothing but the behavior with text inputs unlike #10628.

cc satya164 MaxLap ericvicenti
Closes https://github.com/facebook/react-native/pull/10887

Differential Revision: D4178474

Pulled By: ericvicenti

fbshipit-source-id: 0c62ea2fac0017d559d1f8674b0a686a5e1b3d2d
2016-11-25 05:43:30 -08:00
Tim Yung 331c13d4dc RN: Require {react/lib/ => }ReactNative
Reviewed By: sebmarkbage

Differential Revision: D4024375

fbshipit-source-id: cd2226a3580a7a4ff319d6a93b67b68f2942eb00
2016-10-14 18:59:10 -07:00
David Aurelio 94666f16c7 Auto-fix lint errors
Reviewed By: bestander

Differential Revision: D3683952

fbshipit-source-id: 9484d0b0e86859e8edaca0da1aa13a667f200905
2016-08-09 06:43:46 -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
Nick Lockwood 9ee1f37bad Added native event emitter
Summary:
This is a solution for the problem I raised in https://www.facebook.com/groups/react.native.community/permalink/768218933313687/

I've added a new native base class, `RCTEventEmitter` as well as an equivalent JS class/module `NativeEventEmitter` (RCTEventEmitter.js and EventEmitter.js were taken already).

Instead of arbitrary modules sending events via `bridge.eventDispatcher`, the idea is that any module that sends events should now subclass `RCTEventEmitter`, and provide an equivalent JS module that subclasses `NativeEventEmitter`.

JS code that wants to observe the events should now observe it via the specific JS module rather than via `RCTDeviceEventEmitter` directly. e.g. to observer a keyboard event, instead of writing:

    const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
    RCTDeviceEventEmitter.addListener('keyboardWillShow', (event) => { ... });

You'd now write:

    const Keyboard = require('Keyboard');
    Keyboard.addListener('keyboardWillShow', (event) => { ... });

Within a component, you can also use the `Subscribable.Mixin` as you would previously, but instead of:

     this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', ...);

Write:

    this.addListenerOn(Keyboard, 'keyboardWillShow', ...);

This approach allows the native `RCTKeyboardObserver` module to be created lazily the first time a listener is added, and to stop sending events when the last listener is removed. It also allows us to validate that the event strings being observed and omitted match the supported events for that module.

As a proof-of-concept, I've converted the `RCTStatusBarManager` and `RCTKeyboardObserver` modules to use the new system. I'll convert the rest in a follow up diff.

For now, the new `NativeEventEmitter` JS module wraps the `RCTDeviceEventEmitter` JS module, and just uses the native `RCTEventEmitter` module for bookkeeping. This allows for full backwards compatibility (code that is observing the event via `RCTDeviceEventEmitter` instead of the specific module will still work as expected, albeit with a warning). Once all legacy calls have been removed, this could be refactored to something more elegant internally, whilst maintaining the same public interface.

Note: currently, all device events still share a single global namespace, since they're really all registered on the same emitter instance internally. We should move away from that as soon as possible because it's not intuitive and will likely lead to strange bugs if people add generic events such as "onChange" or "onError" to their modules (which is common practice for components, where it's not a problem).

Reviewed By: javache

Differential Revision: D3269966

fbshipit-source-id: 1412daba850cd373020e1086673ba38ef9193050
2016-05-11 06:27:29 -07:00
Spencer Ahrens 09a34f4d0f Integrate RelayConnection with RNFeed
Reviewed By: ericvicenti

Differential Revision: D2750242

fb-gh-sync-id: fa72d67f554823128bf62786b34e5b9592dc7c89
fbshipit-source-id: fa72d67f554823128bf62786b34e5b9592dc7c89
2016-04-22 22:48:18 -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
Martin Konicek 5f77f15bac Remove confusing warning from ScrollResponder
Summary:I get this warning in cases when nothing went wrong.

Not sure what I can do about the warning. I placed a few sliders in a ScrollView and everything works as expected, so the warning is very confusing.

Lots of people have been hitting the warning and getting confused by it as well:
- https://github.com/facebook/react-native/issues/1501
- https://productpains.com/post/react-native/scrollview-warning-scrollview-doesnt-take-rejection-well-scrolls-anyway (it's one of the [highest rated](https://productpains.com/product/react-native?tab=top) issues).

Reviewed By: sahrens

Differential Revision: D3138736

fb-gh-sync-id: 601b8dfc275a14dff6f17a7903c65bd8347a73e9
fbshipit-source-id: 601b8dfc275a14dff6f17a7903c65bd8347a73e9
2016-04-07 10:15:25 -07: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
PJ Cabrera 3ed66ee7b5 Fix scrollResponderScrollTo deprecated warning
Summary:Fix the warning generated when some ScrollResponder methods call the deprecated form of scrollResponderScrollTo.
Closes https://github.com/facebook/react-native/pull/6138

Differential Revision: D2976681

fb-gh-sync-id: 3f5195aeebbffeccadb4bbffc55d52d7f89a9b2d
shipit-source-id: 3f5195aeebbffeccadb4bbffc55d52d7f89a9b2d
2016-02-25 06:26:34 -08:00
Jack Wink 78a9125de8 Update `ScrollResponder.js` to use new `scrollTo` API
Summary:`scrollResponderInputMeasureAndScrollToKeyboard` is the only non-deprecated method in `ScrollResponder.js` that doesn't use the [new `scrollTo` API](6941c4e027). The other method that uses the deprecated API (`scrollResponderScrollWithoutAnimationTo`) is also deprecated, so it has been left unaltered.
Closes https://github.com/facebook/react-native/pull/5990

Differential Revision: D2953916

Pulled By: nicklockwood

fb-gh-sync-id: d692c598e6b85d1050e58b87146d01b031653a49
shipit-source-id: d692c598e6b85d1050e58b87146d01b031653a49
2016-02-19 05:08:30 -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
Nick Lockwood ee30433b76 Update Android's ScrollView.scrollTo API to match JS/iOS
Summary:
public
We recently updated the `ScrollResponder.scrollResponderScrollTo` method to accept an `animated` argument, and deprecated the `scrollResponderScrollWithoutAnimationTo` method. This change was reflected in the native iOS implementation, but not on Android.

This diff updates the Android ScrollViewManager implementation to match the JS API, and removes the platform-specific fork in the JS code.

Reviewed By: dmmiller

Differential Revision: D2883515

fb-gh-sync-id: e5a0e1cf470e21af837b2311cf1048162ac3aff5
2016-02-01 04:04:35 -08:00
Nick Lockwood 9d0242fdc3 Replace direct access of NativeModules.UIManager with require('UIManager')
Summary:
public
Due to the cross-platform polyfills we have added (and will add in future) to `UIManager.js`, accessing UIManager directly via NativeModules instead of importing the wrapper is discouraged.

This diff fixes a few places where we were doing this inside our own modules.

Note: As a general policy, we should avoid accessing modules via NativeModules anyway. Using wrapper classes allows us to provide static declarations for all the native methods and properties, which can be checked at build time by flow. If we access the modules directly, those interfaces are only known at runtime.

Reviewed By: vjeux

Differential Revision: D2881300

fb-gh-sync-id: 6737358ea8ea6d722cc1941a4b9fa0123a87fc29
2016-01-30 07:36:34 -08:00
Jed Lau affd6230fe self -> this in ScrollResponder
Summary:
I *think* this is causing a crash for me in a release build (curiously, not a debug build):
```
ReferenceError: Can't find variable: self
```

I saw this in 0.18.1, which I assume was renamed to v0.19.0-rc.
Closes https://github.com/facebook/react-native/pull/5562

Reviewed By: svcscm

Differential Revision: D2866491

Pulled By: androidtrunkagent

fb-gh-sync-id: 196f718bf807c5eef676f66f1e15d7bde9475d5b
2016-01-26 14:23:32 -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
Gaëtan Renaudeau 963f26cea8 add ScrollResponder#scrollResponderZoomTo animated second argument
Summary:
ScrollResponder was missing a non animated version for zoomToRect.

- scrollResponderScrollTo <> scrollResponderScrollWithoutAnimationTo
- ~~scrollResponderZoomTo <> 🆕 **scrollResponderZoomWithoutAnimationTo**~~
- `scrollResponderZoomTo(rect, animated = true)`
Closes https://github.com/facebook/react-native/pull/5268

Reviewed By: svcscm

Differential Revision: D2823311

Pulled By: nicklockwood

fb-gh-sync-id: ea409d332963f56e8b58ec2c086db3f6815058f7
2016-01-13 02:55:33 -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
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
Eric Vicenti 5041171b78 Fix ScrollResponder scrollResponderScrollNativeHandleToKeyboard when kb is offscreen
Summary: public

`scrollResponderScrollNativeHandleToKeyboard` would fail silently if there is no keyboard present. This makes sure to do the correct scrolling behavior, by assuming the screen height is where the keyboard would be located.

This still might not work properly in landscape apps, but it should not make the situation worse

Also fix an issue wehre `scrollResponderKeyboardDidHide` would swallow the event

Reviewed By: vjeux

Differential Revision: D2643477

fb-gh-sync-id: f917390f4709361cc47bcd553b214833422ec05d
2015-11-12 19:17: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
Andrei Coman 166a96bcee Fix keyboardShouldPersistTaps default value
Reviewed By: @astreet

Differential Revision: D2507878
2015-10-05 10:25:21 -07:00
Olivier Notteghem 3f213e37d3 Fix scrollTo() method to pass integer as opposed to float
Reviewed By: @​nspaun

Differential Revision: D2480775
2015-09-25 13:01: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
Rui Chen accf6f12e4 Make the scrollResponderScrollNativeHandleToKeyboard works on Android 2015-07-23 18:14:43 -08:00
Rui Chen 93bbc6482d Unbreak the dismissing keyboard behavior on Android 2015-07-22 15:24:42 -08:00
Nathan Spaun 875ab073ea [Treehouse] Sync from android permalink keyboard layout changes 2015-07-13 18:29:54 -08:00
Spencer Ahrens 1c70f33511 [ReactNative] clean lint for Libraries/Components 2015-05-18 15:54:07 -08:00
Ben Alpert a0440daf98 [react-native] Codemod .getNodeHandle, .getNativeNode to React.findNodeHandle 2015-05-13 13:24:37 -07:00
Spencer Ahrens 59997df1c1 [ReactNative] Fix warnings w/h => width/height 2015-05-02 10:22:59 -08:00
Kevin Gozali 6681274f43 [madman] prevent pulling the content down inconsistently when the keyboard shows up 2015-04-03 11:09:20 -08:00
Sumeet Vaidya 36098a8b0d Fixed tap-to-zoom in Groups photo viewer 2015-04-02 10:42:22 -08:00
Edward Kim 3e6c2e80ba Remove duplication in ScrollResponder.js | Edward Kim
Summary:
I think this line is a legacy code from `NativeModulesDeprecated`.
Closes https://github.com/facebook/react-native/pull/340
Github Author: Edward Kim <onward.edkim@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-03-27 09:30:18 -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
Spencer Ahrens efae175a8e [react-packager][streamline oss] Move open sourced JS source to react-native-github 2015-02-19 21:25:11 -08:00