LeftOvers/App.js

@@ -1,14 +1,24 @@
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import { StyleSheet, Text, View} from 'react-native';
+import { StyleSheet, Text, View, Alert } from 'react-native';
+import CustomButton from './components/CustomButton';
 
 export default function App() {
 
+  const handleButtonPress = () => {
+    console.log("test 1");
+  };
+
+  const handleButtonPress2 = () => {
+    console.log("test 2");
+  };
 
   return (
     <View style={styles.container}>
       <Text>Ceci va etre la page qui charge le splashScreen</Text>
       <StatusBar style="auto" />
+      <CustomButton title="Appuyez-moi" onPress={handleButtonPress} />
+      <CustomButton title="Autre test" onPress={handleButtonPress2} />
     </View>
   );
 }

LeftOvers/components/CustomButton.tsx

@@ -1,33 +1,43 @@
 import React from 'react';
-import {StyleSheet,Pressable, Text, Image} from 'react-native';
+import {StyleSheet,Pressable, Text, View} from 'react-native';
 
 
 export default function CustomButton(props) {
-    return (
+  return (
-    <Pressable style={styles.button} >
+    <Pressable style={styles.button}>
-      <Text style={styles.text}>{props.title}</Text>
+      <View style={styles.view}>
+        <Text style={styles.text}>{props.title}</Text>
+      </View>
     </Pressable>
-    );
+  );
 }
 
 const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: 12,
+    width : 150,
-    paddingHorizontal: 32,
+    height: 40,
     borderRadius: 4,
     elevation: 3,
     backgroundColor: 'rgba(0, 0, 0, 0.7)',
   },
   text: {
-    width: '100%', // L'image prend toute la largeur du conteneur
+    fontSize: 15,
-    height: '100%',
-    fontSize: 16,
     lineHeight: 21,
     fontWeight: 'bold',
     letterSpacing: 0.25,
     color: 'white',
   },
+  view: {
+    width : 145,
+    height: 35,
+    borderRadius: 4,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: 'grey',
+    alignItems: 'center', // Centre le contenu verticalement
+    justifyContent: 'center', // Centre le contenu horizontalement
+  },
 });