(fix) groups avatar and continue button in channel setup

src/common/components/Input.js

@@ -47,6 +47,8 @@ export default class Input extends Component {
       <PhoneValidationComponent 
         style={[ComponentsStyle.loginInputNew, this.props.style]}
         textStyle={{color: '#FFFFFF'}}
+        onFocus={this.props.onFocus}
+        onBlur={this.props.onBlur}
       />
     );
   }

src/common/components/PhoneValidationComponent.js

@@ -145,6 +145,10 @@ export default class PhoneValidationComponent extends Component {
             onChangePhoneNumber={this.setPhone}
             ref="phoneInput"
             placeholder={i18n.t('onboarding.phoneNumber')}
+            textProps={{
+              onFocus: this.props.onFocus,
+              onBlur: this.props.onBlur,
+            }}
           />
 
           <ListItemButton onPress={this.joinAction} disabled={!this.canJoin()}>

src/groups/GroupsListItemNew.js

-import React, {
-  Component
-} from 'react';
+import React, {Component} from 'react';
 
-import {
-  observer,
-  inject
-} from 'mobx-react/native'
+import {observer, inject} from 'mobx-react/native';
 
-import {
-  MINDS_CDN_URI
-} from '../config/Config';
+import {MINDS_CDN_URI} from '../config/Config';
 
-import { ListItem, Avatar } from 'react-native-elements';
+import {ListItem} from 'react-native-elements';
 
+import Button from '../common/components/Button';
 import colors from '../styles/Colors';
 import i18n from '../common/services/i18n.service';
-import { CommonStyle as CS } from '../styles/Common';
-import { FLAG_JOIN } from '../common/Permissions';
+import {CommonStyle as CS} from '../styles/Common';
+import {FLAG_JOIN} from '../common/Permissions';
 import { StyleSheet } from 'react-native';
-import abbrev from '../common/helpers/abbrev';
 import ListItemButton from '../common/components/ListItemButton';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import FastImage from 'react-native-fast-image';
+import abbrev from '../common/helpers/abbrev';
 
 export default
 @inject('groupView')
 @observer
 class GroupsListItemNew extends Component {
+  state = {
+    source: null,
+  };
+
+  /**
+   * Derive state from props
+   * @param {object} nextProps
+   * @param {object} prevState
+   */
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.group && prevState.group !== nextProps.group) {
+      return {
+        source: {
+          rounded: true,
+          size: 45,
+          source: {
+            uri:
+              MINDS_CDN_URI +
+              'fs/v1/avatars/' +
+              nextProps.group.guid +
+              '/small/' +
+              nextProps.group.icontime,
+          },
+        },
+      };
+    }
+
+    return null;
+  }
+
   /**
    * Render
    */
@@ -38,37 +61,24 @@ class GroupsListItemNew extends Component {
         title={this.props.group.name}
         titleStyle={[styles.title, CS.colorPrimaryText]}
         keyExtractor={item => item.rowKey}
-        avatar={
-          <FastImage
-            source={{ uri: this.getAvatar(this.props.group) }}
-            style={[{
-              width: 42,
-              height: 42,
-              borderRadius: 21,
-              backgroundColor: 'transparent'
-            }]}
-          />
-        }
+        leftAvatar={this.state.source}
         subtitle={i18n.t('groups.listMembersCount', {count: abbrev(this.props.group['members:count'])})}
         subtitleStyle={[styles.subtitle, CS.colorSecondaryText]}
+        onPress={this._onPress}
         hideChevron={!button}
         rightIcon={button}
       />
     );
   }
 
-  getAvatar = (group) => {
-    return `${MINDS_CDN_URI}fs/v1/avatars/${group.guid}/large/${group.icontime}`;
-  }
-
   /**
    * On press
    */
   _onPress = () => {
     if (this.props.onPress) {
-      this.props.onPress(this.props.group)
+      this.props.onPress(this.props.group);
     }
-  }
+  };
 
   /**
    * Get button
@@ -100,14 +110,14 @@ class GroupsListItemNew extends Component {
     if (!this.props.group.can(FLAG_JOIN, true)) return;
     this.props.groupView.setGroup(this.props.group);
     this.props.groupView.join(this.props.group.guid);
-  }
+  };
   /**
    * Leave the group
    */
   leave = () => {
     this.props.groupView.setGroup(this.props.group);
     this.props.groupView.leave(this.props.group.guid);
-  }
+  };
 }
 
 const styles = StyleSheet.create({

src/onboarding/steps/ChannelSetupStepNew.js

@@ -32,7 +32,8 @@ export default class ChannelSetupStepNew extends Component {
     preview_avatar: null,
     preview_banner: null,
     saving: false,
-    dirty: false
+    dirty: false,
+    showFooter: true,
   };
 
   uploads = {
@@ -111,6 +112,8 @@ export default class ChannelSetupStepNew extends Component {
     }
   }
 
+  toggleFooter = () => this.setState({showFooter: !this.state.showFooter});
+
   getBody = () => {
     const hasAvatar = this.props.user.hasAvatar() || this.state.preview_avatar;
     const avatar = this.getAvatar();
@@ -152,6 +155,8 @@ export default class ChannelSetupStepNew extends Component {
             editable={true}
             optional={true}
             info={i18n.t('onboarding.phoneNumberTooltip')}
+            onFocus={this.toggleFooter}
+            onBlur={this.toggleFooter}
             inputType={'phoneInput'}
           />
           <Input
@@ -186,9 +191,9 @@ export default class ChannelSetupStepNew extends Component {
         <View style={[CS.mindsLayoutBody, CS.backgroundThemePrimary]}>
           {this.getBody()}
         </View>
-        <View style={[CS.mindsLayoutFooter, CS.backgroundThemePrimary]}>
+        { this.state.showFooter && <View style={[CS.mindsLayoutFooter, CS.backgroundThemePrimary]}>
           {this.getFooter()}
-        </View>
+        </View>}
       </View>
     );
   }