ADD: Fin de la vue du screen Profile

bob_party/src/screens/Profile.tsx

@@ -1,23 +1,47 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text} from 'react-native'
+import { StyleSheet, View, Text, Image} from 'react-native'
 import React from 'react';
 import stylesScreen from './style/screens.style'
+import styles from './style/Profile.style'
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
-import { FlatList } from 'react-native-gesture-handler';
 import { SkinComponent } from '../components/Skin';
+import { User } from '../core/user';
 import tabSkinApp from '../constSkin';
+import tabConv from '../constCov'
+import { ButtonChangeSkin } from '../components/ButtonChangeSkin';
+import { ScreenIndicator } from '../components/ScreenIndicator';
 
+const coin = require('../../assets/Icons/Coin.png')
+
+const UserActu=new User("14", "leBg", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, tabSkinApp[0], tabSkinApp, tabConv);
 
 function Profile(props: { navigation: any; }) {
     const { navigation } = props
     return (
     <View style={stylesScreen.container}>
         <TopBar
-          skin={tabSkinApp[0]} 
+          skin={UserActu.getCurrentSkin()} 
           nav={navigation}
           />
-      <View style={styles.body}>
+      <View style={stylesScreen.bodyStart}>
+        <ScreenIndicator title='Profil'/>
+        <View style={styles.coinSkinView}>
+            <View style={styles.coinView}>
+                <Image 
+                    style={styles.coin}
+                    source={coin}
+                />
+                <Text style={styles.coinText}>{UserActu.getCurrentCoins()}</Text>
+            </View>
+            <View style={styles.skinView}>
+                <SkinComponent skin={UserActu.getCurrentSkin()} state='profile'/>
+                <ButtonChangeSkin onPress={() => navigation.navigate('SkinList')}/>
+            </View>
+        </View>
+        <View style={styles.infoView}>
+            <Text style={styles.infoText}>Total de BobCoin gagnés: {UserActu.getTotalCoins()}</Text>
+        </View>
       </View>
       <BotBar
           nav={navigation}
@@ -26,12 +50,5 @@ function Profile(props: { navigation: any; }) {
   );
 }
 
-const styles = StyleSheet.create({
-    body: {
-        flex: 1,
-        flexDirection: 'column',
-        width: '100%',
-    },
-});
 
 export default Profile

bob_party/src/screens/style/Profile.style.js

@@ -0,0 +1,43 @@
+import { StyleSheet } from "react-native";
+
+const coinSkinGap = 10;
+const infoGap = 20;
+
+export default StyleSheet.create({
+    coinSkinView: {
+        flexDirection:'row',
+    },
+    coinView: {
+        width: '50%',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    skinView: {
+        width: '50%',
+    },
+    coin: {
+      width: 75,
+      height: 75,
+      marginVertical: (coinSkinGap/2),
+    },
+    coinText: {
+      fontSize: 16,
+      lineHeight: 21,
+      fontWeight: 'bold',
+      letterSpacing: 0.25,
+      color: 'white',
+      marginVertical: (coinSkinGap/2),
+    },
+    infoView: {
+        marginLeft: '5%',
+        marginTop: '5%',
+    },
+    infoText: {
+      fontSize: 16,
+      lineHeight: 21,
+      fontWeight: 'bold',
+      letterSpacing: 0.25,
+      color: 'white',
+      marginVertical: (infoGap/2),
+    }
+});