From dd78b09741416e62a0a8156b1053f7086408c38f Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Wed, 11 Feb 2015 18:26:03 -0800 Subject: [PATCH] [ReactNative] Add warning when using onScroll without throttleScrollCallbackMS --- Examples/UIExplorer/ScrollViewExample.js | 14 +++++++--- .../Components/ScrollView/ScrollView.ios.js | 12 +++++++++ README.md | 27 ++++++++++--------- 3 files changed, 37 insertions(+), 16 deletions(-) diff --git a/Examples/UIExplorer/ScrollViewExample.js b/Examples/UIExplorer/ScrollViewExample.js index bfb35d4bc..68df23b1d 100644 --- a/Examples/UIExplorer/ScrollViewExample.js +++ b/Examples/UIExplorer/ScrollViewExample.js @@ -20,22 +20,28 @@ exports.examples = [ title: '', description: 'To make content scrollable, wrap it within a component', render: function() { - return { console.log('onScroll!'); }} + throttleScrollCallbackMS={200} contentInset={{top: -50}} style={styles.scrollView}> {THUMBS.map(createThumbRow)} - ; + + ); } }, { title: ' (horizontal = true)', description: 'You can display \'s child components horizontally rather than vertically', render: function() { - return {THUMBS.map(createThumbRow)} - ; + + ); } }]; diff --git a/Libraries/Components/ScrollView/ScrollView.ios.js b/Libraries/Components/ScrollView/ScrollView.ios.js index dd3057d8a..24e06b367 100644 --- a/Libraries/Components/ScrollView/ScrollView.ios.js +++ b/Libraries/Components/ScrollView/ScrollView.ios.js @@ -25,6 +25,7 @@ var invariant = require('invariant'); var merge = require('merge'); var nativePropType = require('nativePropType'); var validAttributesFromPropTypes = require('validAttributesFromPropTypes'); +var warning = require('warning'); var PropTypes = React.PropTypes; @@ -192,6 +193,17 @@ var ScrollView = React.createClass({ ') must by applied through the contentContainerStyle prop.' ); } + if (__DEV__) { + warning( + this.props.onScroll && !this.props.throttleScrollCallbackMS, + 'You specified `onScroll` on a but not ' + + '`throttleScrollCallbackMS`. You will only receive one event. ' + + 'Using `16` you get all the events but be aware that it may cause ' + + 'frame drops, use a bigger number if you don\'t need as much ' + + 'precision.' + ); + } + var contentContainer = , )` at the bottom of your JS file, and update `jsCodeLocation` to match your JS file name and location. -Q. Can I submit my own React Native app to the App Store? +##### Q. Can I submit my own React Native app to the App Store? A. Not yet, but you will be able to soon. If you build something you want to submit to the App Store, come talk to us ASAP. -Q. How do I deploy to my device? +##### Q. How do I deploy to my device? A. You can change `localhost` in `AppDelegate.m` to your laptop's IP address and grab the bundle over the same Wi-Fi network. You can also download the bundle that the React packager generates, save it to the file `main.jsbundle`, and add it @@ -121,20 +124,20 @@ as a static resource in your Xcode project. Then set the `jsCodeLocation` in `AppDelegate.m` to point to that file and deploy to your device like you would any other app. -Q. What's up with this private repo? Why aren't you just open sourcing it now? +##### Q. What's up with this private repo? Why aren't you just open sourcing it now? A. We want input from the React community before we open the floodgates so we can incorporate your feedback, and we also have a bunch more features we want to add to make a more complete offering before we open source. -Q. Do you have to ship a JS runtime with your apps? +##### Q. Do you have to ship a JS runtime with your apps? A. No, we just use the JavaScriptCore public API that is part of iOS 7 and later. -Q. How do I add more native capabilities? +##### Q. How do I add more native capabilities? A. React Native is designed to be extensible - come talk to us, we would love to work with you. -Q. Can I reuse existing iOS code? +##### Q. Can I reuse existing iOS code? A. Yes, React Native is designed to be extensible and allow integration of all sorts of native components, such as `UINavigationController` (available as ``), `MKMapView` (not available yet), or your own custom