KeyboardAwareScrollView made good work of raising the form inside the curved…

src/screens/UserLoginScreen.tsx

@@ -13,10 +13,11 @@ import { containers } from "@styles/Commons";
 import { useMutation } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import { useCallback, useState } from "react";
-import { KeyboardAvoidingView, Platform, TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { LOG } from "@logger";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 const log = LOG.extend("UserLoginScreen");
 const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ navigation }) => {
@@ -77,10 +78,6 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav
 	return (
 		<BackgroundDefault>
 			<View style={[containers.containerFull, { paddingTop: insets.top }]}>
-				<KeyboardAvoidingView
-					behavior={Platform.OS === "ios" ? "padding" : "height"}
-					style={{ flex: 1 }}
-				>
 				<Box style={{ height: "20%" }} px={"l"}>
 					<Box
 						px={"m"}
@@ -98,6 +95,7 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav
 					</Box>
 				</Box>
 				<ContainerBorderTopCurved>
+					<KeyboardAwareScrollView extraScrollHeight={50}>
 						<Box p={"l"} paddingTop={"x100"} mb={"s"}>
 							<Box mb={"l"}>
 								<Text fontSize={40} fontWeight={"bold"} variant={"black"}>
@@ -146,8 +144,8 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav
 								onPress={() => {}}
 							/>
 						</Box>
+					</KeyboardAwareScrollView>
 				</ContainerBorderTopCurved>
-				</KeyboardAvoidingView>
 			</View>
 		</BackgroundDefault>
 	);