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