fix(rn): contacts list rendering performance

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>
berty · Oct 18, 2018 · f4ee13c · f4ee13c
1 parent 130e44d
commit f4ee13c
Show file tree

Hide file tree

Showing 12 changed files with 315 additions and 296 deletions.
diff --git a/client/react-native/common/components/Library/Flex.js b/client/react-native/common/components/Library/Flex.js
@@ -26,49 +26,54 @@ const getJustify = (
   }
 ) => justify[key] || justify['center']
 
-export const Block = ({
+const getStyle = ({ size = 1, direction, align, self, justify, style }) => [
+  {
+    flex: size,
+    flexDirection: direction && getDirection(direction),
+    alignItems: align && getAlign(align),
+    alignSelf: self && getAlign(self),
+    justifyContent: justify && getJustify(justify),
+  },
+  style,
+]
+
+const getProps = ({
   size = 1,
   direction,
   align,
   self,
   justify,
-  children,
   style,
   ...props
-}) => {
-  style = [
-    {
-      flex: size,
-      flexDirection: direction && getDirection(direction),
-      alignItems: align && getAlign(align),
-      alignSelf: self && getAlign(self),
-      justifyContent: justify && getJustify(justify),
-    },
-    style,
-  ]
+}) => props
+
+export const Block = props => {
   return props.onPress ? (
-    <TouchableOpacity {...props} style={style}>
-      {children}
-    </TouchableOpacity>
+    <TouchableOpacity {...getProps(props)} style={getStyle(props)} />
   ) : (
-    <View {...props} style={style}>
-      {children}
-    </View>
+    <View {...getProps(props)} style={getStyle(props)} />
   )
 }
 
-export const Grid = props => <Block {...props} />
-
-export const Rows = ({ direction, ...props }) => (
-  <Block direction='rows' {...props} />
-)
+export const Rows = ({ direction, ...props }) => {
+  props.direction = 'rows'
+  return props.onPress ? (
+    <TouchableOpacity {...getProps(props)} style={getStyle(props)} />
+  ) : (
+    <View {...getProps(props)} style={getStyle(props)} />
+  )
+}
 
-export const Cols = ({ direction, ...props }) => (
-  <Block direction='cols' {...props} />
-)
+export const Cols = ({ direction, ...props }) => {
+  props.direction = 'cols'
+  return props.onPress ? (
+    <TouchableOpacity {...getProps(props)} style={getStyle(props)} />
+  ) : (
+    <View {...getProps(props)} style={getStyle(props)} />
+  )
+}
 
 export default {
-  Grid,
   Rows,
   Cols,
   Block,