Merge branch 'master' into flat-list

chrisy-lili · chrisy-lili · commit 24bc79f7bd72 · 2017-07-31T09:05:57.000-04:00
diff --git a/.eslintrc b/.eslintrc
@@ -14,7 +14,12 @@
   },
 
   "plugins": [
-    "react"
+    "react",
+    "flowtype"
+  ],
+
+  "extends": [
+    "plugin:flowtype/recommended"
   ],
 
   "globals": {
diff --git a/.flowconfig b/.flowconfig
@@ -93,4 +93,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.33.0
+0.47.0
diff --git a/README.md b/README.md
@@ -91,6 +91,28 @@ You can register to `ScrollViewResponder` events `onKeyboardWillShow` and `onKey
 </KeyboardAwareScrollView>
 ```
 
+## Android Support
+First, Android natively has this feature, you can easily enable it by setting `windowSoftInputMode` in `AndroidManifest.xml`. Check [here](https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft).
+
+But if you want to use feature like `extraHeight`, you need to enable Android Support with the following steps:
+
+- Make sure you are using react-native `0.46` or above.
+- Set `windowSoftInputMode` to `adjustPan` in `AndroidManifest.xml`.
+- Set `enableOnAndroid` property to `true`.
+
+Android Suppor is not perfect, here is the support list:
+
+| **Prop** | **Android Support** |
+|----------|-----------------|
+| `viewIsInsideTabBar` | Yes |
+| `resetScrollToCoords` | Yes |
+| `enableAutoAutomaticScroll` | Yes |
+| `extraHeight` | Yes |
+| `extraScrollHeight` | Yes |
+| `enableResetScrollToCoords` | Yes |
+| `keyboardOpeningTime` | No |
+
+
 ## API
 ### Props
 All the `ScrollView`/`ListView` props will be passed.
@@ -104,6 +126,7 @@ All the `ScrollView`/`ListView` props will be passed.
 | `extraScrollHeight` | `number` | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. |
 | `enableResetScrollToCoords` | `boolean` | Lets the user enable or disable automatic resetScrollToCoords. |
 | `keyboardOpeningTime` | `number` | Sets the delay time before scrolling to new position, default is 250 |
+| `enableOnAndroid` | `boolean` | Enable Android Support |
 
 | **Method** | **Parameter** | **Description** |
 |------------|---------------|-----------------|
diff --git a/lib/KeyboardAwareListView.js b/lib/KeyboardAwareListView.js
@@ -2,38 +2,62 @@
 
 import React from 'react'
 import createReactClass from 'create-react-class'
-import { ListView } from 'react-native'
+import { ListView, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import KeyboardAwareMixin from './KeyboardAwareMixin'
 
 const KeyboardAwareListView = createReactClass({
   propTypes: {
     viewIsInsideTabBar: PropTypes.bool,
     resetScrollToCoords: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number,
+      x: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired,
     }),
+    onScroll: PropTypes.func,
+    enableOnAndroid: PropTypes.bool,
   },
   mixins: [KeyboardAwareMixin],
 
   componentWillMount: function () {
-    this.setViewIsInsideTabBar(this.props.viewIsInsideTabBar)
-    this.setResetScrollToCoords(this.props.resetScrollToCoords)
+    this.setViewIsInsideTabBar(!!this.props.viewIsInsideTabBar)
+    if (this.props.resetScrollToCoords) {
+      this.setResetScrollToCoords(this.props.resetScrollToCoords)
+    }
+  },
+
+  onScroll: function (e: SyntheticEvent & {nativeEvent: {contentOffset: number}}) {
+    this.handleOnScroll(e)
+    this.props.onScroll && this.props.onScroll(e)
   },
 
   render: function () {
+    const {
+      enableOnAndroid,
+      contentContainerStyle,
+    } = this.props
+
+    const {
+      keyboardSpace,
+    } = this.state
+
+    let newContentContainerStyle
+
+    if (Platform.OS === 'android' && enableOnAndroid) {
+      newContentContainerStyle = Object.assign({}, contentContainerStyle)
+      newContentContainerStyle.paddingBottom = (newContentContainerStyle.paddingBottom || 0) + keyboardSpace
+    }
+
     return (
       <ListView
         ref='_rnkasv_keyboardView'
         keyboardDismissMode='interactive'
-        contentInset={{bottom: this.state.keyboardSpace}}
+        contentInset={{bottom: keyboardSpace}}
+        automaticallyAdjustContentInsets={false}
         showsVerticalScrollIndicator={true}
         scrollEventThrottle={0}
         {...this.props}
-        onScroll={e => {
-          this.handleOnScroll(e)
-          this.props.onScroll && this.props.onScroll(e)
-        }}
+        contentContainerStyle={newContentContainerStyle || contentContainerStyle}
+        onScroll={this.onScroll}
       />
     )
   },
diff --git a/lib/KeyboardAwareMixin.js b/lib/KeyboardAwareMixin.js
@@ -1,11 +1,9 @@
 /* @flow */
 
 import PropTypes from 'prop-types'
-import ReactNative, { TextInput, Keyboard, UIManager } from 'react-native'
+import ReactNative, { TextInput, Keyboard, UIManager, Platform } from 'react-native'
 import TimerMixin from 'react-timer-mixin'
 
-import type { Event } from 'react-native'
-
 const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = 49
 const _KAM_KEYBOARD_OPENING_TIME: number = 250
 const _KAM_EXTRA_HEIGHT: number = 75
@@ -30,7 +28,7 @@ const KeyboardAwareMixin = {
     }
   },
 
-  setViewIsInsideTabBar: function (viewIsInsideTabBar: bool) {
+  setViewIsInsideTabBar: function (viewIsInsideTabBar: boolean) {
     this.viewIsInsideTabBar = viewIsInsideTabBar
     const keyboardSpace = viewIsInsideTabBar ? _KAM_DEFAULT_TAB_BAR_HEIGHT : 0
     if (this.state.keyboardSpace !== keyboardSpace) {
@@ -42,7 +40,7 @@ const KeyboardAwareMixin = {
     this.resetCoords = coords
   },
 
-  getInitialState: function (props: Object) {
+  getInitialState: function () {
     this.viewIsInsideTabBar = false
     this.keyboardWillShowEvent = undefined
     this.keyboardWillHideEvent = undefined
@@ -72,8 +70,28 @@ const KeyboardAwareMixin = {
           if (isAncestor) {
             // Check if the TextInput will be hidden by the keyboard
             UIManager.measureInWindow(currentlyFocusedField, (x, y, width, height) => {
-              if (y + height > frames.endCoordinates.screenY - this.props.extraScrollHeight - this.props.extraHeight) {
-                this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField)
+              const textInputBottomPosition = y + height
+              const keyboardPosition = frames.endCoordinates.screenY
+              const totalExtraHeight = this.props.extraScrollHeight + this.props.extraHeight
+
+              if (Platform.OS === 'ios') {
+                if (textInputBottomPosition > keyboardPosition - totalExtraHeight) {
+                  this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField)
+                }
+              } else {
+
+                // on android, the system would scroll the text input just above the keyboard
+                // so we just neet to scroll the extra height part
+                if (textInputBottomPosition > keyboardPosition) {
+                  // since the system already scrolled the whole view up
+                  // we should reduce that amount
+                  keyboardSpace = keyboardSpace - (textInputBottomPosition - keyboardPosition)
+                  this.setState({keyboardSpace})
+
+                  this.scrollForExtraHeightOnAndroid(totalExtraHeight)
+                } else if (textInputBottomPosition > keyboardPosition - totalExtraHeight) {
+                  this.scrollForExtraHeightOnAndroid(totalExtraHeight - (keyboardPosition - textInputBottomPosition))
+                }
               }
             })
           }
@@ -108,8 +126,13 @@ const KeyboardAwareMixin = {
 
   componentDidMount: function () {
     // Keyboard events
-    this.keyboardWillShowEvent = Keyboard.addListener('keyboardWillShow', this.updateKeyboardSpace)
-    this.keyboardWillHideEvent = Keyboard.addListener('keyboardWillHide', this.resetKeyboardSpace)
+    if (Platform.OS === 'ios') {
+      this.keyboardWillShowEvent = Keyboard.addListener('keyboardWillShow', this.updateKeyboardSpace)
+      this.keyboardWillHideEvent = Keyboard.addListener('keyboardWillHide', this.resetKeyboardSpace)
+    } else if (Platform.OS === 'android' && this.props.enableOnAndroid) {
+      this.keyboardWillShowEvent = Keyboard.addListener('keyboardDidShow', this.updateKeyboardSpace)
+      this.keyboardWillHideEvent = Keyboard.addListener('keyboardDidHide', this.resetKeyboardSpace)
+    }
   },
 
   componentWillUnmount: function () {
@@ -121,16 +144,20 @@ const KeyboardAwareMixin = {
     return this.refs._rnkasv_keyboardView && this.refs._rnkasv_keyboardView.getScrollResponder()
   },
 
-  scrollToPosition: function (x: number, y: number, animated: bool = true) {
+  scrollToPosition: function (x: number, y: number, animated: boolean = true) {
     const responder = this.getScrollResponder();
     responder && responder.scrollResponderScrollTo({x: x, y: y, animated: animated})
   },
 
-  scrollToEnd: function (animated?: bool = true) {
+  scrollToEnd: function (animated?: boolean = true) {
     const responder = this.getScrollResponder();
     responder && responder.scrollResponderScrollToEnd({animated: animated})
   },
 
+  scrollForExtraHeightOnAndroid(extraHeight: number) {
+    this.scrollToPosition(0, this.position.y + extraHeight, true)
+  },
+
   /**
    * @param keyboardOpeningTime: takes a different keyboardOpeningTime in consideration.
    * @param extraHeight: takes an extra height in consideration.
@@ -169,7 +196,7 @@ const KeyboardAwareMixin = {
 
   defaultResetScrollToCoords: null, // format: {x: 0, y: 0}
 
-  handleOnScroll: function (e: Event) {
+  handleOnScroll: function (e: SyntheticEvent & {nativeEvent: {contentOffset: number}}) {
     this.position = e.nativeEvent.contentOffset
   },
 }
diff --git a/lib/KeyboardAwareScrollView.js b/lib/KeyboardAwareScrollView.js
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import createReactClass from 'create-react-class'
-import { ScrollView } from 'react-native'
+import { ScrollView, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import KeyboardAwareMixin from './KeyboardAwareMixin'
 
@@ -14,6 +14,7 @@ const KeyboardAwareScrollView = createReactClass({
       x: PropTypes.number,
       y: PropTypes.number,
     }),
+    enableOnAndroid: PropTypes.bool,
   },
   mixins: [KeyboardAwareMixin],
 
@@ -23,14 +24,32 @@ const KeyboardAwareScrollView = createReactClass({
   },
 
   render: function () {
+    const {
+      enableOnAndroid,
+      contentContainerStyle,
+    } = this.props
+
+    const {
+      keyboardSpace,
+    } = this.state
+
+    let newContentContainerStyle
+
+    if (Platform.OS === 'android' && enableOnAndroid) {
+      newContentContainerStyle = Object.assign({}, contentContainerStyle)
+      newContentContainerStyle.paddingBottom = (newContentContainerStyle.paddingBottom || 0) + keyboardSpace
+    }
+
     return (
       <ScrollView
         ref='_rnkasv_keyboardView'
         keyboardDismissMode='interactive'
-        contentInset={{bottom: this.state.keyboardSpace}}
+        contentInset={{bottom: keyboardSpace}}
+        automaticallyAdjustContentInsets={false}
         showsVerticalScrollIndicator={true}
         scrollEventThrottle={0}
         {...this.props}
+        contentContainerStyle={newContentContainerStyle || contentContainerStyle}
         onScroll={e => {
           this.handleOnScroll(e)
           this.props.onScroll && this.props.onScroll(e)
diff --git a/package.json b/package.json
@@ -43,7 +43,8 @@
   "devDependencies": {
     "babel-eslint": "^6.0.4",
     "eslint": "^3.17.1",
-    "eslint-plugin-react": "^6.10.0",
-    "flow-bin": "0.33.0"
+    "eslint-plugin-flowtype": "^2.35.0",
+    "eslint-plugin-react": "^7.1.0",
+    "flow-bin": "0.47.0"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,8 @@`
`43`	`43`	`"devDependencies": {`
`44`	`44`	`"babel-eslint": "^6.0.4",`
`45`	`45`	`"eslint": "^3.17.1",`
`46`		`- "eslint-plugin-react": "^6.10.0",`
`47`		`- "flow-bin": "0.33.0"`
	`46`	`+ "eslint-plugin-flowtype": "^2.35.0",`
	`47`	`+ "eslint-plugin-react": "^7.1.0",`
	`48`	`+ "flow-bin": "0.47.0"`
`48`	`49`	`}`
`49`	`50`	`}`