<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"trongAndroidManifest.xmlxử 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í.
<KeyboardAvoidingView> pushes content up so the keyboard does not cover a TextInput. The behavior prop:
padding(recommended for iOS): adds bottom padding equal to keyboard height. Children stay put, only the bottom area is pushed up. Smooth and predictable.height: shrinks container height toscreenHeight - keyboardHeight. Useful when the container has a background image you do not want resized.position: shifts the whole container up. Easy to crop content if there is no outer ScrollView.undefined(Android): the platform default withwindowSoftInputMode="adjustResize"inAndroidManifest.xmlalready handles this.
Practical cross-platform pattern:
tsx
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
style={{ flex: 1 }}
keyboardVerticalOffset={headerHeight}
>
<ScrollView keyboardShouldPersistTaps="handled">{...}</ScrollView>
</KeyboardAvoidingView>keyboardVerticalOffset is needed when a navigation header is above — it accounts for the header so the keyboard pushes by the right amount.