Room item layout

app/containers/Avatar.js

@@ -1,73 +1,69 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
-export default class Avatar extends PureComponent {
-	static propTypes = {
-		baseUrl: PropTypes.string.isRequired,
-		style: ViewPropTypes.style,
-		text: PropTypes.string,
-		avatar: PropTypes.string,
-		size: PropTypes.number,
-		borderRadius: PropTypes.number,
-		type: PropTypes.string,
-		children: PropTypes.object,
-		user: PropTypes.shape({
-			id: PropTypes.string,
-			token: PropTypes.string
-		})
-	}
+const Avatar = React.memo(({
+	text, size, baseUrl, borderRadius, style, avatar, type, children, userId, token
+}) => {
+	const avatarStyle = {
+		width: size,
+		height: size,
+		borderRadius
+	};
 
-	static defaultProps = {
-		text: '',
-		size: 25,
-		type: 'd',
-		borderRadius: 4
+	if (!text && !avatar) {
+		return null;
 	}
 
-	render() {
-		const {
-			text, size, baseUrl, borderRadius, style, avatar, type, children, user
-		} = this.props;
+	const room = type === 'd' ? text : `@${ text }`;
 
-		const avatarStyle = {
-			width: size,
-			height: size,
-			borderRadius
-		};
+	// Avoid requesting several sizes by having only two sizes on cache
+	const uriSize = size === 100 ? 100 : 50;
 
-		if (!text && !avatar) {
-			return null;
-		}
+	let avatarAuthURLFragment = '';
+	if (userId && token) {
+		avatarAuthURLFragment = `&rc_token=${ token }&rc_uid=${ userId }`;
+	}
 
-		const room = type === 'd' ? text : `@${ text }`;
+	const uri = avatar || `${ baseUrl }/avatar/${ room }?format=png&width=${ uriSize }&height=${ uriSize }${ avatarAuthURLFragment }`;
 
-		// Avoid requesting several sizes by having only two sizes on cache
-		const uriSize = size === 100 ? 100 : 50;
+	const image = (
+		<FastImage
+			style={avatarStyle}
+			source={{
+				uri,
+				priority: FastImage.priority.high
+			}}
+		/>
+	);
 
-		let avatarAuthURLFragment = '';
-		if (user && user.id && user.token) {
-			avatarAuthURLFragment = `&rc_token=${ user.token }&rc_uid=${ user.id }`;
-		}
+	return (
+		<View style={[avatarStyle, style]}>
+			{image}
+			{children}
+		</View>
+	);
+});
 
-		const uri = avatar || `${ baseUrl }/avatar/${ room }?format=png&width=${ uriSize }&height=${ uriSize }${ avatarAuthURLFragment }`;
+Avatar.propTypes = {
+	baseUrl: PropTypes.string.isRequired,
+	style: ViewPropTypes.style,
+	text: PropTypes.string,
+	avatar: PropTypes.string,
+	size: PropTypes.number,
+	borderRadius: PropTypes.number,
+	type: PropTypes.string,
+	children: PropTypes.object,
+	userId: PropTypes.string,
+	token: PropTypes.string
+};
 
-		const image = (
-			<FastImage
-				style={avatarStyle}
-				source={{
-					uri,
-					priority: FastImage.priority.high
-				}}
-			/>
-		);
+Avatar.defaultProps = {
+	text: '',
+	size: 25,
+	type: 'd',
+	borderRadius: 4
+};
 
-		return (
-			<View style={[avatarStyle, style]}>
-				{image}
-				{children}
-			</View>
-		);
-	}
-}
+export default Avatar;

app/containers/MessageBox/index.js

@@ -706,7 +706,8 @@ class MessageBox extends Component {
 							size={30}
 							type={item.username ? 'd' : 'c'}
 							baseUrl={baseUrl}
-							user={user}
+							userId={user.id}
+							token={user.token}
 						/>,
 						<Text key='mention-item-name' style={styles.mentionText}>{ item.username || item.name }</Text>
 					]

app/containers/message/Message.js

@@ -238,7 +238,8 @@ export default class Message extends PureComponent {
 					borderRadius={4}
 					avatar={avatar}
 					baseUrl={baseUrl}
-					user={user}
+					userId={user.id}
+					token={user.token}
 				/>
 			);
 		}