---
title: useKeyboardAvoidingView
description: >-
  The useKeyboardAvoidingView hook automatically adjusts your layout when the
  on-screen keyboard appears, ensuring focused input fields remain visible.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/util/usekeyboardavoidingview'
  md: >-
    https://shopify.dev/docs/api/shop-minis/hooks/util/usekeyboardavoidingview.md
---

# useKeyboardAvoidingView

The `useKeyboardAvoidingView` hook automatically adjusts your layout when the on-screen keyboard appears, ensuring focused input fields remain visible. This hook is primarily designed for Android devices, as iOS handles keyboard avoidance automatically.

Examples

### Examples

* ####

  ##### tsx

  ```tsx
  import {useRef} from 'react'

  import {useKeyboardAvoidingView, Input} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const inputRef = useRef<HTMLInputElement>(null)

    const {onFocus, onBlur} = useKeyboardAvoidingView({ref: inputRef})

    return <Input ref={inputRef} onFocus={onFocus} onBlur={onBlur} />
  }
  ```

***