KeyboardAvoidingWrapper

Zero-config wrapper that keeps form content visible when the keyboard opens. Uses automaticallyAdjustKeyboardInsets on iOS and KeyboardAvoidingView on Android.

Usage

Open on Snack ↗

import { KeyboardAvoidingWrapper, TextField } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'

export default function App() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <KeyboardAvoidingWrapper>
          <TextField label="Name" value={name} onChangeText={setName} />
          <TextField label="Email" value={email} onChangeText={setEmail} />
        </KeyboardAvoidingWrapper>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

How it works

Platform	Strategy
iOS	ScrollView with automaticallyAdjustKeyboardInsets
Android	KeyboardAvoidingView with configurable behavior

The inner ScrollView uses keyboardShouldPersistTaps="handled" so taps on buttons still work while the keyboard is open.

Keyboard events

Listen to keyboard show/hide events:

Open on Snack ↗

import { KeyboardAvoidingWrapper, TextField, Typography } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'

export default function App() {
  const [status, setStatus] = useState('idle')
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <KeyboardAvoidingWrapper
          onKeyboardShow={(e) => setStatus(`shown @ ${e.endCoordinates.height}`)}
          onKeyboardHide={() => setStatus('hidden')}
        >
          <Typography variant="bodyMedium">Status: {status}</Typography>
          <TextField label="Tap to focus" />
        </KeyboardAvoidingWrapper>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

On iOS these fire on keyboardWillShow / keyboardWillHide; on Android they fire on keyboardDidShow / keyboardDidHide.

Props

Prop	Type	Default	Required	Description
behavior	enum	padding	No	Keyboard avoidance strategy.
keyboardVerticalOffset	number	0	No	Extra offset added to the keyboard height calculation. Useful for accounting for headers or tab bars.
enabled	boolean		No	Enable or disable the keyboard avoiding behavior.
scrollViewProps	ScrollViewProps	-	No	Props forwarded to the inner `ScrollView`.
onKeyboardShow	(event: KeyboardEvent) => void	-	No	Called when the keyboard is about to show (iOS) or has shown (Android).
onKeyboardHide	(event: KeyboardEvent) => void	-	No	Called when the keyboard is about to hide (iOS) or has hidden (Android).
style	StyleProp<ViewStyle>	-	No	Style applied to the outer `KeyboardAvoidingView`.
contentContainerStyle	StyleProp<ViewStyle>	-	No	Style applied to the inner `ScrollView` contentContainerStyle.