fix(rn): flex components and listitems

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>
berty · Sep 24, 2018 · 8ded949 · 8ded949
1 parent 9cbd140
commit 8ded949
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/client/react-native/common/components/Library/Flex.js b/client/react-native/common/components/Library/Flex.js
@@ -7,10 +7,8 @@ const getDirection = (key, directions = { rows: 'column', cols: 'row' }) =>
 const getAlign = (
   key,
   align = {
-    top: 'flex-start',
-    left: 'flex-start',
-    right: 'flex-end',
-    bottom: 'flex-end',
+    start: 'flex-start',
+    end: 'flex-end',
     center: 'center',
     stretch: 'stretch',
   }

diff --git a/client/react-native/common/components/Library/ListItem.js b/client/react-native/common/components/Library/ListItem.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import { TouchableOpacity, Image } from 'react-native'
 import { colors } from '../../constants'
 import { Flex, Text } from '.'
-import { marginHorizontal } from '../../styles'
+import { marginHorizontal, marginLeft } from '../../styles'
 
 export default class ListItem extends PureComponent {
   render () {
@@ -19,20 +19,25 @@ export default class ListItem extends PureComponent {
           marginHorizontal,
         ]}
       >
-        <Flex.Cols align='left'>
-          <Flex.Rows size={1} align='left' style={{ marginLeft: 30 }}>
+        <Flex.Cols align='start'>
+          <Flex.Rows size={1} align='start' style={[marginLeft]}>
             <Image
-              style={{ width: 40, height: 40, borderRadius: 50 }}
+              style={{ width: 40, height: 40, borderRadius: 20 }}
               source={{
                 uri: 'https://api.adorable.io/avatars/285/' + title + '.png',
               }}
             />
           </Flex.Rows>
-          <Flex.Rows size={6} align='left' style={{ marginLeft: 14 }}>
+          <Flex.Rows
+            size={6}
+            align='start'
+            justify='around'
+            style={{ marginLeft: 14 }}
+          >
             <Text color={colors.black} left middle>
               {title}
             </Text>
-            <Text color={colors.subtleGrey} tiny>
+            <Text color={colors.subtleGrey} tiny middle left>
               {subtitle}
             </Text>
           </Flex.Rows>

diff --git a/client/react-native/common/components/Screens/Chats/Add.js b/client/react-native/common/components/Screens/Chats/Add.js
@@ -101,8 +101,8 @@ class Item extends PureComponent {
           marginHorizontal,
         ]}
       >
-        <Flex.Cols align='left'>
-          <Flex.Rows size={1} align='left' style={{ marginLeft: 30 }}>
+        <Flex.Cols align='start'>
+          <Flex.Rows size={1} align='start' style={{ marginLeft: 30 }}>
             <Image
               style={{ width: 40, height: 40, borderRadius: 50 }}
               source={{
@@ -115,7 +115,7 @@ class Item extends PureComponent {
               }}
             />
           </Flex.Rows>
-          <Flex.Rows size={6} align='left' style={{ marginLeft: 14 }}>
+          <Flex.Rows size={6} align='start' style={{ marginLeft: 14 }}>
             <Text color={colors.black} left middle>
               {(status === 'Myself' && status) ||
                 overrideDisplayName ||
@@ -125,7 +125,7 @@ class Item extends PureComponent {
               Last seen 3 hours ago ...
             </Text>
           </Flex.Rows>
-          <Flex.Rows align='right' self='center'>
+          <Flex.Rows align='end' self='center'>
             <View
               style={[
                 selected ? null : border,