Add Android Support

Author: Swordsman-Inaction

lib/KeyboardAwareListView.js

@@ -2,7 +2,7 @@
 
 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'
 
@@ -13,6 +13,7 @@ const KeyboardAwareListView = createReactClass({
       x: PropTypes.number,
       y: PropTypes.number,
     }),
+    enableOnAndroid: React.PropTypes.bool,
   },
   mixins: [KeyboardAwareMixin],
 
@@ -22,6 +23,22 @@ const KeyboardAwareListView = createReactClass({
   },
 
   render: function () {
+    const {
+      enableOnAndroid,
+      contentContainerStyle,
+    } = this.props
+
+    const {
+      keyboardSpace,
+    } = this.state
+
+    let newContentContainerStyle
+
+    if (Platform.OS === 'android' && enableOnAndroid) {
+      newContentContainerStyle = {}
+      newContentContainerStyle.paddingBottom = (contentContainerStyle ? contentContainerStyle.paddingBottom : 0) + keyboardSpace
+    }
+
     return (
       <ListView
         ref='_rnkasv_keyboardView'
@@ -30,6 +47,7 @@ const KeyboardAwareListView = createReactClass({
         showsVerticalScrollIndicator={true}
         scrollEventThrottle={0}
         {...this.props}
+        contentContainerStyle={newContentContainerStyle || contentContainerStyle}
         onScroll={e => {
           this.handleOnScroll(e)
           this.props.onScroll && this.props.onScroll(e)

lib/KeyboardAwareMixin.js

@@ -1,7 +1,7 @@
 /* @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'
@@ -72,8 +72,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 +128,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 () {
@@ -131,6 +156,10 @@ const KeyboardAwareMixin = {
     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.

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: React.PropTypes.bool,
   },
   mixins: [KeyboardAwareMixin],
 
@@ -23,6 +24,22 @@ const KeyboardAwareScrollView = createReactClass({
   },
 
   render: function () {
+    const {
+      enableOnAndroid,
+      contentContainerStyle,
+    } = this.props
+
+    const {
+      keyboardSpace,
+    } = this.state
+
+    let newContentContainerStyle
+
+    if (Platform.OS === 'android' && enableOnAndroid) {
+      newContentContainerStyle = {}
+      newContentContainerStyle.paddingBottom = (contentContainerStyle ? contentContainerStyle.paddingBottom : 0) + keyboardSpace
+    }
+
     return (
       <ScrollView
         ref='_rnkasv_keyboardView'
@@ -31,6 +48,7 @@ const KeyboardAwareScrollView = createReactClass({
         showsVerticalScrollIndicator={true}
         scrollEventThrottle={0}
         {...this.props}
+        contentContainerStyle={newContentContainerStyle || contentContainerStyle}
         onScroll={e => {
           this.handleOnScroll(e)
           this.props.onScroll && this.props.onScroll(e)