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,27 +78,24 @@ 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"}
-							justifyContent={"space-between"}
-							flexDirection={"row"}
-							alignItems={"center"}
-						>
-							<TouchableOpacity onPress={() => navigation.goBack()}>
-								<Fontisto name="close-a" size={12} color="black" />
-							</TouchableOpacity>
+				<Box style={{ height: "20%" }} px={"l"}>
+					<Box
+						px={"m"}
+						justifyContent={"space-between"}
+						flexDirection={"row"}
+						alignItems={"center"}
+					>
+						<TouchableOpacity onPress={() => navigation.goBack()}>
+							<Fontisto name="close-a" size={12} color="black" />
+						</TouchableOpacity>
 
-							<TouchableOpacity>
-								<Text>Mot de passe oublie ?</Text>
-							</TouchableOpacity>
-						</Box>
+						<TouchableOpacity>
+							<Text>Mot de passe oublie ?</Text>
+						</TouchableOpacity>
 					</Box>
-					<ContainerBorderTopCurved>
+				</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>
-					</ContainerBorderTopCurved>
-				</KeyboardAvoidingView>
+					</KeyboardAwareScrollView>
+				</ContainerBorderTopCurved>
 			</View>
 		</BackgroundDefault>
 	);