How to adjust custom keyboard's height?

[davidpaulsson]

How do I make the custom keyboard adapt to its height? See gif of current behavior, when the keyboard switches between views and I switch to the custom keyboard (the image picker) the custom keyboard's height keeps the height of the previous one. My custom keyboard is shorter than all the native ones.

Code:

<KeyboardAccessoryView
  renderContent={this.keyboardAccessoryViewContent}
  kbInputRef={this.textInputRef}
  kbComponent={this.state.customKeyboard}
  onItemSelected={this.onKeyboardItemSelected}
  onKeyboardResigned={this.onKeyboardResigned}
  revealKeyboardInteractive
  requiresSameParentToManageScrollView
/>

and my keyboard

import React, { Component } from 'react';
import { KeyboardRegistry } from 'react-native-keyboard-input';
import { ImagePickerComponent } from '@components';

class ImagePickerKeyboard extends Component {
  state = {
    selectedImages: [],
  };

  handleOnAssetSelected = images => {
    const parsedImages = images.map(image => ({
      ...image.node.image,
      path: image.node.image.uri,
    }));

    this.setState({
      selectedImages: [...this.state.selectedImages, ...parsedImages],
    });

    KeyboardRegistry.onItemSelected('ImagePickerKeyboard', parsedImages);
  };

  render() {
    return (
      <ImagePickerComponent
        assetType="Photos"
        onAssetSelected={this.handleOnAssetSelected}
        selectedImages={this.state.selectedImages}
        confirmQuickSelectAsset
      />
    );
  }
}

export default ImagePickerKeyboard;

[loic-lopez]

hi,

how do you manage your scrollview and react-native-keyboard-input?

Thanks for reply.

[davidpaulsson]

I don't understand your question fully, could you explain more what you want to know about this issue?

[ishabo]

I am having the same issue as well

[mcpeng]

same issue 😢

[andrewxhill]

This looks like the same or a similar issue but perhaps with a different containing layout, so adding here. This is what I see when running the provided demo app AwesomeProject.xcodeproj from Xcode on my physical device, an iPhone XS.

1. Loading the keyboard by tapping into the text to focus textarea

The behavior looks expected, full height keyboard.

2. Loading the custom keyboard directly by tapping "Show 1"

They custom keyboard is too short. If you next tap into the text area, the keyboard will grow to normal height and look fine, but causes some poor UX (if you go "Show 1" => text keyboard => "Show 1" the result will be the same as example 3 below, "Show 1" will appear in the expected/normal height keyboard area)

3. Go from text keyboard to any of the custom keyboards

You get the expected/normal height for the custom keyboard, but you can see it's taller than example 2 above.

Android

This doesn't happen on Android, all heights are the same.

Simulator

I see the same issue on the simulator running iPhone 6, although less pronounced.

[k1115]

+1

[pribeh]

Also interested.

[fukemy]

hi, any solution here please

[R-Kiran-Raj]

This is happening because you have used KeyboardAvoidingView with one of the behavior as padding. So whenever you click on TextInput it adds bottom padding to the view and the view moves towards the top.

If you don't want it to happen, use the View tag instead of KeyboardAvoidingView.

[R-Kiran-Raj]

Otherwise use extra class

1. You can use Keyboard class from Facebook.

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {
  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }
    
  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }
    
  _keyboardDidShow () {
    alert('Keyboard Shown');
  }
    
  _keyboardDidHide () {
    alert('Keyboard Hidden');
  }
    
  render() {
    return (
      <TextInput
        onSubmitEditing={Keyboard.dismiss}
      />
    );
  }
}

2. You can use some other npm dependency also, like react-native-keyboard-listener.

<View>
  <KeyboardListener
    onWillShow={() => { this.setState({ keyboardOpen: true }); }}
    onWillHide={() => { this.setState({ keyboardOpen: false }); }}
  />
</View>