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.