Skip to main content

Keyboard Handling

TrueSheet handles keyboard visibility natively on both iOS and Android. When a TextInput inside the sheet is focused, the sheet automatically adjusts to keep the input visible above the keyboard.

keyboard

How?​

The keyboard handling is built into the native implementation:

  • iOS: Uses UISheetPresentationController's built-in keyboard avoidance
  • Android: Tracks keyboard height via WindowInsetsAnimationCompat and reconfigures sheet detents in real-time

No additional configuration is required. Simply add your TextInput components inside the sheet:

const App = () => {
  return (
    <TrueSheet ref={sheet} detents={['auto']}>
      <View style={{ padding: 16 }}>
        <TextInput
          placeholder="Type something..."
          style={{ borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 8 }}
        />
      </View>
    </TrueSheet>
  )
}

When using a footer component, it automatically repositions above the keyboard, staying visible while the user types.

Autofocus Limitation​

Avoid using autoFocus on TextInput components inside the sheet. The keyboard may appear before the sheet has finished presenting, causing layout issues.

Instead, focus the input programmatically after the sheet has presented:

const inputRef = useRef<TextInput>(null)

const handlePresent = () => {
  inputRef.current?.focus()
}

<TrueSheet onDidPresent={handlePresent}>
  <TextInput ref={inputRef} placeholder="Type something..." />
</TrueSheet>