Skip to content

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

@Ashoat

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugIssue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.📮Known IssuesThis indicates an issue that refers to a bug or limitation of RN that is not currently being handled

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions