Add avoidKeyboard prop to maintatin KeyboardAvoidingView behavior (#30)

ardaogulcan · Oct 1, 2018 · 8ff3abb · 8ff3abb
1 parent 4df7489
commit 8ff3abb
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -79,6 +79,11 @@ And set `androidAdjustResize` to `true`. For example,
 <KeyboardAccessoryNavigation androidAdjustResize />
 ```
 
+### To maintain KeyboardAvoidingView behavior
+```jsx
+<KeyboardAccessoryNavigation avoidKeyboard />
+```
+
 ## API
 
 ### *KeyboardAccessoryView*
@@ -95,6 +100,7 @@ And set `androidAdjustResize` to `true`. For example,
 | `hideBorder` | `boolean` | false | Set true if you want to hide top border of the Accessory |
 | `inSafeAreaView` | `boolean` | false | Set true if you want to adapt SafeAreaView on iPhone X |
 | `androidAdjustResize` | `boolean` | false | Set true in ejected apps to adjust resize |
+| `avoidKeyboard` | `boolean` | false | Set true if you want accessory to maintain KeyboardAvoidingView behavior. You shouldn't use any other Keyboard Avoiding library when you set this to `true` |
 
 ### *KeyboardAccessoryNavigation*
 

diff --git a/example/package.json b/example/package.json
@@ -22,7 +22,6 @@
     "expo": "^30.0.1",
     "react": "16.3.1",
     "react-native": "0.55.4",
-    "react-native-keyboard-aware-scroll-view": "^0.4.4",
     "react-navigation": "^1.5.0"
   }
 }
diff --git a/example/screens/NavigationViewExample.js b/example/screens/NavigationViewExample.js
@@ -8,7 +8,6 @@ import {
   Switch,
   Text,
 } from 'react-native';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 import { KeyboardAccessoryNavigation } from '../react-native-keyboard-accessory';
 
@@ -24,6 +23,17 @@ let inputs = [
     keyboardType: 'numeric',
     placeholder: 'Dummy Text Input Numeric',
   },
+  {
+    placeholder: 'Dummy Text Input',
+  },
+  {
+    keyboardType: 'email-address',
+    placeholder: 'Dummy Text Input Email',
+  },
+  {
+    keyboardType: 'numeric',
+    placeholder: 'Dummy Text Input Numeric',
+  },
 ];
 
 class ViewExample extends Component {
@@ -73,7 +83,7 @@ class ViewExample extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <KeyboardAwareScrollView contentContainerStyle={styles.contentContainer}>
+        <ScrollView contentContainerStyle={styles.contentContainer}>
           <View style={styles.switchInput}>
             <Switch
               value={this.state.buttonsHidden}
@@ -99,8 +109,9 @@ class ViewExample extends Component {
               onFocus={this.handleFocus(index)}
             />
           )}
-        </KeyboardAwareScrollView>
+        </ScrollView>
         <KeyboardAccessoryNavigation
+          avoidKeyboard={true}
           nextDisabled={this.state.nextFocusDisabled}
           previousDisabled={this.state.previousFocusDisabled}
           nextHidden={this.state.buttonsHidden}

diff --git a/src/KeyboardAccessoryView.js b/src/KeyboardAccessoryView.js
@@ -146,9 +146,13 @@ class KeyboardAccessoryView extends Component {
       style,
       inSafeAreaView,
       safeAreaBumper,
+      avoidKeyboard,
     } = this.props;
+
+    const visibleHeight = accessoryHeight + (avoidKeyboard ? keyboardHeight : 0);
+
     return (
-      <View style={{ height: (isKeyboardVisible || alwaysVisible ? accessoryHeight + keyboardHeight  : 0) }}>
+      <View style={{ height: (isKeyboardVisible || alwaysVisible ? visibleHeight  : 0) }}>
         <View style={[
           styles.accessory,
           !hideBorder && styles.accessoryBorder,
@@ -186,6 +190,7 @@ KeyboardAccessoryView.propTypes = {
   alwaysVisible: PropTypes.bool,
   hideBorder: PropTypes.bool,
   inSafeAreaView: PropTypes.bool,
+  avoidKeyboard: PropTypes.bool,
 }
 
 KeyboardAccessoryView.defaultProps = {
@@ -197,6 +202,7 @@ KeyboardAccessoryView.defaultProps = {
   alwaysVisible: false,
   hideBorder: false,
   inSafeAreaView: false,
+  avoidKeyboard: false,
 }
 
 const styles = StyleSheet.create({