Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Reactions:10
Comments:13 (2 by maintainers)

Top GitHub Comments

4reactions

stale[bot]commented, Aug 4, 2019

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.

2reactions

Ashoatcommented, Sep 23, 2019

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.

Top Results From Across the Web

KeyboardAvoidingView not Working Properly - Stack Overflow

KeyboardAvoidingView not Working Properly · 1. Try removing paddingBottom: this. · still not working@HSBP. – Charan Teja · Use ...

inputAccessoryView | Apple Developer Documentation

This property is typically used to attach an accessory view to the system-supplied keyboard that's presented for UITextField and UITextView objects. The value ......

InputAccessoryView - React Native

The input accessory view is displayed above the keyboard whenever a TextInput has focus. This component can be used to create custom toolbars....

[Solved]-Layout is broken after keyboard appears-swift

Coding example for the question Layout is broken after keyboard appears-swift. ... safeAreaInsets.bottom } else { keyboardHeight = keyboardFrame.

Swiftui toolbar done button. The role can be destructive or ...

By default, it is nil and uses a standard one, but you can set the predefined ... Hitting "d" is also a way...