Trung BìnhReact Native iconReact Native

`KeyboardAvoidingView` — `behavior` chọn `padding` hay `height`?

<KeyboardAvoidingView> đẩy nội dung lên khi keyboard mở để không che TextInput. Prop behavior:

  • padding (recommend cho iOS): thêm padding bottom = chiều cao keyboard. Children giữ nguyên, chỉ vùng dưới được "đẩy" lên. Mượt và predictable.
  • height: shrink chiều cao container = screenHeight - keyboardHeight. Hữu ích khi container có background image — tránh image bị resize.
  • position: dịch toàn bộ container lên trên. Dễ gây content bị cắt nếu không có ScrollView ngoài.
  • undefined (Android): default Android có windowSoftInputMode="adjustResize" trong AndroidManifest.xml xử lý việc này tự động.

Pattern thực tế cross-platform:

tsx
<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : undefined}
  style={{ flex: 1 }}
  keyboardVerticalOffset={headerHeight}
>
  <ScrollView keyboardShouldPersistTaps="handled">{...}</ScrollView>
</KeyboardAvoidingView>

keyboardVerticalOffset cần khi có header navigation bên trên — bù phần header để keyboard đẩy đúng vị trí.

Xem toàn bộ React Native cùng filter theo level & chủ đề con.

Mở danh sách React Native