-
Notifications
You must be signed in to change notification settings - Fork 24.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[InputAccessoryView] Can't specify keyboard-conditional bottom padding #20157
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 "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions. |
@cpojer What is the status on this? Does the linked issue being closed indicate that this has been resolved? |
No, it seems like this issue still exists. Please feel free to send a Pull Request with a fix. |
Until there is a fix, is there any workaround? |
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. |
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? |
No, no solutions exist to my knowledge. You can avoid using I’ve seen this non-React-Native solution, but it seems hard to port to React Native, and feels a little hacky. |
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. |
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. |
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. |
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. |
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. |
https://reactnative.dev/docs/keyboard |
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days. |
Not stale |
Still happening |
Still having issues with this |
@Ashoat Maybe it's doable with https://github.com/kirillzyusko/react-native-keyboard-controller and KeyboardStickyView component? You can specify |
Looks super cool!! Will take a look at it when I get a chance. Thanks for sharing @kirillzyusko! |
This has the downside of not supporting interactive dismissal starting at the component, see the issue here: kirillzyusko/react-native-keyboard-controller#250 As it stands, you need to choose between having interactive dismiss or being able to set the position of the inputaccessoryview |
Yeah, I'm planning to fix this problem in the near future 👀 |
Environment
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 theInputAccessoryView
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 theInputAccessoryView
is fixed. Attempting to change this distance withheight
,padding
, ormargin
style properties does not seem possible.Reproducible Demo
I've created a minimal repro here.
The text was updated successfully, but these errors were encountered: