From c950e5bcb1e36c6288f94218877bbc4101c04642 Mon Sep 17 00:00:00 2001
From: alguilhot <alban.guilhot@etu.uca.fr>
Date: Tue, 11 Oct 2022 01:47:18 +0200
Subject: [PATCH] =?UTF-8?q?ADD:=20D=C3=A9but=20cr=C3=A9ation=20page=20mtor?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bob_party/src/screens/Test.js | 93 +++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 bob_party/src/screens/Test.js

diff --git a/bob_party/src/screens/Test.js b/bob_party/src/screens/Test.js
new file mode 100644
index 0000000..81914a6
--- /dev/null
+++ b/bob_party/src/screens/Test.js
@@ -0,0 +1,93 @@
+import { StatusBar } from 'expo-status-bar'
+import { useState } from 'react';
+import { StyleSheet, View, Text, Alert, Pressable, Image, ImageBackground} from 'react-native'
+import { FlatList } from 'react-native-gesture-handler';
+
+const BobClassic = require('../../assets/BobsSkins/BobClassic.png');
+const BobBW = require('../../assets/BobsSkins/BobBW.png');
+const BobBlue = require('../../assets/BobsSkins/BobBlue.png');
+const BobGreen = require('../../assets/BobsSkins/BobGreen.png');
+
+
+
+function Test(props) {
+    const { navigation } = props
+
+    const [skin, setSkin] = useState([
+        { name : 'BobClassic', image: BobClassic, price: 0, id: 's0001'},
+        { name : 'BobBW', image: BobBW, price: 150, id: 's0002'},
+        { name : 'BobBlue', image: BobBlue, price: 200, id: 's0003'},
+        { name : 'BobGreen', image: BobGreen, price: 200, id: 's0004'},
+    ]);
+
+    ItemSeprator = () => <View style={{
+        height: 2,
+        width: "100%",
+        backgroundColor: "red",
+    }}/>
+
+    return (
+        <View style={styles.imageWrapper}>
+            <FlatList
+                numColumns={2}
+                keyExtractor={( item ) => item.id }
+                data={skin}
+                ItemSeparatorComponent={ItemSeprator}
+                renderItem={({ item }) => (
+                    <ImageBackground
+                        style={styles.theImage}
+                        source={item.image}
+                    >
+                        <Text>{item.price}</Text>
+                        <Text>{item.name}</Text>
+                    </ImageBackground>
+                )}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    imageWrapper: {
+        height: 200,
+        width: 200,
+        overflow : "hidden"
+    },
+    theImage: {
+        flex: 1,
+        alignItems: "flex-end",
+        margin: 10,
+        width: "100%",
+        height: "100%",
+        resizeMode: "cover",
+    },
+    container: {
+        flex: 1,
+        backgroundColor: '#45444E',
+        flex: 1,
+        paddingTop: "50%",
+        paddingBottom: "50%",
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+    },
+    Text: {
+        margin: 15,
+        paddingVertical: 12,
+        width: '40%',
+        borderRadius: 10,
+        backgroundColor: '#0085FF',
+      },
+    item: {
+        marginTop: 24,
+        backgroundColor: 'pink',
+        fontSize: 24,
+    },
+    debug:{
+        flex: 0.2,
+        backgroundColor: "red",
+        padding: 50,
+    },
+});
+
+export default Test
\ No newline at end of file