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

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} />

}

Examples

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} />
}

Was this page helpful?