diff --git a/package.json b/package.json index 5df9c4d..6111902 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-native-keyboard-accessory", - "version": "0.1.9", + "name": "@datacamp/react-native-keyboard-accessory", + "version": "0.5.0", "description": "A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.", "author": { "name": "Arda Oğulcan Pektaş", @@ -35,7 +35,7 @@ "android" ], "license": "MIT", - "main": "index.js", + "main": "src/index.js", "peerDependencies": { "prop-types": ">= 15", "react": ">= 16", diff --git a/src/KeyboardAccessoryNavigation.js b/src/KeyboardAccessoryNavigation.js index 52b20ba..116070e 100644 --- a/src/KeyboardAccessoryNavigation.js +++ b/src/KeyboardAccessoryNavigation.js @@ -131,12 +131,12 @@ KeyboardAccessoryNavigation.propTypes = { nextHidden: PropTypes.bool, previousHidden: PropTypes.bool, tintColor: PropTypes.string, - accessoryStyle: (View.propTypes||ViewPropTypes).style, - previousButtonStyle: (View.propTypes||ViewPropTypes).style, - nextButtonStyle: (View.propTypes||ViewPropTypes).style, - doneButtonStyle: (View.propTypes||ViewPropTypes).style, - doneButtonTitleStyle: Text.propTypes.style, - infoMessageStyle: Text.propTypes.style, + accessoryStyle: PropTypes.object, + previousButtonStyle: PropTypes.object, + nextButtonStyle: PropTypes.object, + doneButtonStyle: PropTypes.object, + doneButtonTitleStyle: PropTypes.object, + infoMessageStyle: PropTypes.object, nextButtonDirection: PropTypes.oneOf(['up', 'down', 'left', 'right']), previousButtonDirection: PropTypes.oneOf(['up', 'down', 'left', 'right']), } diff --git a/src/KeyboardAccessoryView.js b/src/KeyboardAccessoryView.js index 1380c32..6c6bf46 100644 --- a/src/KeyboardAccessoryView.js +++ b/src/KeyboardAccessoryView.js @@ -1,5 +1,5 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; import { View, @@ -9,18 +9,17 @@ import { StyleSheet, ViewPropTypes, Dimensions -} from 'react-native'; +} from "react-native"; const accessoryAnimation = (duration, easing, animationConfig = null) => { - if (animationConfig) { - if (typeof animationConfig === 'function') { + if (typeof animationConfig === "function") { return animationConfig(duration, easing); } return animationConfig; } - if (Platform.OS === 'android') { + if (Platform.OS === "android") { return { duration: 200, create: { @@ -29,20 +28,21 @@ const accessoryAnimation = (duration, easing, animationConfig = null) => { property: LayoutAnimation.Properties.opacity }, update: { - type: LayoutAnimation.Types.linear, + type: LayoutAnimation.Types.linear } - } + }; } return LayoutAnimation.create( duration, LayoutAnimation.Types[easing], - LayoutAnimation.Properties.opacity, - ) -} + LayoutAnimation.Properties.opacity + ); +}; -const { height, width } = Dimensions.get('window') -const isSafeAreaSupported = Platform.OS === 'ios' && (height > 800 || width > 800) +const { height, width } = Dimensions.get("window"); +const isSafeAreaSupported = + Platform.OS === "ios" && (height > 800 || width > 800); class KeyboardAccessoryView extends Component { constructor(props) { @@ -52,16 +52,24 @@ class KeyboardAccessoryView extends Component { keyboardHeight: 0, accessoryHeight: 50, visibleAccessoryHeight: 50, - isKeyboardVisible: false, - } + isKeyboardVisible: false + }; } - componentDidMount () { - const keyboardShowEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow'; - const keyboardHideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide'; + componentDidMount() { + const keyboardShowEvent = + Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow"; + const keyboardHideEvent = + Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide"; - this.keyboardShowEventListener = Keyboard.addListener(keyboardShowEvent, this.handleKeyboardShow); - this.keyboardHideEventListener = Keyboard.addListener(keyboardHideEvent, this.handleKeyboardHide); + this.keyboardShowEventListener = Keyboard.addListener( + keyboardShowEvent, + this.handleKeyboardShow + ); + this.keyboardHideEventListener = Keyboard.addListener( + keyboardHideEvent, + this.handleKeyboardHide + ); } componentWillUnmount() { @@ -69,14 +77,17 @@ class KeyboardAccessoryView extends Component { this.keyboardHideEventListener.remove(); } - handleChildrenLayout = (layoutEvent) => { + handleChildrenLayout = layoutEvent => { this.setState({ visibleAccessoryHeight: layoutEvent.nativeEvent.layout.height, - accessoryHeight: this.props.alwaysVisible || this.state.isKeyboardVisible ? layoutEvent.nativeEvent.layout.height : 0, + accessoryHeight: + this.props.alwaysVisible || this.state.isKeyboardVisible + ? layoutEvent.nativeEvent.layout.height + : 0 }); - } + }; - handleKeyboardShow = (keyboardEvent) => { + handleKeyboardShow = keyboardEvent => { if (!keyboardEvent.endCoordinates) { return; } @@ -91,55 +102,73 @@ class KeyboardAccessoryView extends Component { const keyboardAnimate = () => { const { animationConfig, animateOn } = this.props; - if (animateOn === 'all' || Platform.OS === animateOn) { + if (animateOn === "all" || Platform.OS === animateOn) { LayoutAnimation.configureNext( - accessoryAnimation(keyboardEvent.duration, keyboardEvent.easing, animationConfig) + accessoryAnimation( + keyboardEvent.duration, + keyboardEvent.easing, + animationConfig + ) ); } this.setState({ isKeyboardVisible: true, keyboardHeight: keyboardHeight - }) + }); }; - if (Platform.OS === 'ios' || typeof this.props.onKeyboardShowDelay !== 'number') { + if ( + Platform.OS === "ios" || + typeof this.props.onKeyboardShowDelay !== "number" + ) { keyboardAnimate(); } else { setTimeout(() => { - keyboardAnimate() + keyboardAnimate(); }, this.props.onKeyboardShowDelay); } this.setState({ isKeyboardVisible: true, keyboardHeight: keyboardHeight, - accessoryHeight: this.state.visibleAccessoryHeight, - }) - } + accessoryHeight: this.state.visibleAccessoryHeight + }); + + if (this.props.onKeyboardShow) { + this.props.onKeyboardShow(); + } + }; - handleKeyboardHide = (keyboardEvent) => { + handleKeyboardHide = keyboardEvent => { const { animateOn, animationConfig } = this.props; - if (animateOn === 'all' || Platform.OS === animateOn) { + if (animateOn === "all" || Platform.OS === animateOn) { LayoutAnimation.configureNext( - animationConfig || accessoryAnimation(keyboardEvent.duration, keyboardEvent.easing, animationConfig) + animationConfig || + accessoryAnimation( + keyboardEvent.duration, + keyboardEvent.easing, + animationConfig + ) ); } this.setState({ isKeyboardVisible: false, keyboardHeight: 0, - accessoryHeight: this.props.alwaysVisible ? this.state.visibleAccessoryHeight : 0, - }) - } + accessoryHeight: this.props.alwaysVisible + ? this.state.visibleAccessoryHeight + : 0 + }); + + if (this.props.onKeyboardHide) { + this.props.onKeyboardHide(); + } + }; render() { - const { - isKeyboardVisible, - accessoryHeight, - keyboardHeight, - } = this.state; + const { isKeyboardVisible, accessoryHeight, keyboardHeight } = this.state; const { bumperHeight, @@ -150,26 +179,44 @@ class KeyboardAccessoryView extends Component { style, inSafeAreaView, safeAreaBumper, - avoidKeyboard, + avoidKeyboard } = this.props; - const visibleHeight = accessoryHeight + (avoidKeyboard ? keyboardHeight : 0); + const visibleHeight = + accessoryHeight + (avoidKeyboard ? keyboardHeight : 0); const applySafeArea = isSafeAreaSupported && inSafeAreaView; + const isChildRenderProp = typeof this.props.children === "function"; return ( - - - - { this.props.children } + + + + {isChildRenderProp + ? this.props.children({ isKeyboardVisible }) + : this.props.children} @@ -178,28 +225,24 @@ class KeyboardAccessoryView extends Component { } KeyboardAccessoryView.propTypes = { - style: (View.propTypes||ViewPropTypes).style, - animateOn: PropTypes.oneOf(['ios', 'android', 'all', 'none']), - animationConfig: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.func - ]), + style: PropTypes.object, + animateOn: PropTypes.oneOf(["ios", "android", "all", "none"]), + animationConfig: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), bumperHeight: PropTypes.number, visibleOpacity: PropTypes.number, hiddenOpacity: PropTypes.number, - onKeyboardShowDelay: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.bool - ]), + onKeyboardShowDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]), androidAdjustResize: PropTypes.bool, alwaysVisible: PropTypes.bool, hideBorder: PropTypes.bool, inSafeAreaView: PropTypes.bool, avoidKeyboard: PropTypes.bool, -} + onKeyboardShow: PropTypes.func, + onKeyboardHide: PropTypes.func +}; KeyboardAccessoryView.defaultProps = { - animateOn: 'ios', + animateOn: "ios", bumperHeight: 15, visibleOpacity: 1, hiddenOpacity: 0, @@ -207,20 +250,20 @@ KeyboardAccessoryView.defaultProps = { alwaysVisible: false, hideBorder: false, inSafeAreaView: false, - avoidKeyboard: false, -} + avoidKeyboard: false +}; const styles = StyleSheet.create({ accessory: { - position: 'absolute', + position: "absolute", right: 0, left: 0, - backgroundColor: '#EFF0F1', + backgroundColor: "#EFF0F1" }, accessoryBorder: { borderTopWidth: 1, - borderTopColor: 'rgba(0,0,0,0.2)', + borderTopColor: "rgba(0,0,0,0.2)" } -}) +}); export default KeyboardAccessoryView;