ADD: gestion dynamique de la distance de la

topbar avec l'encoche

bob_party/package.json

@@ -43,6 +43,7 @@
     "react-native-gesture-handler": "~2.5.0",
     "react-native-picker-select": "^8.0.4",
     "react-native-safe-area-context": "4.3.1",
+    "react-native-status-bar-height": "^2.6.0",
     "react-native-web": "~0.18.7",
     "react-native-woodpicker": "^0.3.17",
     "react-redux": "^8.0.4",

bob_party/src/components/TopBar.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from "react"
-import { Pressable, Image, Text, View} from "react-native"
+import { Pressable, Image, Text, View, Platform} from "react-native"
 import { Skin } from "../core/Skin"
 import React from "react"
 import { SkinComponent } from "./SkinComponent"
@@ -16,6 +16,27 @@ import { useConversationStore } from "../context/conversationContext"
 import { socket } from "../../socketConfig"
 import { Conversation } from "../core/conversation"
 import MatchModifier from "../core/Match/matchModifier"
+import { getStatusBarHeight } from 'react-native-status-bar-height';
+ 
+// 44 - on iPhoneX
+// 20 - on iOS device
+// X - on Android platfrom (runtime value)
+// 0 - on all other platforms (default)
+
+function topBarTopDistance(){
+    if(Platform.OS === 'ios'){
+        return{
+            paddingTop : getStatusBarHeight(),
+            paddingBottom : getStatusBarHeight()/2.5,
+        }
+    }
+    return{
+        paddingTop : 20,
+        flex: 0.15,
+    }
+}
+
+
 
 /* 
     Images required
@@ -85,7 +106,7 @@ FC<{nav: any, state?: string}> =
     switch (state) {
         case 'settings':
             return (
-                <View style={styles.header}>
+                <View style={[styles.header,topBarTopDistance()]}>
                     <Pressable>
                         <Image source={msc} style={styles.icon}/>
                     </Pressable>
@@ -98,7 +119,7 @@ FC<{nav: any, state?: string}> =
 
         case 'matchmacking'|| 'game':
             return (
-                <View style={styles.header}>
+                <View style={[styles.header,topBarTopDistance()]}>
                     <Pressable>
                         <Image source={msc} style={styles.icon}/>
                     </Pressable>
@@ -111,7 +132,7 @@ FC<{nav: any, state?: string}> =
 
         case 'conversation':
             return (
-                <View style={styles.header}>
+                <View style={[styles.header,topBarTopDistance()]}>
                     <Pressable onPress={() => { resetCurrentConv(); MANAGER_CONVERSATION.setCurrentConv(null); nav.goBack()}}>
                         <Image source={cross} style={styles.icon}/>
                     </Pressable>
@@ -123,7 +144,7 @@ FC<{nav: any, state?: string}> =
             )
         case 'addConversation':
             return (
-                <View style={styles.header}>
+                <View style={[styles.header,topBarTopDistance()]}>
                     <Pressable onPress={() => {nav.goBack()}}>
                         <Image source={cross} style={styles.icon}/>
                     </Pressable>
@@ -136,7 +157,7 @@ FC<{nav: any, state?: string}> =
 
         default:
             return (
-                <View style={styles.header}>
+                <View style={[styles.header,topBarTopDistance()]}>
                     <Pressable onPress={() => nav.navigate('ProfileTab', {screen: 'Profile'})}>
                             <SkinComponent skin={useUserStore().user?.getCurrentSkin()} state='icon' nav={nav} />
                         </Pressable>
@@ -148,3 +169,8 @@ FC<{nav: any, state?: string}> =
             )
     }
 }
+
+
+// {   Platform.OS === 'ios' && (
+//     <View style={{paddingTop: "4%", width: "100%", backgroundColor:"#2E2C34"}}></View>
+//   )}

bob_party/src/components/style/TopBar.style.js

@@ -6,7 +6,6 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
     header: {
-        flex: 0.15,
         flexDirection: 'row',
         backgroundColor: '#2D2C33',
         width: '100%',
@@ -33,3 +32,4 @@ export default StyleSheet.create({
       color: 'white',
     },
 });
+

bob_party/yarn.lock

@@ -7805,6 +7805,11 @@ react-native-safe-area-context@4.3.1:
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.1.tgz#5cf97b25b395e0d09bc1f828920cd7da0d792ade"
   integrity sha512-cEr7fknJCToTrSyDCVNg0GRdRMhyLeQa2NZwVCuzEQcWedOw/59ExomjmzCE4rxrKXs6OJbyfNtFRNyewDaHuA==
 
+react-native-status-bar-height@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/react-native-status-bar-height/-/react-native-status-bar-height-2.6.0.tgz#b6afd25b6e3d533c43d0fcdcfd5cafd775592cea"
+  integrity sha512-z3SGLF0mHT+OlJDq7B7h/jXPjWcdBT3V14Le5L2PjntjjWM3+EJzq2BcXDwV+v67KFNJic5pgA26cCmseYek6w==
+
 react-native-web@~0.18.7:
   version "0.18.10"
   resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.10.tgz#fb4db047f4be7f9cf35f37ec8d52f7d1c450600f"