Solved small issue when rendering scroll view inside a TabBarIOS

Author: alvaromb

lib/KeyboardAwareListView.js

@@ -4,9 +4,16 @@ import KeyboardAwareMixin from './KeyboardAwareMixin'
 const KeyboardAwareListView = React.createClass({
   propTypes: {
     ...ListView.propTypes,
+    viewIsInsideTabBar: React.PropTypes.bool,
   },
   mixins: [KeyboardAwareMixin],
 
+  componentWillMount: function() {
+    if (this.props.viewIsInsideTabBar) {
+      this.setViewIsInsideTabBar(this.props.viewIsInsideTabBar)
+    }
+  },
+
   render: function () {
     return (
       <ListView

lib/KeyboardAwareMixin.js

@@ -1,22 +1,26 @@
-import React, { DeviceEventEmitter } from 'react-native'
+import { DeviceEventEmitter } from 'react-native'
 import TimerMixin from 'react-timer-mixin'
 
+const _KAM_DEFAULT_TAB_BAR_HEIGHT = 49
+
 const KeyboardAwareMixin = {
-  propTypes: {
-    viewIsInsideTabBar: React.PropTypes.bool,
-  },
   mixins: [TimerMixin],
 
+  setViewIsInsideTabBar: function (viewIsInsideTabBar) {
+    this.viewIsInsideTabBar = viewIsInsideTabBar
+    this.setState({keyboardSpace: _KAM_DEFAULT_TAB_BAR_HEIGHT})
+  },
+
   getInitialState: function (props) {
+    this.viewIsInsideTabBar = false
     return {
       keyboardSpace: 0,
     }
   },
 
   // Keyboard actions
-  // TODO: automatically handle TabBar height instead of using props
   updateKeyboardSpace: function (frames) {
-    const keyboardSpace = (this.props.viewIsInsideTabBar) ? frames.endCoordinates.height - 49 : frames.endCoordinates.height
+    const keyboardSpace = (this.props.viewIsInsideTabBar) ? frames.endCoordinates.height - _KAM_DEFAULT_TAB_BAR_HEIGHT : frames.endCoordinates.height
     this.setState({
       keyboardSpace: keyboardSpace,
     })
@@ -43,7 +47,7 @@ const KeyboardAwareMixin = {
   /**
    * @param extraHeight: takes an extra height in consideration.
    */
-  scrollToFocusedInput: function (event, reactNode, extraHeight = 49) {
+  scrollToFocusedInput: function (event, reactNode, extraHeight = _KAM_DEFAULT_TAB_BAR_HEIGHT) {
     const scrollView = this.refs.keyboardView.getScrollResponder()
     this.setTimeout(() => {
       scrollView.scrollResponderScrollNativeHandleToKeyboard(

lib/KeyboardAwareScrollView.js

@@ -4,9 +4,16 @@ import KeyboardAwareMixin from './KeyboardAwareMixin'
 const KeyboardAwareScrollView = React.createClass({
   propTypes: {
     ...ScrollView.propTypes,
+    viewIsInsideTabBar: React.PropTypes.bool,
   },
   mixins: [KeyboardAwareMixin],
 
+  componentWillMount: function() {
+    if (this.props.viewIsInsideTabBar) {
+      this.setViewIsInsideTabBar(this.props.viewIsInsideTabBar)
+    }
+  },
+
   render: function () {
     return (
       <ScrollView

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-aware-scroll-view",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A React Native ScrollView component that resizes when the keyboard appears.",
   "main": "index.js",
   "scripts": {