From e239a097582a22f619cc4bc76dd28b1b385e80c7 Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Fri, 6 Sep 2024 09:21:54 +0000
Subject: [PATCH] KeyboardAwareScrollView made good work of raising the form inside the curved container when focused. Also added an offset so that the input field is always a little above the keyboard

---
 src/screens/UserLoginScreen.tsx | 42 ++++++++++++++++++++----------------------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/screens/UserLoginScreen.tsx b/src/screens/UserLoginScreen.tsx
index 61c99a0..5f104f0 100644
--- a/src/screens/UserLoginScreen.tsx
+++ b/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>
 	);
--
libgit2 0.27.1