diff --git a/example/screens/ViewExample.js b/example/screens/ViewExample.js
index 7618062..47f1d0f 100644
--- a/example/screens/ViewExample.js
+++ b/example/screens/ViewExample.js
@@ -44,8 +44,6 @@ const styles = StyleSheet.create({
},
textInputView: {
padding: 8,
- borderTopWidth: 1,
- borderTopColor: '#CCC',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
diff --git a/lib/KeyboardAccessoryNavigation.js b/lib/KeyboardAccessoryNavigation.js
index 70e1a88..d2213fe 100644
--- a/lib/KeyboardAccessoryNavigation.js
+++ b/lib/KeyboardAccessoryNavigation.js
@@ -7,47 +7,10 @@ import {
Text,
TouchableOpacity,
Keyboard,
- ViewPropTypes,
} from 'react-native';
import KeyboardAccessoryView from './KeyboardAccessoryView';
-import Arrow from './components/Arrow';
-
-// Render a prev/hidden arrow button
-const AccessoryArrowButton = ({style, hidden = false, disabled = false, onPress, ...props}) => {
- if (hidden) {
- return null;
- } else {
- return (
-
- {props.customButton ? props.customButton : (
-
- )}
-
- );
- }
-}
-
-AccessoryArrowButton.propTypes = {
- style: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.number
- ]),
- customButton: PropTypes.element,
- tintColor: PropTypes.string.isRequired,
- direction: PropTypes.string.isRequired,
- disabled: PropTypes.bool.isRequired,
- hidden: PropTypes.bool.isRequired,
- onPress: PropTypes.func.isRequired,
-}
+import AccessoryArrowButton from './components/AccessoryArrowButton';
class KeyboardAccessoryNavigation extends Component {
handleDoneButton() {
@@ -70,7 +33,6 @@ class KeyboardAccessoryNavigation extends Component {
previousDisabled,
nextHidden,
previousHidden,
- style,
accessoryStyle,
nextButtonStyle,
previousButtonStyle,
@@ -79,7 +41,7 @@ class KeyboardAccessoryNavigation extends Component {
infoMessageStyle,
nextButtonDirection,
previousButtonDirection,
- alwaysVisible,
+ ...passThroughProps,
} = this.props;
// Are both arrows hidden?
@@ -92,12 +54,12 @@ class KeyboardAccessoryNavigation extends Component {
styles.accessoryContainer,
arrowsHidden && noInfo ? styles.accessoryContainerReverse : null,
accessoryStyle,
- ]
+ ];
return (
-
+
- {!arrowsHidden && (
+ { !arrowsHidden && (
)}
- {(infoMessage || infoContainer) && (
+ { (infoMessage || infoContainer) && (
- {infoContainer ? infoContainer : (
+ {infoContainer || (
@@ -132,15 +94,18 @@ class KeyboardAccessoryNavigation extends Component {
)}
- {doneButton ? doneButton : (
-
+ onPress={this.handleDoneButton.bind(this)}>
+ { doneButton ||
+
{doneButtonTitle}
- )}
+ }
@@ -149,6 +114,7 @@ class KeyboardAccessoryNavigation extends Component {
}
KeyboardAccessoryNavigation.propTypes = {
+ ...KeyboardAccessoryView.propTypes,
doneButtonTitle: PropTypes.string,
infoMessage: PropTypes.string,
doneButton: PropTypes.element,
@@ -163,36 +129,13 @@ KeyboardAccessoryNavigation.propTypes = {
doneDisabled: PropTypes.bool,
nextHidden: PropTypes.bool,
previousHidden: PropTypes.bool,
- alwaysVisible: PropTypes.bool,
tintColor: PropTypes.string,
- style: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.number
- ]),
- accessoryStyle: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.number
- ]),
- previousButtonStyle: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.number
- ]),
- nextButtonStyle: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.number
- ]),
- doneButtonStyle: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.number
- ]),
- doneButtonTitleStyle: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.number
- ]),
- infoMessageStyle: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.number
- ]),
+ accessoryStyle: View.propTypes.style,
+ previousButtonStyle: View.propTypes.style,
+ nextButtonStyle: View.propTypes.style,
+ doneButtonStyle: View.propTypes.style,
+ doneButtonTitleStyle: View.propTypes.style,
+ infoMessageStyle: View.propTypes.style,
nextButtonDirection: PropTypes.oneOf(['up', 'down', 'left', 'right']),
previousButtonDirection: PropTypes.oneOf(['up', 'down', 'left', 'right']),
}
@@ -206,7 +149,6 @@ KeyboardAccessoryNavigation.defaultProps = {
previousHidden: false,
nextButtonDirection: 'down',
previousButtonDirection: 'up',
- alwaysVisible: false,
}
const styles = StyleSheet.create({
diff --git a/lib/KeyboardAccessoryView.js b/lib/KeyboardAccessoryView.js
index 299d3ec..97cd803 100644
--- a/lib/KeyboardAccessoryView.js
+++ b/lib/KeyboardAccessoryView.js
@@ -108,14 +108,19 @@ class KeyboardAccessoryView extends Component {
render() {
const { isKeyboardVisible , accessoryHeight, keyboardHeight } = this.state;
- const { bumperHeight, alwaysVisible, visibleOpacity, hiddenOpacity, style } = this.props;
+ const { bumperHeight, alwaysVisible, visibleOpacity, hiddenOpacity, hideBorder, style } = this.props;
return (
-
+
{ this.props.children }
@@ -126,26 +131,26 @@ class KeyboardAccessoryView extends Component {
}
KeyboardAccessoryView.propTypes = {
- style: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.number
- ]),
+ style: View.propTypes.style,
animateOn: PropTypes.oneOf(['ios', 'android', 'all', 'none']),
animationConfig: PropTypes.oneOfType([
PropTypes.object,
PropTypes.func
]),
- alwaysVisible: PropTypes.bool,
bumperHeight: PropTypes.number,
visibleOpacity: PropTypes.number,
hiddenOpacity: PropTypes.number,
+ alwaysVisible: PropTypes.bool,
+ hideBorder: PropTypes.bool,
}
KeyboardAccessoryView.defaultProps = {
animateOn: 'ios',
bumperHeight: 15,
visibleOpacity: 1,
- hiddenOpacity: 0
+ hiddenOpacity: 0,
+ alwaysVisible: false,
+ hideBorder: false,
}
const styles = StyleSheet.create({
@@ -153,7 +158,11 @@ const styles = StyleSheet.create({
position: 'absolute',
right: 0,
left: 0,
- backgroundColor: '#EFF0F1'
+ backgroundColor: '#EFF0F1',
+ },
+ accessoryBorder: {
+ borderTopWidth: 1,
+ borderTopColor: 'rgba(0,0,0,0.2)',
}
})
diff --git a/lib/components/AccessoryArrowButton/index.js b/lib/components/AccessoryArrowButton/index.js
new file mode 100644
index 0000000..616b789
--- /dev/null
+++ b/lib/components/AccessoryArrowButton/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+ TouchableOpacity,
+} from 'react-native';
+
+import Arrow from '../Arrow';
+
+const AccessoryArrowButton = ({ hidden = false, disabled = false, onPress, ...props }) => {
+ if (hidden) {
+ return null;
+ }
+
+ return (
+
+ { props.customButton ? props.customButton : (
+
+ )}
+
+ );
+}
+
+AccessoryArrowButton.propTypes = {
+ customButton: PropTypes.element,
+ tintColor: PropTypes.string.isRequired,
+ direction: PropTypes.string.isRequired,
+ disabled: PropTypes.bool.isRequired,
+ hidden: PropTypes.bool.isRequired,
+ onPress: PropTypes.func.isRequired,
+}
+
+export default AccessoryArrowButton;