Grouplist updated

src/components/Avatar/Avatar.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { View, Image } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+import Images from '../../config/image';
+import styles from './styles';
+import PropTypes from 'prop-types';
+
+export default class Avatar extends Component {
+    render() {
+        const { uri, large, isGroup, enableDot } = this.props;
+
+        return (
+            <View style={large ? styles.avatarLargeView : styles.avatarView}>
+                {isGroup ? (
+                    <Icon name="face" size={64} color="grey" />
+                ) : (
+                    <Image
+                        source={uri ? { uri: uri } : Images.profile.avatar}
+                        style={large ? styles.avatarLarge : styles.avatar}
+                    />
+                )}
+                {enableDot ? (
+                    <View
+                        style={large ? styles.statusDotLarge : styles.statusDot}
+                    />
+                ) : (
+                    <View style={{}} />
+                )}
+            </View>
+        );
+    }
+}
+
+Avatar.defultProps = {
+    enableDot: true,
+    large: false,
+    isGroup: false,
+    liveEnabled: true
+};
+
+Avatar.propTypes = {
+    large: PropTypes.bool,
+    isGroup: PropTypes.bool,
+    enableDot: PropTypes.bool,
+    uri: PropTypes.string
+};

src/components/Avatar/index.js

@@ -0,0 +1,2 @@
+import Avatar from './Avatar';
+export default Avatar;

src/components/Avatar/styles.js

@@ -0,0 +1,53 @@
+import { StyleSheet } from 'react-native';
+import AppStyles from '../../config/styles';
+
+const styles = StyleSheet.create({
+    avatarView: {
+        width: 48,
+        height: 48,
+        backgroundColor: AppStyles.colors.separator,
+        borderRadius: 24
+    },
+    avatar: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        overflow: 'hidden'
+    },
+    statusDot: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        width: 16,
+        height: 16,
+        borderRadius: 9,
+        borderWidth: 2,
+        borderColor: AppStyles.colors.white,
+        backgroundColor: AppStyles.colors.onlineGreen
+    },
+    avatarLargeView: {
+        width: 64,
+        height: 64,
+        backgroundColor: AppStyles.colors.separator,
+        borderRadius: 32
+    },
+    avatarLarge: {
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+        overflow: 'hidden'
+    },
+    statusDotLarge: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        borderWidth: 2,
+        borderColor: AppStyles.colors.white,
+        backgroundColor: AppStyles.colors.onlineGreen
+    }
+});
+
+export default styles;

src/components/GroupsList/GroupItem.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { Card, Text } from 'react-native-paper';
+
+import Avatar from '../Avatar';
+import styles from './styles';
+import PropTypes from 'prop-types';
+
+export default class GroupItem extends Component {
+    onPress = () => {
+        alert('Pressed');
+    };
+    render() {
+        const { item } = this.props;
+        return (
+            <Card style={styles.card} onPress={this.onPress}>
+                <View style={styles.cardView}>
+                    <View style={styles.nameView}>
+                        <Avatar large isGroup />
+                        <Text style={styles.nameText}>{item.name}</Text>
+                        <Text style={styles.last}>
+                            Active {item.last_active}
+                        </Text>
+                    </View>
+                    <View style={styles.footer}>
+                        <Text numberOflines={2} style={styles.members}>
+                            {item.members}
+                        </Text>
+                    </View>
+                </View>
+            </Card>
+        );
+    }
+}
+
+GroupItem.propTypes = {
+    item: PropTypes.object
+};

src/components/GroupsList/GroupsList.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { FlatList } from 'react-native';
+import GroupsItem from './GroupItem';
+import styles from './styles';
+
+const data = [
+    {
+        name: 'React Native Community',
+        last_active: '15 days ago',
+        members: 'Vicky, Alex Jacob, Bob, William + 320'
+    },
+    {
+        name: 'Android Developers Forum',
+        last_active: '30 days ago',
+        members: 'Vicky, Alex, Bob, William + 256'
+    },
+    {
+        name: 'iOs Developers',
+        last_active: '30 days ago',
+        members: 'Tom Jacob, Alex Jacob,Thomas Paul + 400'
+    },
+    {
+        name: 'Buddies',
+        last_active: '10 days ago',
+        members: 'Vicky, Alex, Bob, William + 356'
+    },
+    {
+        name: 'Birthday Celebration',
+        last_active: '5 days ago',
+        members: 'Tom Alex, Jacob Samuel, Sam, +12'
+    },
+    {
+        name: 'College Buddies',
+        last_active: '24 days ago',
+        members: 'Vicky, Alex, Bob, William + 10'
+    },
+    {
+        name: 'Memories',
+        last_active: '1 day ago',
+        members: 'Tom Manuel, Jacob Augustin,Sam TOny +2'
+    },
+    {
+        name: 'Secret Group',
+        last_active: '28 days ago',
+        members: 'Tom Alex,Jacob Mathews,Sam Tony'
+    }
+];
+
+export default class GroupsList extends Component {
+    renderItem = ({ item }) => {
+        return <GroupsItem item={item} />;
+    };
+
+    render() {
+        return (
+            <FlatList
+                data={data}
+                contentContainerStyle={styles.list}
+                renderItem={this.renderItem}
+                showsVerticalScrollIndicator={false}
+            />
+        );
+    }
+}

src/components/GroupsList/index.js

@@ -0,0 +1,2 @@
+import GroupsList from './GroupsList';
+export default GroupsList;

src/components/GroupsList/styles.js

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+import AppStyles from '../../config/styles';
+import Metrics from '../../config/metrics';
+
+const styles = StyleSheet.create({
+    card: {
+        width: Metrics.screenWidth / 2.5,
+        height: Metrics.screenHeight / 3.6,
+        margin: 5
+    },
+    cardView: {
+        width: Metrics.screenWidth / 2.5,
+        height: Metrics.screenHeight / 3.6,
+        justifyContent: 'space-between',
+        alignItems: 'center'
+    },
+    footer: {
+        width: Metrics.screenWidth / 2.5 - 16,
+        paddingVertical: 22,
+        alignItems: 'center',
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: AppStyles.colors.separator
+    },
+    nameView: {
+        alignItems: 'center',
+        padding: 8,
+        paddingTop: 16
+    },
+    nameText: {
+        marginTop: 8,
+        color: AppStyles.colors.black,
+        fontSize: 15,
+        textAlign: 'center'
+    },
+    last: {
+        marginTop: 4,
+        color: AppStyles.colors.grey,
+        fontSize: 12,
+        textAlign: 'center'
+    },
+    members: {
+        color: AppStyles.colors.grey,
+        fontSize: 12,
+        textAlign: 'center'
+    },
+    list: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+});
+
+export default styles;

src/config/image.js

@@ -0,0 +1,8 @@
+const images = {
+    profile: {
+        avatar: require('../../assets/images/avatar.png'),
+        wave: require('../../assets/images/wave.png')
+    }
+};
+
+export default images;

src/config/metrics.js

@@ -0,0 +1,13 @@
+/*
+ * platform/application wide metrics for proper styling
+*/
+import { Dimensions, Platform } from 'react-native';
+const { width, height } = Dimensions.get('window');
+
+const metrics = {
+    screenWidth: width < height ? width : height,
+    screenHeight: width < height ? height : width,
+    navBarHeight: Platform.OS === 'ios' ? 54 : 66
+};
+
+export default metrics;

src/config/styles.js

@@ -0,0 +1,22 @@
+const AppStyles = {
+    colors: {
+        accentColor: '#0084ff',
+        inactiveGreyColor: '#626262',
+        lightGreyCOlor: '#7f8c8d',
+        separator: '#bdc3c7',
+        white: 'white',
+        black: 'black',
+        grey: 'grey',
+        green: 'green',
+        onlineGreen: '#2ecc71',
+        lightWhite: '#f9f9f9'
+    },
+    fonts: {
+        FONT_REGULAR: 'Roboto-Regular',
+        FONT_MEDIUM: 'Roboto-Medium',
+        FONT_LIGHT: 'Roboto-Light',
+        FONT_THIN: 'Roboto-Thin'
+    }
+};
+
+export default AppStyles;

src/navigation/AppStack.js

@@ -14,8 +14,7 @@ import {
   ScanScreen,
   ShareCodeScreen,
   SafetyMeasuresScreen,
-  DetailsScreen,
-  SampleScreen
+  DetailsScreen
 } from '../screens';
 
 
@@ -115,23 +114,6 @@ const HomeStack = ({ navigation }) => (
         }
       }}
     />
-    <Stack.Screen
-      name="SampleScreen"
-      component={SampleScreen}
-      options={{
-        title: 'This is a sample screen',
-        headerTitleAlign: 'center',
-        headerTitleStyle: {
-          color: '#2e64e5',
-          fontFamily: 'Kufam-SemiBoldItalic',
-          fontSize: 18
-        },
-        headerStyle: {
-          shadowColor: '#fff',
-          elevation: 0,
-        }
-      }}
-    />
   </Stack.Navigator>
 );