Keyboard woes

Does *anyone* have a really, really neat way of using native keyboards and input fields within a styled app that can elegantly slot right in without destroying an existing design?

I’ve been playing with off-screen native imputs which echo to ‘fake’ input fields on-screen and the result in iOS was great, but the result in Android stinks and is slowing driving me crazy…

So if anyone has any suggestions/sample code or other helpful note, pleeease let me know :slight_smile:

Chris 

It depends on if your trying to make it look like the text look seamless  or if your happy with the users knowing you just popped up an input box. If your happy with the latter, I can show you a module I have that handles it all for me.

It depends on if your trying to make it look like the text look seamless  or if your happy with the users knowing you just popped up an input box. If your happy with the latter, I can show you a module I have that handles it all for me.

I am really frustrated with that problem as well, and adding scrolling and keyboard to it make it even more difficult to manage.

I started to experiment with a placeholder input field that had a “transition.to” a hidden text field that would appear as soon as the transition was over.

The example I was trying to emulate was how the Apple Podcast app shows its search bar. It starts as a field that looks like you can edit in place, but when you click on it the field expands to the width of the device and moves to to top so you can see the real time results better.

Here’s the before and after…

…so my thought was to have a similar setup where any “skinned” fields have a single associated textField that replaces it at the last frame of a transition. Just like the Podcast app, you could dim the rest of the screen, place a “cancel” or “update” button to make it feel more like an old school modal input.

My $0.02

I am really frustrated with that problem as well, and adding scrolling and keyboard to it make it even more difficult to manage.

I started to experiment with a placeholder input field that had a “transition.to” a hidden text field that would appear as soon as the transition was over.

The example I was trying to emulate was how the Apple Podcast app shows its search bar. It starts as a field that looks like you can edit in place, but when you click on it the field expands to the width of the device and moves to to top so you can see the real time results better.

Here’s the before and after…

…so my thought was to have a similar setup where any “skinned” fields have a single associated textField that replaces it at the last frame of a transition. Just like the Podcast app, you could dim the rest of the screen, place a “cancel” or “update” button to make it feel more like an old school modal input.

My $0.02