diff --git a/app/components/layout/keyboard_layout/keyboard_layout.js b/app/components/layout/keyboard_layout/keyboard_layout.js index ed1932f92..9a83e0ad4 100644 --- a/app/components/layout/keyboard_layout/keyboard_layout.js +++ b/app/components/layout/keyboard_layout/keyboard_layout.js @@ -3,15 +3,15 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {KeyboardAvoidingView, Platform, View} from 'react-native'; +import {Animated, Keyboard, Platform, View} from 'react-native'; import {makeStyleSheetFromTheme} from 'app/utils/theme'; +const {View: AnimatedView} = Animated; + export default class KeyboardLayout extends PureComponent { static propTypes = { - behaviour: PropTypes.string, children: PropTypes.node, - keyboardVerticalOffset: PropTypes.number, statusBarHeight: PropTypes.number, theme: PropTypes.object.isRequired }; @@ -20,8 +20,47 @@ export default class KeyboardLayout extends PureComponent { keyboardVerticalOffset: 0 }; + constructor(props) { + super(props); + this.subscriptions = []; + this.state = { + bottom: new Animated.Value(0) + }; + } + + componentWillMount() { + if (Platform.OS === 'ios') { + this.subscriptions = [ + Keyboard.addListener('keyboardWillChangeFrame', this.onKeyboardChange) + ]; + } + } + + componentWillUnmount() { + this.subscriptions.forEach((sub) => sub.remove()); + } + + onKeyboardChange = (e) => { + if (!e) { + this.setState({bottom: new Animated.Value(0)}); + return; + } + + const {endCoordinates, duration, startCoordinates} = e; + + let height = 0; + if (startCoordinates.height < endCoordinates.height) { + height = endCoordinates.height; + } + + Animated.timing(this.state.bottom, { + toValue: height, + duration + }).start(); + }; + render() { - const {behaviour, children, keyboardVerticalOffset, statusBarHeight, theme, ...otherProps} = this.props; + const {children, theme, ...otherProps} = this.props; const style = getStyleFromTheme(theme); if (Platform.OS === 'android') { @@ -35,22 +74,12 @@ export default class KeyboardLayout extends PureComponent { ); } - let height = 0; - if (statusBarHeight > 20) { - height = (statusBarHeight - 20) + keyboardVerticalOffset; - } else { - height = keyboardVerticalOffset; - } - return ( - {children} - + ); } } @@ -58,9 +87,9 @@ export default class KeyboardLayout extends PureComponent { const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { return { keyboardLayout: { + position: 'relative', backgroundColor: theme.centerChannelBg, - flex: 1, - paddingBottom: 0 + flex: 1 } }; }); diff --git a/app/components/post_textbox/post_textbox.js b/app/components/post_textbox/post_textbox.js index 1af1b4975..f6d2a2af9 100644 --- a/app/components/post_textbox/post_textbox.js +++ b/app/components/post_textbox/post_textbox.js @@ -448,6 +448,7 @@ class PostTextbox extends PureComponent { onFocus={this.handleFocus} onBlur={this.handleBlur} onEndEditing={this.handleEndEditing} + disableFullscreenUI={true} /> {this.renderSendButton()} diff --git a/app/components/text_input_with_localized_placeholder.js b/app/components/text_input_with_localized_placeholder.js index e0f27a968..af64a21b8 100644 --- a/app/components/text_input_with_localized_placeholder.js +++ b/app/components/text_input_with_localized_placeholder.js @@ -33,6 +33,7 @@ class TextInputWithLocalizedPlaceholder extends PureComponent { ref='input' {...otherProps} placeholder={placeholderString} + disableFullscreenUI={true} /> ); } diff --git a/app/screens/login/login.js b/app/screens/login/login.js index 63e904ad4..6262b0a4d 100644 --- a/app/screens/login/login.js +++ b/app/screens/login/login.js @@ -369,6 +369,7 @@ class Login extends PureComponent { underlineColorAndroid='transparent' onSubmitEditing={this.passwordFocus} blurOnSubmit={false} + disableFullscreenUI={true} /> {proceed}