Add type for onLayout

Reviewed By: sahrens

Differential Revision: D5364203

fbshipit-source-id: ad87179422b0e595fc78db21a3108d50ba31564c

Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -21,13 +21,8 @@ const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 
 import type EmitterSubscription from 'EmitterSubscription';
+import type {ViewLayout, ViewLayoutEvent} from 'ViewPropTypes';
 
-type Rect = {
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-};
 type ScreenRect = {
   screenX: number,
   screenY: number,
@@ -40,11 +35,6 @@ type KeyboardChangeEvent = {
   duration?: number,
   easing?: string,
 };
-type LayoutEvent = {
-  nativeEvent: {
-    layout: Rect,
-  }
-};
 
 const viewRef = 'VIEW';
 
@@ -85,7 +75,7 @@ const KeyboardAvoidingView = React.createClass({
   },
 
   subscriptions: ([]: Array<EmitterSubscription>),
-  frame: (null: ?Rect),
+  frame: (null: ?ViewLayout),
 
   relativeKeyboardHeight(keyboardFrame: ScreenRect): number {
     const frame = this.frame;
@@ -121,7 +111,7 @@ const KeyboardAvoidingView = React.createClass({
     this.setState({bottom: height});
   },
 
-  onLayout(event: LayoutEvent) {
+  onLayout(event: ViewLayoutEvent) {
     this.frame = event.nativeEvent.layout;
   },
 

Libraries/Components/View/ViewPropTypes.js

@@ -36,6 +36,19 @@ import type {TVViewProps} from 'TVViewPropTypes';
 
 const stylePropType = StyleSheetPropType(ViewStylePropTypes);
 
+export type ViewLayout = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+}
+
+export type ViewLayoutEvent = {
+  nativeEvent: {
+    layout: ViewLayout,
+  }
+}
+
 // There's no easy way to create a different type if(Platform.isTVOS):
 // so we must include TVViewProps
 export type ViewProps = {
@@ -50,6 +63,7 @@ export type ViewProps = {
   onMagicTap?: Function,
   testID?: string,
   nativeID?: string,
+  onLayout?: (event: ViewLayoutEvent) => void,
   onResponderGrant?: Function,
   onResponderMove?: Function,
   onResponderReject?: Function,

RNTester/js/LayoutEventsExample.js

@@ -21,25 +21,14 @@ var {
   View,
 } = ReactNative;
 
-type Layout = {
+import type {ViewLayout, ViewLayoutEvent} from 'ViewPropTypes';
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-
-type LayoutEvent = {
-  nativeEvent: {
-    layout: Layout,
-  };
-};
 
 type State = {
   containerStyle?: { width: number },
   extraText?: string,
-  imageLayout?: Layout,
+  imageLayout?: ViewLayout,
-  textLayout?: Layout,
+  textLayout?: ViewLayout,
-  viewLayout?: Layout,
+  viewLayout?: ViewLayout,
   viewStyle: { margin: number },
 };
 
@@ -76,17 +65,17 @@ class LayoutEventExample extends React.Component {
     this.setState({containerStyle: {width: 280}});
   };
 
-  onViewLayout = (e: LayoutEvent) => {
+  onViewLayout = (e: ViewLayoutEvent) => {
     console.log('received view layout event\n', e.nativeEvent);
     this.setState({viewLayout: e.nativeEvent.layout});
   };
 
-  onTextLayout = (e: LayoutEvent) => {
+  onTextLayout = (e: ViewLayoutEvent) => {
     console.log('received text layout event\n', e.nativeEvent);
     this.setState({textLayout: e.nativeEvent.layout});
   };
 
-  onImageLayout = (e: LayoutEvent) => {
+  onImageLayout = (e: ViewLayoutEvent) => {
     console.log('received image layout event\n', e.nativeEvent);
     this.setState({imageLayout: e.nativeEvent.layout});
   };