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}