import React from 'react';
import { Image, StyleSheet } from 'react-native';

import { Touchable } from './';
import UserStatusIndicator from '../common/UserStatusIndicator';

const styles = StyleSheet.create({
  wrapper: {
    position: 'relative',
  },
  status: {
    marginLeft: 21,
    marginTop: 21,
  },
});

export default({ avatarUrl, size, status, isCircular, onPress }) => {
  const imageStyle = {
    height: size,
    width: size,
    borderRadius: isCircular ? size / 2 : size / 8,
  };

  return (
    <Touchable onPress={onPress}>
      <Image
        style={imageStyle}
        source={{ uri: avatarUrl }}
        resizeMode="contain"
      >
        {status &&
          <UserStatusIndicator
            status={status}
            customStyles={styles.status}
          />
        }
      </Image>
    </Touchable>
  );
};

@@ -387,20 +387,24 @@
   const 
-imag
+touchabl
 eStyle =
@@ -437,24 +437,76 @@
 idth: size,%0A
+  %7D;%0A%0A  const imageStyle = %7B%0A    ...touchableStyle,%0A
     borderRa
@@ -543,17 +543,16 @@
 size / 8
-,
 %0A  %7D;%0A%0A 
@@ -593,16 +593,39 @@
 onPress%7D
+ style=%7BtouchableStyle%7D
 %3E%0A      

Fix clicking area of avatar. (#330)