Code Component
Code Overrides
Framer X

Text input: handle mobile keyboard


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.


class TextInput extends React.Component {
  render() {
    return (
      <input type="text" 

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:

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!

© 2019 jimu Labs, Inc.