[add] basic support for KeyboardAvoidingView

Close #624

.eslintrc

@@ -56,7 +56,6 @@
     "no-dupe-class-members": 2,
     "no-dupe-keys": 2,
     "no-duplicate-case": 2,
-    "no-duplicate-imports": 2,
     "no-empty-character-class": 2,
     "no-empty-pattern": 2,
     "no-eval": 2,

src/components/KeyboardAvoidingView/index.js

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2017-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule KeyboardAvoidingView
+ * @flow
+ */
+
+import View from '../View';
+import ViewPropTypes from '../View/ViewPropTypes';
+import { number, oneOf } from 'prop-types';
+import React, { Component } from 'react';
+
+import type { ViewLayout, ViewLayoutEvent } from '../View/ViewPropTypes';
+
+class KeyboardAvoidingView extends Component {
+  static propTypes = {
+    ...ViewPropTypes,
+    behavior: oneOf(['height', 'padding', 'position']),
+    contentContainerStyle: ViewPropTypes.style,
+    keyboardVerticalOffset: number.isRequired
+  };
+
+  static defaultProps = {
+    keyboardVerticalOffset: 0
+  };
+
+  frame: ?ViewLayout = null;
+
+  relativeKeyboardHeight(keyboardFrame: Object): number {
+    const frame = this.frame;
+    if (!frame || !keyboardFrame) {
+      return 0;
+    }
+    const keyboardY = keyboardFrame.screenY - this.props.keyboardVerticalOffset;
+    return Math.max(frame.y + frame.height - keyboardY, 0);
+  }
+
+  onKeyboardChange(event: Object) {}
+
+  onLayout(event: ViewLayoutEvent) {
+    this.frame = event.nativeEvent.layout;
+  }
+
+  render() {
+    const {
+      /* eslint-disable */
+      behavior,
+      contentContainerStyle,
+      keyboardVerticalOffset,
+      /* eslint-enable */
+      ...rest
+    } = this.props;
+
+    return <View onLayout={this.onLayout} {...rest} />;
+  }
+}
+
+export default KeyboardAvoidingView;

src/components/View/ViewPropTypes.js

@@ -16,6 +16,19 @@ import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
 import ViewStylePropTypes from './ViewStylePropTypes';
 import { any, bool, func, oneOf } from 'prop-types';
 
+export type ViewLayout = {
+  x: number,
+  y: number,
+  width: number,
+  height: number
+};
+
+export type ViewLayoutEvent = {
+  nativeEvent: {
+    layout: ViewLayout
+  }
+};
+
 const ViewPropTypes = {
   ...BaseComponentPropTypes,
   children: any,

src/index.js

@@ -35,6 +35,7 @@ import {
   Button,
   FlatList,
   Image,
+  KeyboardAvoidingView,
   ListView,
   Modal,
   Picker,
@@ -101,6 +102,7 @@ const ReactNative = {
   Button,
   FlatList,
   Image,
+  KeyboardAvoidingView,
   ListView,
   Modal,
   Picker,

src/module.js

@@ -30,6 +30,7 @@ export { default as ActivityIndicator } from './components/ActivityIndicator';
 export { default as Button } from './components/Button';
 export { default as FlatList } from './components/FlatList';
 export { default as Image } from './components/Image';
+export { default as KeyboardAvoidingView } from './components/KeyboardAvoidingView';
 export { default as ListView } from './components/ListView';
 export { default as Modal } from './components/Modal';
 export { default as Picker } from './components/Picker';