Browse files

Override onContentSizeChange prop on ScrollView before rendering

We got a report that onContentSizeChange function was being called with an object instead of a number for width, sometimes. Upon debugging, it looked like the param being passed in was a native event wrapper. Tim eventually figured out that this is because there's a TextInput child, and the event bubbles: diffusion/FBS/browse/master/fbobjc/Libraries/FBReactKit/js/react-native-github/Libraries/Text/RCTTextViewManager.m;afbdef32df50$39

Because ScrollView just passes all its props down to the component it eventually renders (RCTScrollView on iOS), the TextInput event bubbles up and triggers the onContentSizeChange prop that was passed in directly, instead of going through the layer in ScrollView that normally unpacks width/height from the native event: diffusion/FBS/browse/master/fbobjc/Libraries/FBReactKit/js/react-native-github/Libraries/Components/ScrollView/ScrollView.js;247ddb2022151b68dd9f83a888b6e0ec9923737a$413-416

Overriding the prop before passing down to RCTScrollView will break that chain, so that the event will continue to bubble but it won't find the incorrect prop from ScrollView.

Reviewed By: yungsters

Differential Revision: D3999689

fbshipit-source-id: d6c3bf711969b3e1c6fc1e51fd44c6894910bc3d
  • Loading branch information...
1 parent de70a62 commit a5698f5cea1722810656cd880601d50d754d8560 @jingc jingc committed with Facebook Github Bot Oct 11, 2016
Showing with 3 additions and 0 deletions.
  1. +3 −0 Libraries/Components/ScrollView/ScrollView.js
@@ -475,6 +475,9 @@ const ScrollView = React.createClass({
style: ([baseStyle,]: ?Array<any>),
+ // Override the onContentSizeChange from props, since this event can
+ // bubble up from TextInputs
+ onContentSizeChange: null,
onTouchStart: this.scrollResponderHandleTouchStart,
onTouchMove: this.scrollResponderHandleTouchMove,
onTouchEnd: this.scrollResponderHandleTouchEnd,

0 comments on commit a5698f5

Please sign in to comment.