How to make native-base Modal works well with KeyboardAvoildingView in Android? - react-native

Question

I try to add KeyboardAvoidingView to the Modal Component.
But when i call the keyboard up, the modal doesnt move and still be covered by keyboard.
This is my code : https://snack.expo.dev/#tikkhun/joyous-blueberries

Answer 1

After searching and asking. I get a way to work well: just use behavior: "position"
Here is My example Component:
/**
* #file: 弹出框
*/
import React, { useRef, useEffect, useState } from 'react';
import { Center, Button, HStack, Input, KeyboardAvoidingView, Modal, Spacer, Text } from 'native-base';
import { useTranslation } from 'react-i18next';
export default function ModalContent({ isOpen, onClose, title, defaultValue, type = 'input', onSave }) {
const { t } = useTranslation();
const [value, setValue] = useState();
const inputRef = useRef(null);
useEffect(() => {
// 这里的 setTimeout 是为了让键盘正常弹出
setTimeout(() => {
if (inputRef?.current) {
inputRef.current.focus();
}
}, 10);
});
useEffect(() => {
setValue(defaultValue);
return () => {
setValue('');
};
});
return (
<Modal isOpen={isOpen} onClose={onClose}>
<KeyboardAvoidingView style={{ width: '100%' }} behavior="position">
<Center>
<Modal.Content style={{ width: '100%' }}>
<Modal.Header>
<HStack space="3" alignItems="center">
<Text fontSize="md">{title}</Text>
<Spacer />
<Button
_text={{ fontSize: 'md' }}
variant="ghost"
onPress={() => {
onSave && onSave(value);
}}>
{t('settings.save')}
</Button>
</HStack>
</Modal.Header>
<Modal.Body>
<Input size="2xl" ref={inputRef} defaultValue={value} onChangeText={v => setValue(v)} />
</Modal.Body>
</Modal.Content>
</Center>
</KeyboardAvoidingView>
</Modal>
);
}