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

[Ashoat]

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.

[stale[bot]]

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 "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[jakebloom]

@cpojer What is the status on this? Does the linked issue being closed indicate that this has been resolved?

[cpojer]

No, it seems like this issue still exists. Please feel free to send a Pull Request with a fix.

[digitalbreed]

Until there is a fix, is there any workaround?

[stale[bot]]

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.

[darrylyoung]

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?

[Ashoat]

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.

[stale[bot]]

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]]

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]]

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]]

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.

[jamesxabregas]

I can confirm that this is still technically a current bug in React Native 0.63.3 and iOS 14.1. However after much consideration of this issue I have come to the conclusion that fixing this issue would like not provide a desierable UX design in most cases anyway. My app also uses a bottom tab bar, but after mocking out what my UI would like like with a bottom tab bar, open keryboard, and an InputAccessory I realised it would actually look very weird. In fact I looked through a number of popular apps that leverage an InputAccessoryView, (Facebook's create post screen is a common one) and in every case the screen that uses the InputAccessoryView is always a modal view that displays over the entire screen and hides the bottom tab bar. I assume that this is likely because displaying a bottom tab bar and an input accessory provides for a very confusing and clunky user expereince.