#3019 apply styling guidelines

src/components/Avatar.js

@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import React, {PureComponent} from 'react';
 import {Image, View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -8,7 +9,10 @@ const propTypes = {
     source: PropTypes.string,
 
     /** Extra styles to pass */
-    styles: PropTypes.arrayOf(PropTypes.object),
+    style: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.object,
+    ]),
 
     /** Extra styles to pass to View wrapper */
     containerStyles: PropTypes.arrayOf(PropTypes.object),
@@ -19,7 +23,7 @@ const propTypes = {
 
 const defaultProps = {
     source: '',
-    styles: [],
+    style: [],
     containerStyles: [],
     size: 'default',
 };
@@ -30,13 +34,17 @@ class Avatar extends PureComponent {
             return null;
         }
 
+        const propsStyle = _.isArray(this.props.style)
+            ? this.props.style
+            : [this.props.style];
+
         return (
             <View style={[...this.props.containerStyles, styles.avatarWrapper]}>
                 <Image
                     source={{uri: this.props.source}}
                     style={[
                         this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal,
-                        ...this.props.styles,
+                        ...propsStyle,
                     ]}
                 />
             </View>

src/components/AvatarWithIndicator.js

@@ -126,7 +126,7 @@ class AvatarWithIndicator extends PureComponent {
                 style={[this.props.size === 'large' ? styles.avatarLarge : styles.sidebarAvatar]}
             >
                 <Avatar
-                    styles={[this.props.size === 'large' ? styles.avatarLarge : null]}
+                    style={[this.props.size === 'large' ? styles.avatarLarge : null]}
                     source={this.props.source}
                 />
                 <Animated.View style={StyleSheet.flatten(indicatorStyles)}>

src/pages/DetailsPage.js

@@ -64,7 +64,7 @@ const DetailsPage = ({personalDetails, route, translate}) => {
                         <View style={styles.pageWrapper}>
                             <Avatar
                                 containerStyles={[styles.avatarLarge, styles.mb3]}
-                                styles={[styles.avatarLarge]}
+                                style={[styles.avatarLarge]}
                                 source={details.avatar}
                             />
                             <Text style={[styles.displayName, styles.mt1, styles.mb6]} numberOfLines={1}>

src/pages/home/report/ReportActionItemSingle.js

@@ -51,7 +51,7 @@ const ReportActionItemSingle = ({
     return (
         <View style={wrapperStyles}>
             <Avatar
-                styles={[styles.actionAvatar]}
+                style={[styles.actionAvatar]}
                 source={avatarUrl}
             />
             <View style={[styles.chatItemRight]}>

src/pages/settings/Profile/ProfilePage.js

@@ -270,7 +270,7 @@ class ProfilePage extends Component {
                 />
                 <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
                     <Avatar
-                        styles={[styles.avatarLarge, styles.alignSelfCenter]}
+                        style={[styles.avatarLarge, styles.alignSelfCenter]}
                         source={this.props.myPersonalDetails.avatar}
                     />
                     <AttachmentPicker>