Skip to content

B
beasy-mobile
Commit e239a097 by G
Options

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

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
parent 7fe5d5af
Showing with 20 additions and 22 deletions
src/screens/UserLoginScreen.tsx
...@@ -13,10 +13,11 @@ import { containers } from "@styles/Commons"; ...@@ -13,10 +13,11 @@ import { containers } from "@styles/Commons";
import { useMutation } from "@tanstack/react-query"; import { useMutation } from "@tanstack/react-query";
import type { AxiosError } from "axios"; import type { AxiosError } from "axios";
import { useCallback, useState } from "react"; 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 { useSafeAreaInsets } from "react-native-safe-area-context";
import { LOG } from "@logger"; import { LOG } from "@logger";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
const log = LOG.extend("UserLoginScreen"); const log = LOG.extend("UserLoginScreen");
const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ navigation }) => { const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ navigation }) => {
...@@ -77,27 +78,24 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav ...@@ -77,27 +78,24 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav
return ( return (
<BackgroundDefault> <BackgroundDefault>
<View style={[containers.containerFull, { paddingTop: insets.top }]}> <View style={[containers.containerFull, { paddingTop: insets.top }]}>
<KeyboardAvoidingView <Box style={{ height: "20%" }} px={"l"}>
behavior={Platform.OS === "ios" ? "padding" : "height"} <Box
style={{ flex: 1 }} px={"m"}
> justifyContent={"space-between"}
<Box style={{ height: "20%" }} px={"l"}> flexDirection={"row"}
<Box alignItems={"center"}
px={"m"} >
justifyContent={"space-between"} <TouchableOpacity onPress={() => navigation.goBack()}>
flexDirection={"row"} <Fontisto name="close-a" size={12} color="black" />
alignItems={"center"} </TouchableOpacity>
>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Fontisto name="close-a" size={12} color="black" />
</TouchableOpacity>
<TouchableOpacity> <TouchableOpacity>
<Text>Mot de passe oublie ?</Text> <Text>Mot de passe oublie ?</Text>
</TouchableOpacity> </TouchableOpacity>
</Box>
</Box> </Box>
<ContainerBorderTopCurved> </Box>
<ContainerBorderTopCurved>
<KeyboardAwareScrollView extraScrollHeight={50}>
<Box p={"l"} paddingTop={"x100"} mb={"s"}> <Box p={"l"} paddingTop={"x100"} mb={"s"}>
<Box mb={"l"}> <Box mb={"l"}>
<Text fontSize={40} fontWeight={"bold"} variant={"black"}> <Text fontSize={40} fontWeight={"bold"} variant={"black"}>
...@@ -146,8 +144,8 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav ...@@ -146,8 +144,8 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav
onPress={() => {}} onPress={() => {}}
/> />
</Box> </Box>
</ContainerBorderTopCurved> </KeyboardAwareScrollView>
</KeyboardAvoidingView> </ContainerBorderTopCurved>
</View> </View>
</BackgroundDefault> </BackgroundDefault>
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment