Adding some layout to the home page

src/components/onboarding/Bouton.jsx

@@ -1,6 +1,7 @@
 import { Image, StyleSheet, Text, TouchableOpacity, Platform } from "react-native";
 import twitter from "../../../assets/icons/tweet.png";
 import google from "../../../assets/icons/google.png";
+import TextOpen from "../TextOpen";
 
 export default function CustomBouton({ label, provider, ...props }) {
   return (
@@ -10,15 +11,15 @@ export default function CustomBouton({ label, provider, ...props }) {
       ) : (
         <Image source={google} style={styles.img} />
       )}
-      <Text style={styles.texteBouton}>{label}</Text>
+      <TextOpen style={styles.texteBouton}>{label}</TextOpen>
     </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
   bouton: {
     display: "flex",
-    paddingVertical: 10,
+    paddingVertical: 16,
     paddingHorizontal: 12,
     justifyContent: "center",
     alignItems: "center",
@@ -41,4 +42,7 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  texteBouton: {
+    fontSize: 18,
+  },
 });

src/components/onboarding/Input.jsx

@@ -0,0 +1,39 @@
+import { StyleSheet, Text, TextInput, View } from "react-native";
+import React from "react";
+import TextOpen from "../TextOpen";
+import colors from "../../layouts/colors";
+
+export default function Input({
+  label,
+  placeholder,
+  value,
+  onChangeText,
+  ...props
+}) {
+  return (
+    <View style={styles.input}>
+      <TextOpen>{label}</TextOpen>
+      <TextInput
+        placeholder={placeholder}
+        value={value}
+        onChangeText={onChangeText}
+        style={styles.inputText}
+        {...props}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    width: "100%",
+  },
+  inputText: {
+    backgroundColor: colors.white,
+    borderRadius: 8,
+    padding: 16,
+    marginTop: 8,
+    borderWidth: 0.5,
+    borderColor: "#806987",
+  },
+});

src/context/context.js

@@ -0,0 +1 @@
+import { createContext } from "react";

src/screens/Onboarding.js

@@ -1,11 +1,20 @@
-import { SafeAreaView, StyleSheet, Text, View, Platform, Image } from "react-native";
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  Platform,
+  TouchableOpacity,
+} from "react-native";
 import React from "react";
 import CustomBouton from "../components/onboarding/Bouton";
 import Constants from "expo-constants";
 import colors from "../layouts/colors";
 import font from "../layouts/fonts";
 import TextOpen from "../components/TextOpen";
-import { StatusBar } from "expo-status-bar";
+
+import logo from "../../assets/icons/logo.png";
 
 const Onboarding = () => {
   const handleLoginWithGoogle = () => {
@@ -18,23 +27,25 @@ const Onboarding = () => {
   };
   return (
     <SafeAreaView style={styles.container}>
-      <StatusBar styles= 'auto' />
-      {/* <Image source={require('./splash.png')} styles={{width: 50,}} /> */}
-      <TextOpen style={styles.welcome}>Welcome on board!</TextOpen>
-
+      <Image source={logo} style={styles.img} />
       <View style={styles.content}>
-        <TextOpen style={styles.signText}>Create an account</TextOpen>
-
-        <CustomBouton
-          label={"Continue with Google"}
-          provider={"google"}
-          onPress={handleLoginWithGoogle}
-        />
-        <CustomBouton
-          label={"Continue with Twitter"}
-          provider={"twitter"}
-          onPress={handleLoginWithTwitter}
-        />
+        <View style={styles.text}>
+          <TextOpen style={styles.welcome}>Welcome on board! </TextOpen>
+          <TextOpen style={styles.signText}>Create an account</TextOpen>
+        </View>
+        <View style={styles.action}>
+          <CustomBouton
+            label={"Continue with Google"}
+            provider={"google"}
+            onPress={handleLoginWithGoogle}
+          />
+          <View style={styles.bottom}>
+            <TextOpen style={styles.login}>Have an account ? </TextOpen>
+            <TouchableOpacity>
+              <TextOpen style={styles.log}>Login</TextOpen>
+            </TouchableOpacity>
+          </View>
+        </View>
       </View>
     </SafeAreaView>
   );
@@ -46,13 +57,11 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: colors.white,
-    paddingHorizontal: 20,
     paddingTop: Constants.statusBarHeight + 30,
   },
   welcome: {
     fontSize: 24,
     fontWeight: "900",
-
     ...Platform.select({
       ios: {
         margin: 24,
@@ -69,28 +78,37 @@ const styles = StyleSheet.create({
     color: colors.primary,
   },
   content: {
+    marginHorizontal: 20,
     flex: 1,
-    justifyContent: "center",
-    gap: 22,
+    justifyContent: "space-between",
+    gap: 16,
+    marginVertical: 30,
+    paddingVertical: 20,
   },
   signText: {
     fontSize: 20,
-
-    ...Platform.select({
-      ios: {
-        marginHorizontal: 24,
-        fontWeight: "bold",
-      },
-      android: {
-        marginHorizontal: 0,
-      },
-      default: {
-        // other platforms, web for example
-        marginHorizontal: 0,
-      },
-    }),
-
-    fontWeight: "900",
-    color: "#33313E",
+    color: colors.secondary,
+  },
+  img: {
+    marginVertical: 20,
+  },
+  text: {
+    gap: 20,
+  },
+  action: {
+    gap: 30,
+  },
+  bottom: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 1,
+  },
+  log: {
+    color: colors.secondary,
+    fontWeight: "bold",
+  },
+  login: {
+    textAlign: "center",
+    flexDirection: "row",
   },
 });