@dokuhero/react-native-components
Version:
Sets of React Native components that works with dokuhero/react-native-theme and react-i18next
72 lines • 3.29 kB
JavaScript
// Thanks to: https://github.com/Andr3wHur5t/react-native-keyboard-spacer
import * as tslib_1 from "tslib";
import React from 'react';
import { Keyboard, LayoutAnimation, Platform, ScrollView, View } from 'react-native';
var keyboardShowEvt = Platform.OS === 'android' ? 'keyboardDidShow' : 'keyboardWillShow';
var keyboardHideEvt = Platform.OS === 'android' ? 'keyboardDidHide' : 'keyboardWillHide';
var KeyboardSafeView = /** @class */ (function (_super) {
tslib_1.__extends(KeyboardSafeView, _super);
function KeyboardSafeView(props) {
var _this = _super.call(this, props) || this;
_this.state = {
spacerHeight: 0
// childHeight: Dimensions.get('window').height
};
_this.keyboardHideListener = _this.keyboardHideListener.bind(_this);
_this.keyboardShowListener = _this.keyboardShowListener.bind(_this);
return _this;
}
KeyboardSafeView.prototype.keyboardShowListener = function (e) {
var _this = this;
if (!e || !e.endCoordinates) {
return;
}
this.showListenerTimout = setTimeout(function () {
var keyboardVerticalOffset = _this.props.keyboardVerticalOffset;
var animationConfig = LayoutAnimation.create(1000, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity);
LayoutAnimation.configureNext(animationConfig);
_this.setState({
spacerHeight: e.endCoordinates.height + (keyboardVerticalOffset || 0)
});
}, 300);
};
KeyboardSafeView.prototype.keyboardHideListener = function () {
clearTimeout(this.showListenerTimout);
var animationConfig = LayoutAnimation.create(500, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity);
LayoutAnimation.configureNext(animationConfig);
this.setState({ spacerHeight: 0 });
};
KeyboardSafeView.prototype.componentDidMount = function () {
Keyboard.addListener(keyboardShowEvt, this.keyboardShowListener);
Keyboard.addListener(keyboardHideEvt, this.keyboardHideListener);
};
KeyboardSafeView.prototype.componentWillUnmount = function () {
Keyboard.removeListener(keyboardShowEvt, this.keyboardShowListener);
Keyboard.removeListener(keyboardHideEvt, this.keyboardHideListener);
};
KeyboardSafeView.prototype.render = function () {
var spacerBackgroundColor = this.props.spacerBackgroundColor;
var spacerHeight = this.state.spacerHeight;
return (<View style={{
flex: 1
}}>
<View style={{ flex: 1 }}>
<ScrollView
// scrollEnabled={height > 0}
contentContainerStyle={{ flexGrow: 1 }} keyboardShouldPersistTaps="handled" alwaysBounceVertical={false}>
{this.props.children}
</ScrollView>
</View>
<View style={{
backgroundColor: spacerBackgroundColor,
left: 0,
right: 0,
bottom: 0,
height: spacerHeight
}}/>
</View>);
};
return KeyboardSafeView;
}(React.Component));
export { KeyboardSafeView };
//# sourceMappingURL=KeyboardSafeView.js.map