react-native: [InputAccessoryView] Can't specify keyboard-conditional bottom padding

Environment

React Native Environment Info:
  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 25.07 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 9.3.0 - ~/.nvm/versions/node/v9.3.0/bin/node
    Yarn: 1.6.0 - /usr/local/bin/yarn
    npm: 6.1.0 - ~/.nvm/versions/node/v9.3.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    Android SDK:
      Build Tools: 23.0.1, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3
      API Levels: 23, 25, 26
  IDEs:
    Android Studio: 3.1 AI-173.4819257
    Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.4.1 => 16.4.1
    react-native: ^0.56.0 => 0.56.0

Description

If you have a bottom tab bar, you want the InputAccessoryView to appear above it when the keyboard is collapsed. However, when the keyboard is expanded, you want the InputAccessoryView to appear directly above the keyboard.

This sort of “conditional” bottom padding is currently impossible with InputAccessoryView. It seems that when the keyboard is expanded, the distance between the bottom of the screen and the InputAccessoryView is fixed. Attempting to change this distance with height, padding, or margin style properties does not seem possible.

Reproducible Demo

I’ve created a minimal repro here.

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 12
Comments: 21 (4 by maintainers)

Most upvoted comments

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community’s attention? This issue may be closed if no further activity occurs. You may also label this issue as a “Discussion” or add it to the “Backlog” and I will leave it open. Thank you for your contributions.

stale[bot] on Aug 4, 2019

Not stale

Ashoat on Mar 3, 2023

No, no solutions exist to my knowledge. You can avoid using KeyboardAccessoryView altogether, but that means you can’t pan the keyboard up/down… just press to open/close.

I’ve seen this non-React-Native solution, but it seems hard to port to React Native, and feels a little hacky.

Ashoat on Sep 23, 2019

Looks super cool!! Will take a look at it when I get a chance. Thanks for sharing @kirillzyusko!

Ashoat on Jan 11, 2024

I’m also looking for a solution to this problem. I want an input and button sat at the bottom of my screen (on top of the tab bar) and when the input is in focus, the keyboard slides up and those elements slide up with it. The focused position works as expected but when the keyboard is collapsed, the input and button completely cover the tab bar.

Are there any workarounds for this while we’re hoping for a proper solution? Did you have any luck, @digitalbreed / @Ashoat?

darrylyoung on Sep 23, 2019

Until there is a fix, is there any workaround?

digitalbreed on Mar 30, 2019