fix(mobile): fix berty icon not diplayed

Signed-off-by: Sacha Froment <sfroment42@gmail.com>

client/react-native/common/components/Library/Header.js

@@ -6,7 +6,6 @@ import { padding, borderBottom, paddingBottom } from '../../styles'
 import { isRTL } from '../../i18n'
 import RelayContext from '../../relay/RelayContext'
 import { promiseWithTimeout } from 'react-relay-network-modern/es/middlewares/retry'
-import Berty from './Berty'
 
 const [defaultTextColor, defaultBackColor] = [colors.black, colors.white]
 
@@ -181,7 +180,7 @@ class StateBadge extends PureComponent {
 
     return (
       <Flex.Cols
-        size={3}
+        size={1}
         style={{
           shadowColor: 'black',
           shadowRadius: 2,
@@ -191,11 +190,27 @@ class StateBadge extends PureComponent {
           },
           shadowOpacity: 0.10,
           display: 'flex',
+          flexShrink: 0,
+          // flexBasis: 0,
+          minHeight: 50,
+          flexGrow: 1,
         }}
       >
-        <Text margin={5} size={2} icon={<Berty color={bertyColor} />} rounded center tiny background={bgBertyColor} color={bertyColor}>{bertyText.toLocaleUpperCase()}</Text>
-        <Text margin={5} size={1} icon='users' rounded center tiny background={bgPeerColor} color={peerColor}>{peers.length.toString()}</Text>
-        <Text margin={5} size={1} icon='bluetooth' rounded center tiny background={bgBleColor} color={bleColor}>{bleText.toLocaleUpperCase()}</Text>
+        <Text margin={5} style={{
+          flexShrink: 0,
+          flexBasis: 'content',
+          flexGrow: 1,
+        }} icon='berty-berty_picto' rounded center tiny background={bgBertyColor} color={bertyColor}>{bertyText.toLocaleUpperCase()}</Text>
+        <Text margin={5} style={{
+          flexShrink: 0,
+          flexBasis: 'content',
+          flexGrow: 0,
+        }} icon='users' rounded center tiny background={bgPeerColor} color={peerColor}>{peers.length.toString()}</Text>
+        <Text margin={5} style={{
+          flexShrink: 0,
+          flexBasis: 'content',
+          flexGrow: 0,
+        }} icon='bluetooth' rounded center tiny background={bgBleColor} color={bleColor}>{bleText.toLocaleUpperCase()}</Text>
       </Flex.Cols>
     )
   }
@@ -250,10 +265,13 @@ export default class Header extends PureComponent {
       >
         <Flex.Rows>
           <Flex.Cols
-            size={1}
+            style={[{
+              flexShrink: 0,
+              // flexBasis: 0,
+              flexGrow: 1,
+            }, searchBar ? paddingBottom : {}]}
             justify='between'
             align='center'
-            style={[searchBar ? paddingBottom : {}]}
           >
             {backBtn && (
               <HeaderButton
@@ -272,6 +290,11 @@ export default class Header extends PureComponent {
             )}
             <Text
               icon={titleIcon}
+              style={{
+                flexShrink: 0,
+                // flexBasis: 0,
+                flexGrow: 0,
+              }}
               left
               large
               color={colorText}

client/react-native/common/components/Library/Icon.js

@@ -1,13 +1,17 @@
 import { View } from 'react-native'
+import { createIconSetFromFontello } from 'react-native-vector-icons'
 import IconAwesome from 'react-native-vector-icons/dist/FontAwesome'
 import IconFeather from 'react-native-vector-icons/dist/Feather'
 import IconMatCom from 'react-native-vector-icons/dist/MaterialCommunityIcons'
 import React from 'react'
 
 import { colors } from '../../constants'
+import fontelloConfig from '../../static/svg/config.json'
+const IconBerty = createIconSetFromFontello(fontelloConfig)
 
 const Icon = ({ name, color, rotate, src, style, flip, ...props }) => {
   if (name == null) return null
+  console.log(IconBerty)
   const [type, iconName] = [
     name.split('-', 1)[0],
     name
@@ -36,6 +40,8 @@ const Icon = ({ name, color, rotate, src, style, flip, ...props }) => {
       return <IconAwesome {...iconProps} />
     case 'material':
       return <IconMatCom {...iconProps} />
+    case 'berty':
+      return <IconBerty {...iconProps} />
     default:
       return <IconFeather {...iconProps} name={name} />
   }

client/react-native/common/static/svg/config.json

@@ -0,0 +1,24 @@
+{
+  "name": "",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "4eec9d09606a43d790f7ec9295ab3c84",
+      "css": "berty_picto",
+      "code": 59392,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M710.6 604.7C710.7 604.7 710.7 604.7 710.8 604.7 787 604.6 850.9 551.9 868.2 480.9L710.6 446.8 710.6 604.7ZM1001.1 444.5C1001.1 359.9 964.6 283.8 906.5 231 859.6 188.3 798.4 161 731 156.8 724.6 156.5 718.1 156.3 711.7 156.3 711.4 156.3 710.9 156.3 710.6 156.3 710.9 156.3 711.4 156.3 711.7 156.3 649.4 155.7 587.7 168.1 530.7 192 511.4 200 492.5 209.4 474.5 220.1L403.7 63 375.3 0.2C304.9 32 253.3 88.3 225.8 154.4L335.1 251.1 214.4 187.3 51.5 97C-48.2 276.5 17.6 503.7 196.9 603.4L0.7 977.7C94.7 1027.1 211 990.9 260.4 896.8 263.1 891.6 265.6 886.2 267.7 880.9 261.8 877.8 255.9 874.7 250.1 871.5 239.5 865.7 229 859.7 218.7 853.6 198.2 841.3 178 828.4 158.3 815 180.5 823.7 203 831.6 225.5 838.9 236.7 842.5 248 845.9 259.4 849.1 268 851.5 276.7 853.8 285.2 855.8 455.5 862.5 622.5 773 706.9 611.9L710.2 604.8C709.2 604.8 708.2 604.8 707.1 604.8 594.4 602.9 503.6 510.9 503.6 397.7 503.6 394.5 503.7 391.4 503.8 388.2 508.7 278.4 599.7 190.9 710.6 190.5 710.6 259.9 710.6 412.9 710.6 438.6L995.6 500.2C999.2 482.2 1001.1 463.6 1001.1 444.5Z",
+        "width": 1001
+      },
+      "search": [
+        "berty_picto"
+      ]
+    }
+  ]
+}