[INVESTIGATING] Number-pad keyboard on iOS offers no way to continue

As the title said, setting an input field to number-pad or numeric results in a keyboard that cannot be submitted or closed on iOS. It seems like this is related to the TextInput returnKeyType prop, but I’m not sure. Since it’s a Draftbit component and the returnKeyType prop isn’t exposed, I don’t think I can fix this without making manual changes to the library.

Any ideas on fixes? Am I doing something wrong?

EDIT: Also that space at the bottom of the keyboard only appears on iOS and I have no idea why

Hi Sam, sorry you’re running into this issue!
I believe you’re using the TextInput-underline component, that component needs to be updated to support the returnKeyType. In the meantime the TextInput component supports that prop and can be used as a temporary replacement.
I’ll keep you posted on when we ship the updated TextInput-underline component.
Thanks for finding this!

2 Likes

Hi @Seb,

Tried using a TextInput component but it’s not displaying at all (on browser and mobile). Is there some setting I need to enable somewhere?

Update: Now realizing that a TextInput component is getting rendered, it’s just not visible without other settings in place. Pretty confusing as a user, but I think I can make it work combo’d with a Container to make it visible.

Still not sure what’s up with the white space below the keyboard seen in the first screenshot. Any help with that also appreciated!

Hey @Sam_Stowers!
Sorry to get back to you so late!
So I’ve been messing around with the TextInput and your approach of using a container is valid, another approach could be applying a fixed width and height to the input will render it as well.
For the spacing at the bottom, I’m noticing in live preview a bit of white showing at the bottom, is there any margin or padding being applied to the screen container?

@Seb Nope, not on this screen that I can find. Am trying to open it in Expo preview on my Android phone and it’s crashing now, so can’t verify on mobile at the moment. I do see what you’re talking about in the live preview though

Quick update: This is iOS specific. Enabling keyboardAppearance="dark" did the trick for me. Not sure if that’s exposed in the Draftbit component (am working with the vanilla RN component at the moment)

1 Like

Hey @Sam_Stowers,

Thanks for pointing this out! We’re going to investigate exposing that prop :slight_smile:

Moving this to Feature Requests - the team is investigating exposing keyboardAppearance="dark" as a potential enhancement.