wix-incubator / react-native-keyboard-input

Use your own custom input component instead of the system keyboard
MIT License
819 stars 150 forks source link

How to adjust custom keyboard's height? #53

Open davidpaulsson opened 6 years ago

davidpaulsson commented 6 years ago

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;

kapture 2018-06-01 at 11 20 32

loic-lopez commented 6 years ago

hi,

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

Thanks for reply.

davidpaulsson commented 6 years ago

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

ishabo commented 6 years ago

I am having the same issue as well

mcpeng commented 5 years ago

same issue 😢

andrewxhill commented 5 years ago

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.

Image 3

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)

Image 4

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.

Image 5

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 commented 5 years ago

+1

pribeh commented 4 years ago

Also interested.

fukemy commented 2 years ago

hi, any solution here please

R-Kiran-Raj commented 1 year ago

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 commented 1 year ago

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}
      />
    );
  }
}
  1. 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>