I have a form inside an action sheet and I'm trying to implementKeyboardAvoidingView to not overwrite my Input component but nothing happens. I don't know exactly what's going on but when I use the [tag:behavior="position]" there is a difference but it deforms my component
return (
<VStack mx={8}>
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
keyboardVerticalOffset={Platform.OS == "ios" ? 20 : 0}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<SafeAreaView>
<Input
placeholder="name"
onChangeText={setName}
value={name}
w="full"
/>
<Input
placeholder="email"
onChangeText={setEmail}
value={email}
w="full"
/>
<VStack w="full">
<SelectList
placeholder={"Tipo Sanguíneo"}
inputStyles={{
color: "#777272",
fontSize: 14,
padding: 0,
}}
setSelected={(val: string) => setSelected(val)}
onSelect={() => console.log(selected)}
data={roles.map((item) => item.name)}
save="value"
search={false}
boxStyles={{
borderWidth: 0.5,
borderColor: "#80808060",
height: 43,
borderRadius: 3,
}}
dropdownStyles={{
bottom: 5,
borderWidth: 0.5,
borderColor: "#80808060",
borderRadius: 3,
paddingVertical: 0,
margin: 0,
}}
dropdownTextStyles={{
fontSize: 12,
padding: 0,
}}
/>
</VStack>
<HStack my={5} space={3} alignSelf="center">
<Button title="Cancelar" isOutline w="1/2" />
<Button
title="Adicionar"
w="1/2"
onPress={() =>
signUp({
name,
email,
roleId: selected,
bloodCenterId: authData?.bloodCenterId
? authData?.bloodCenterId
: "",
}).then(childToParent(true))
}
textAlign="left"
alignSelf="center"
/>
</HStack>
</SafeAreaView>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</VStack>
);
I tried to do it using flex and some styling but it deforms my entire container
