Code
Code Component
Code Overrides
Framer X

Text input: handle mobile keyboard

Overview

This is a follow up of this text input tip. HT @BYUUXD.

On Android, the soft keyboard will block the text input like so.

This is more of a bug of the Framer Preview app on Android. But as a workaround, we can write code to move the screen up when the text input gains focus.

TextInput

class TextInput extends React.Component {
  ...
  render() {
    return (
      <input type="text" 
        onFocus={this.handleFocus} 
        onBlur={this.handleBlur} 
      />
    )
  }
}

App.ts (Code override)

Animate containerTop on focus and on blur:

export const InputEvents: Override = () => {
  return {
    onFocus() {
      // Don't move the screen up on iOS because it already moves
      // the screen for us
      !iOS && animate.ease(data.containerTop, -200, { duration: 0.2 });
    },
    onBlur() {
      !iOS && animate.ease(data.containerTop, 0, { duration: 0.2 });
    }
  };
};

Determine if it’s on iOS:

// https://stackoverflow.com/a/9039885/3973320
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

PPS: See other pro tips, or share / request a new tip.


download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!


© 2018 jimu Labs, Inc.