From a331bb752643c406a34240d292e641c520273f65 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Tue, 16 Jun 2015 15:40:52 -0700 Subject: [PATCH] [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 Test Plan: Imported from GitHub, without a `Test Plan:` line. --- Libraries/Components/ScrollView/ScrollView.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 8952fb0d1e..512d8dbd6a 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -42,6 +42,14 @@ var INNERVIEW = 'InnerScrollView'; * Component that wraps platform ScrollView while providing * integration with touch locking "responder" system. * + * Keep in mind that ScrollViews must have a bounded height in order to work, + * since they contain unbounded-height children into a bounded container (via + * a scroll interaction). In order to bound the height of a ScrollView, either + * set the height of the view directly (discouraged) or make sure all parent + * views have bounded height. Forgetting to transfer `{flex: 1}` down the + * view stack can lead to errors here, which the element inspector makes + * easy to debug. + * * Doesn't yet support other contained responders from blocking this scroll * view from becoming the responder. */