There is a gap between keyboard and accessory view

[littlehome-eugene]

When we activate the keyboard, there is a space between accessory view and the keyboard.

What might cause this?

import React from ‘react’
import {
  Text,
  FlatList,
  View,
} from ‘react-native’
import {KeyboardAccessoryView} from ‘react-native-keyboard-input’;
const FORM_HEIGHT = 37
import {fetchThreads} from ‘./actions/action’

class TestComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,//show || hide KeyboardAccessoryView
      formHeight: FORM_HEIGHT,
      text:“”
    }
    this.keyExtractor = this.keyExtractor.bind(this)
    this.renderItem = this.renderItem.bind(this)
    this.showPostForm = this.showPostForm.bind(this)
    this.hidePostForm = this.hidePostForm.bind(this)
  }

  componentDidMount() {
    this.props.dispatch(fetchThreads({
      page: 1
    }))
  }

  render() {
    let { visible } = this.state
    let { threads } = this.props.entities
    let data = threads || []
    return (
      <View>
        <View>
          {data.length > 0 ? (
            <FlatList
              bounce={false}
              keyboardShouldPersistTaps=“handled”
              data={data}
              renderItem={this.renderItem}
              keyExtractor={this.keyExtractor}
              initialNumToRender={10}
              removeClippedSubviews={true}
            />
          ):null}
        </View>
        {visible ? this.renderPostForm() : null}
      </View>
    )
  }
  renderPostForm() {
    return (
      <KeyboardAccessoryView
        renderContent={this.renderKeyboardAccessoryViewContent}
        trackInteractive={false}
        kbInputRef={this.textInput}
      />
    )
  }

  renderKeyboardAccessoryViewContent() {
    let { text, formHeight } = this.state
    return (
      <View>
        <TextInput
          autoFocus={false}
          maxHeight={200}
          style={{
            backgroundColor:‘#ffffff’,
            minHeight:FORM_HEIGHT,
            height:formHeight,
            alignSelf:‘center’,
            paddingTop:10,
            paddingLeft:5
          }}
          onContentSizeChange={(event) => {
            if(this.setContentSizeChange){
              clearTimeout(this.setContentSizeChange)
            }
            let formHeight = event.nativeEvent.contentSize.height
            this.setContentSizeChange = setTimeout(() => {
              if(this.textInput) {
                this.setState({
                  formHeight
                })
              }
            }, 100)
          }}
          ref={(input) => {this.textInput = input}}
          multiline={true}
          autoCorrect={false}
          blurOnSubmit={false}
          onChangeText={(text) => {this.setState({text})}}
          value={text}
        />
      </View>
    )
  }

  keyExtractor(item, index) {
    return `thread-${item.id}`
  }

  renderItem({item, index}) {
    let thread = item
    return (
      <Thread
        thread={thread}
        showPostForm={this.showPostForm}
        hidePostForm={this.hidePostForm}
      />
    )
  }

  showPostForm(thread) {
    this.setState({
      visible: true,
      thread
    })
  }

  hidePostForm() {
    this.setState({
      visible: false,
      thread: null
    })
  }
}

function mapStateToProps(state) {
  return {
    entities: state.entities,
  }
}


export default connect(
  mapStateToProps,
  dispatch => {
    return { dispatch }
  }
)(TestComponent) (edited) 

[oferRounds]

@littlehome-eugene seeing the same problem, have you found a solution?

[SerdarMustafa1]

I have the same issue. Any solutions yet?

[predescu]

Looks like the issue is on the react-native-keyboard-tracking-view and is happen when you are using the component in an app with TabBar

One Workaround is to not hide the TabBar on the screens when you are using this component.

Applying the changes on lib/KeyboardTrackingViewManager.m file from this PR fixed the issue on my case.

To not losing the changes with new installs, I used patch-package library. The patch looks like this:

diff --git a/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m b/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m
index 800bd35..a20a595 100644
--- a/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m
+++ b/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m
@@ -501,12 +501,24 @@ - (void) rctContentDidAppearNotification:(NSNotification*)notification
     });
 }
 
+-(CGFloat)getTabBarHeight {
+  UITabBarController *tabBarController = (UITabBarController *)[[[UIApplication sharedApplication] delegate] window].rootViewController;
+  CGFloat tabbarHeight = 0.0f;
+
+  if (!tabBarController.tabBar.isHidden) {
+    tabbarHeight = tabBarController.tabBar.bounds.size.height;
+  }
+
+  return tabbarHeight;
+}
+
 #pragma mark - ObservingInputAccessoryViewDelegate methods
 
 -(void)updateTransformAndInsets
 {
     CGFloat bottomSafeArea = [self getBottomSafeArea];
-    CGFloat accessoryTranslation = MIN(-bottomSafeArea, -_observingInputAccessoryView.keyboardHeight);
+    CGFloat tabBarHeight = [self getTabBarHeight];
+    CGFloat accessoryTranslation = MIN(-bottomSafeArea, -(_observingInputAccessoryView.keyboardHeight - tabBarHeight));
 
     if (_observingInputAccessoryView.keyboardHeight <= bottomSafeArea) {
         _bottomViewHeight = kBottomViewHeight;

[daxaxelrod]

Having this issue as well. The screen is in a tab navigator but the tab bar is hidden for this particular screen