From 5a0cd5d33dbd66e7ab6faf3704cf86cea0409e03 Mon Sep 17 00:00:00 2001 From: Jax Date: Mon, 27 Jun 2016 10:23:18 +1000 Subject: [PATCH 1/3] Fix wrong spacing when external physical keyboard is connected --- KeyboardSpacer.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/KeyboardSpacer.js b/KeyboardSpacer.js index ef0b76e..541370d 100644 --- a/KeyboardSpacer.js +++ b/KeyboardSpacer.js @@ -6,6 +6,7 @@ import { Keyboard, LayoutAnimation, View, + Dimensions, Platform, StyleSheet } from 'react-native'; @@ -78,7 +79,13 @@ export default class KeyboardSpacer extends Component { if (!frames.endCoordinates) { return; } - const keyboardSpace = frames.endCoordinates.height + this.props.topSpacing; + + // get updated on rotation + const screenHeight = Dimensions.get('window').height; + // when external physical keyboard is connected + // frames.endCoordinates.height still equals virtual keyboard height + // however only the keyboard toolbar is showing if there should be one + const keyboardSpace = (screenHeight - frames.endCoordinates.screenY) + this.props.topSpacing; this.setState({ keyboardSpace, isKeyboardOpened: true From 08736be1299758393db09ddd84299921a2e68f74 Mon Sep 17 00:00:00 2001 From: "James G. Kim" Date: Thu, 8 Dec 2016 12:42:44 +0900 Subject: [PATCH 2/3] Drop `animationConfig` prop and use `keyboard` easing --- KeyboardSpacer.js | 36 +++++++++++------------------------- 1 file changed, 11 insertions(+), 25 deletions(-) diff --git a/KeyboardSpacer.js b/KeyboardSpacer.js index 541370d..d677c77 100644 --- a/KeyboardSpacer.js +++ b/KeyboardSpacer.js @@ -24,24 +24,10 @@ export default class KeyboardSpacer extends Component { topSpacing: PropTypes.number, onToggle: PropTypes.func, style: View.propTypes.style, - animationConfig: PropTypes.object, }; static defaultProps = { topSpacing: 0, - // From: https://medium.com/man-moon/writing-modern-react-native-ui-e317ff956f02 - animationConfig: { - duration: 500, - create: { - duration: 300, - type: LayoutAnimation.Types.easeInEaseOut, - property: LayoutAnimation.Properties.opacity - }, - update: { - type: LayoutAnimation.Types.spring, - springDamping: 200 - } - }, onToggle: () => null, }; @@ -65,34 +51,34 @@ export default class KeyboardSpacer extends Component { ]; } - componentWillUpdate(props, state) { - if (state.isKeyboardOpened !== this.state.isKeyboardOpened) { - LayoutAnimation.configureNext(props.animationConfig); - } - } - componentWillUnmount() { this._listeners.forEach(listener => listener.remove()); } - updateKeyboardSpace(frames) { - if (!frames.endCoordinates) { + updateKeyboardSpace(event) { + if (!event.endCoordinates) { return; } + const animationConfig = LayoutAnimation.create(event.duration, LayoutAnimation.Types[event.easing]); + LayoutAnimation.configureNext(animationConfig); + // get updated on rotation const screenHeight = Dimensions.get('window').height; // when external physical keyboard is connected - // frames.endCoordinates.height still equals virtual keyboard height + // event.endCoordinates.height still equals virtual keyboard height // however only the keyboard toolbar is showing if there should be one - const keyboardSpace = (screenHeight - frames.endCoordinates.screenY) + this.props.topSpacing; + const keyboardSpace = (screenHeight - event.endCoordinates.screenY) + this.props.topSpacing; this.setState({ keyboardSpace, isKeyboardOpened: true }, this.props.onToggle(true, keyboardSpace)); } - resetKeyboardSpace() { + resetKeyboardSpace(event) { + const animationConfig = LayoutAnimation.create(event.duration, LayoutAnimation.Types[event.easing]); + LayoutAnimation.configureNext(animationConfig); + this.setState({ keyboardSpace: 0, isKeyboardOpened: false From 6810afd0d6913f19847fe9a9b05aaf7496367461 Mon Sep 17 00:00:00 2001 From: "James G. Kim" Date: Thu, 8 Dec 2016 17:18:43 +0900 Subject: [PATCH 3/3] Add LayoutAnimation config fallback for Android --- KeyboardSpacer.js | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/KeyboardSpacer.js b/KeyboardSpacer.js index d677c77..43eefb9 100644 --- a/KeyboardSpacer.js +++ b/KeyboardSpacer.js @@ -19,6 +19,20 @@ const styles = StyleSheet.create({ }, }); +// From: https://medium.com/man-moon/writing-modern-react-native-ui-e317ff956f02 +const defaultAnimation = { + duration: 500, + create: { + duration: 300, + type: LayoutAnimation.Types.easeInEaseOut, + property: LayoutAnimation.Properties.opacity + }, + update: { + type: LayoutAnimation.Types.spring, + springDamping: 200 + } +}; + export default class KeyboardSpacer extends Component { static propTypes = { topSpacing: PropTypes.number, @@ -60,7 +74,14 @@ export default class KeyboardSpacer extends Component { return; } - const animationConfig = LayoutAnimation.create(event.duration, LayoutAnimation.Types[event.easing]); + let animationConfig = defaultAnimation; + if (Platform.OS === 'ios') { + animationConfig = LayoutAnimation.create( + event.duration, + LayoutAnimation.Types[event.easing], + LayoutAnimation.Properties.opacity, + ); + } LayoutAnimation.configureNext(animationConfig); // get updated on rotation @@ -76,7 +97,14 @@ export default class KeyboardSpacer extends Component { } resetKeyboardSpace(event) { - const animationConfig = LayoutAnimation.create(event.duration, LayoutAnimation.Types[event.easing]); + let animationConfig = defaultAnimation; + if (Platform.OS === 'ios') { + animationConfig = LayoutAnimation.create( + event.duration, + LayoutAnimation.Types[event.easing], + LayoutAnimation.Properties.opacity, + ); + } LayoutAnimation.configureNext(animationConfig); this.setState({