diff --git a/.eslintrc b/.eslintrc index 5127cd73..31728b5a 100644 --- a/.eslintrc +++ b/.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, diff --git a/src/components/KeyboardAvoidingView/index.js b/src/components/KeyboardAvoidingView/index.js new file mode 100644 index 00000000..ddb87e9a --- /dev/null +++ b/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 ; + } +} + +export default KeyboardAvoidingView; diff --git a/src/components/View/ViewPropTypes.js b/src/components/View/ViewPropTypes.js index 4faadd99..d9129c13 100644 --- a/src/components/View/ViewPropTypes.js +++ b/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, diff --git a/src/index.js b/src/index.js index e7e78cf3..7a5bbf0c 100644 --- a/src/index.js +++ b/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, diff --git a/src/module.js b/src/module.js index 5479f13c..9f211707 100644 --- a/src/module.js +++ b/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';