feat(rn): implement conversation settings screen

related to #309

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>

client/react-native/common/components/App.js

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react'
 import Screens from './Screens'
-import { NativeModules } from 'react-native'
+import { NativeModules, Platform } from 'react-native'
 import { subscriptions } from '../graphql'
 import { SafeAreaView } from 'react-navigation'
-
+import KeyboardSpacer from 'react-native-keyboard-spacer'
 const { CoreModule } = NativeModules
 
 export default class App extends PureComponent {
@@ -38,6 +38,7 @@ export default class App extends PureComponent {
     return (
       <SafeAreaView style={{ flex: 1 }}>
         <Screens />
+        {Platform.OS === 'ios' && <KeyboardSpacer />}
       </SafeAreaView>
     )
   }

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

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Text } from '../Library'
 
-const Button = ({ style, ...props }) => <Text button {...props} />
+const Button = ({ style, ...props }) => (
+  <Text button opacity={props.onPress ? 1 : 0.3} {...props} />
+)
 
 export default Button

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

@@ -6,7 +6,7 @@ import {
   Text,
   TextInput,
   TouchableOpacity,
-  View
+  View,
 } from 'react-native'
 import { Icon } from '.'
 import { colors, fonts } from '../../constants'
@@ -28,11 +28,11 @@ type Props = {
   borderRight?: number,
   borderTop?: number,
   borderLeft?: number,
-  value?: string
+  value?: string,
 }
 
 type State = {|
-  passwordVisible: boolean
+  passwordVisible: boolean,
 |}
 
 class CustomTextInput extends React.PureComponent<Props, State> {
@@ -41,11 +41,11 @@ class CustomTextInput extends React.PureComponent<Props, State> {
     borderBottom: 0,
     borderRight: 0,
     borderTop: 0,
-    borderLeft: 0
+    borderLeft: 0,
   }
 
   state = {
-    passwordVisible: false
+    passwordVisible: false,
   }
 
   input: ?TextInput
@@ -60,7 +60,7 @@ class CustomTextInput extends React.PureComponent<Props, State> {
 
   _togglePasswordVisibility = () => {
     this.setState(prevState => ({
-      passwordVisible: !prevState.passwordVisible
+      passwordVisible: !prevState.passwordVisible,
     }))
   }
 
@@ -81,7 +81,7 @@ class CustomTextInput extends React.PureComponent<Props, State> {
 
     const inputPadding = {
       paddingLeft: renderLeft ? 0 : 18,
-      paddingRight: renderRight || this.props.secureTextEntry ? 0 : 18
+      paddingRight: renderRight || this.props.secureTextEntry ? 0 : 18,
     }
 
     return (
@@ -146,7 +146,7 @@ class CustomTextInput extends React.PureComponent<Props, State> {
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
-    flexDirection: 'row'
+    flexDirection: 'row',
   },
   input: {
     flex: 1,
@@ -155,25 +155,25 @@ const styles = StyleSheet.create({
     color: colors.textGrey,
     fontSize: 14,
     lineHeight: 24,
-    width: 50
+    width: 50,
   },
   eyeIcon: {
     color: colors.subtleGrey,
     padding: 15,
-    fontSize: 16
+    fontSize: 16,
   },
   errorContainer: {
     backgroundColor: colors.error,
     alignItems: 'flex-start',
     paddingHorizontal: 6,
-    paddingVertical: 4
+    paddingVertical: 4,
   },
   error: {
     color: colors.white,
     fontFamily: fonts.medium,
     fontSize: 10,
-    lineHeight: 12
-  }
+    lineHeight: 12,
+  },
 })
 
 export default CustomTextInput

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View } from 'react-native'
+import { View, TouchableOpacity } from 'react-native'
 
 const getDirection = (key, directions = { rows: 'column', cols: 'row' }) =>
   directions[key] || null
@@ -12,7 +12,7 @@ const getAlign = (
     center: 'center',
     stretch: 'stretch',
   }
-) => align[key] || align['center']
+) => align[key] || align['stretch']
 
 const getJustify = (
   key,
@@ -35,23 +35,27 @@ export const Block = ({
   children,
   style,
   ...props
-}) => (
-  <View
-    style={[
-      {
-        flex: size,
-        flexDirection: direction && getDirection(direction),
-        alignItems: align && getAlign(align),
-        alignSelf: self && getAlign(self),
-        justifyContent: justify && getJustify(justify),
-      },
-      style,
-    ]}
-    {...props}
-  >
-    {children}
-  </View>
-)
+}) => {
+  style = [
+    {
+      flex: size,
+      flexDirection: direction && getDirection(direction),
+      alignItems: align && getAlign(align),
+      alignSelf: self && getAlign(self),
+      justifyContent: justify && getJustify(justify),
+    },
+    style,
+  ]
+  return props.onPress ? (
+    <TouchableOpacity {...props} style={style}>
+      {children}
+    </TouchableOpacity>
+  ) : (
+    <View {...props} style={style}>
+      {children}
+    </View>
+  )
+}
 
 export const Grid = props => <Block {...props} />
 

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

@@ -12,17 +12,8 @@ import {
 
 const [defaultTextColor, defaultBackColor] = [colors.black, colors.white]
 
-const HeaderButton = ({ icon, color, onPress }) => {
-  return (
-    <Button
-      icon={icon}
-      large
-      disabled={onPress == null}
-      onPress={onPress}
-      color={color}
-      opacity={onPress == null ? 0.3 : 1}
-    />
-  )
+const HeaderButton = ({ icon, color, style, ...otherProps }) => {
+  return <Button icon={icon} large color={color} {...otherProps} />
 }
 
 export default class Header extends PureComponent {
@@ -65,27 +56,38 @@ export default class Header extends PureComponent {
         <Flex.Rows>
           <Flex.Cols
             size={1}
-            align='center'
             justify='between'
+            align='center'
             style={[searchBar ? paddingBottom : {}]}
           >
             {backBtn === true && (
               <HeaderButton
                 icon='arrow-left'
                 color={colorBtnLeft}
                 onPress={() => navigation.goBack(null)}
+                justify='start'
+                middle
               />
             )}
-
-            <Text icon={titleIcon} left large color={colorText}>
+            <Text
+              icon={titleIcon}
+              left
+              large
+              color={colorText}
+              ellipsis
+              justify={backBtn ? 'center' : 'start'}
+              middle
+              size={5}
+            >
               {title}
             </Text>
-
             {rightBtnIcon !== null && (
               <HeaderButton
                 icon={rightBtnIcon}
                 color={colorBtnRight}
                 onPress={onPressRightBtn}
+                justify='end'
+                middle
               />
             )}
           </Flex.Cols>

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

@@ -17,7 +17,6 @@ const Icon = ({ name, color, rotate, style, ...props }) => {
     name: iconName,
     color: color || colors.textGrey,
     style: [
-      { color: color || colors.textGrey },
       rotate && {
         transform: [
           { rotate: typeof rotate === 'boolean' ? '90deg' : `${rotate}deg` },

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, marginLeft } from '../../styles'
+import { marginLeft, padding } from '../../styles'
 
 export default class ListItem extends PureComponent {
   render () {
@@ -13,14 +13,13 @@ export default class ListItem extends PureComponent {
         style={[
           {
             backgroundColor: colors.white,
-            paddingVertical: 16,
             height: 72,
           },
-          marginHorizontal,
+          padding,
         ]}
       >
-        <Flex.Cols align='start'>
-          <Flex.Rows size={1} align='start' style={[marginLeft]}>
+        <Flex.Cols align='center'>
+          <Flex.Rows size={1} align='center'>
             <Image
               style={{ width: 40, height: 40, borderRadius: 20 }}
               source={{
@@ -29,15 +28,15 @@ export default class ListItem extends PureComponent {
             />
           </Flex.Rows>
           <Flex.Rows
-            size={6}
-            align='start'
-            justify='around'
-            style={{ marginLeft: 14 }}
+            size={7}
+            align='stretch'
+            justify='center'
+            style={[marginLeft]}
           >
-            <Text color={colors.black} left middle>
+            <Text color={colors.black} left middle ellipsis>
               {title}
             </Text>
-            <Text color={colors.subtleGrey} tiny middle left>
+            <Text color={colors.subtleGrey} tiny middle left ellipsis>
               {subtitle}
             </Text>
           </Flex.Rows>