Skip to content

B
beasy-mobile
Commit 1ab5a6e5 by G
Options

use custom wrapper BackgroundGreenWhiteContent

parent 39cfcfba
Showing with 61 additions and 46 deletions
src/components/backgrounds/BackgroundGreenWhiteContentArea.tsx 0 → 100644
import { containers, images } from "@styles/Commons";
import { ImageBackground, View } from "react-native";
type Props = { children: React.ReactNode };
const BackgroundGreenWhiteContentArea = ({ children }: Props) => {
return (
<View style={containers.containerFull}>
<ImageBackground
source={require("../../../assets/beasy_background.png")}
resizeMode="cover"
style={images.cover}
>
{children}
</ImageBackground>
</View>
);
};
export default BackgroundGreenWhiteContentArea;
src/screens/UserLoginScreen.tsx
import Button from "@components/Button"; import Button from "@components/Button";
import Input from "@components/Input"; import Input from "@components/Input";
import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
import Box from "@components/bases/Box"; import Box from "@components/bases/Box";
import Text from "@components/bases/Text"; import Text from "@components/bases/Text";
import { containers, images } from "@styles/Commons"; import { containers } from "@styles/Commons";
import { ImageBackground, KeyboardAvoidingView, Platform, View } from "react-native"; import { KeyboardAvoidingView, Platform, View } from "react-native";
const UserLoginScreen = () => { const UserLoginScreen = () => {
return ( return (
<View style={{ height: "100%", width: "100%" }}> <BackgroundGreenWhiteContentArea>
<ImageBackground <Box
source={require("../../assets/beasy_background.png")} style={[containers.containerFull]}
resizeMode="cover" p={"xl"}
style={images.cover} paddingTop={"x240"}
flexDirection={"column"}
justifyContent={"space-between"}
> >
<Box <KeyboardAvoidingView
style={[containers.containerFull]} behavior={Platform.OS === "ios" ? "height" : "height"}
p={"xl"} style={{ flex: 1 }}
paddingTop={"x240"}
flexDirection={"column"}
justifyContent={"space-between"}
> >
<KeyboardAvoidingView <View>
behavior={Platform.OS === "ios" ? "height" : "height"} <Box mb={"x100"}>
style={{ flex: 1 }} <Text fontSize={40} fontWeight={"bold"}>
> Connexion
<View> </Text>
<Box mb={"x100"}> <Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
<Text fontSize={40} fontWeight={"bold"}> </Box>
Connexion
</Text>
<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
</Box>
<Box gap={"m"}> <Box gap={"m"}>
<Input label="Email" /> <Input label="Email" />
<Input label="Mot de passe" secureTextEntry={true} /> <Input label="Mot de passe" secureTextEntry={true} />
</Box> </Box>
</View> </View>
</KeyboardAvoidingView> </KeyboardAvoidingView>
<Box mt={"xl"}> <Box mt={"xl"}>
<Button <Button
variant={"full"} variant={"full"}
textVariants={"primary"} textVariants={"primary"}
label="Se connecter" label="Se connecter"
onPress={() => {}} onPress={() => {}}
/> />
<Button <Button
variant={"lightGray"} variant={"lightGray"}
textVariants={"black"} textVariants={"black"}
label="Creer un compte" label="Creer un compte"
onPress={() => {}} onPress={() => {}}
/> />
</Box>
</Box> </Box>
</ImageBackground> </Box>
</View> </BackgroundGreenWhiteContentArea>
); );
}; };
......
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