Group Avatar

AvatarGroup is part of the @flexnative/avatar package. To use the AvatarGroup you needs to install @flexnative/avatar package. Fallow this link on how to install the package.

API

import { AvatarGroup } from '@flexnative/avatar';

Component

AvatarGroup Type: React.PureComponent<AvatarGroupProps>

Props

info

AvatarGroup extends ViewProps from React Native.

Name	Type	Required	Default Value	Description
sortIndex	'asc' | 'asc'	false	'asc'	asc or desc are supported
itemPadding	number	false	13	Padding between avatar items.
itemBorderWidth	BorderWidth	false	thick	Optional avatar borders width.
itemBorderColor	ColorValue	false	theme.colors.card	Borders color according react-native ColorValue.
children	Array<React.ReactElement<AvatarProps>>	true	full

Usecase Examples

The following example demonstrates the different types of Avatar Groups in action.

Children

Preview

R A

R A

R A







R A



Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-09 21:04:46
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 09:29:59
 * @ Description: Examples of AvatarGroup component with different Avatar Components type.
 */

import React from 'react';
import Avatar, { AvatarGroup } from '@flexnative/avatar';
import { LOGO } from '../../../../constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>

        {/* Group Avatar with type text */}
        <AvatarGroup>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        {/* Group Avatar with type icon */}
        <AvatarGroup>
          <Avatar icon='avatar' type='icon' color='primary' />
          <Avatar icon='avatar' type='icon' color='primary' />
          <Avatar icon='avatar' type='icon' color='primary' />
        </AvatarGroup>

        {/* Group Avatar with type image */}
        <AvatarGroup>
          <Avatar source={LOGO} color='primary' />
          <Avatar source={LOGO} color='primary' />
          <Avatar source={LOGO} color='primary' />
        </AvatarGroup>

        {/* Group Avatar with mixed types */}
        <AvatarGroup>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar icon='avatar' type='icon' color='primary' />
          <Avatar source={LOGO} color='primary' />
        </AvatarGroup>

      </div>
    );
  }
}

SortIndex

Preview

R A

R A

R A

R A

R A

R A

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-09 23:48:05
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 09:30:07
 * @ Description: Examples of AvatarGroup component of type text with Item Borders color.
 */

import React from 'react';
import Avatar, { AvatarGroup } from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <AvatarGroup itemBorderColor='crimson'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderColor='rgba(237, 20, 61, 0.5)'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderColor='rgb(237, 20, 61)'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderColor='#ed143d'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>
      </div>
    );
  }
}

ItemBorderColor

Preview

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-09 23:48:05
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 09:30:07
 * @ Description: Examples of AvatarGroup component of type text with Item Borders color.
 */

import React from 'react';
import Avatar, { AvatarGroup } from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <AvatarGroup itemBorderColor='crimson'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderColor='rgba(237, 20, 61, 0.5)'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderColor='rgb(237, 20, 61)'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderColor='#ed143d'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>
      </div>
    );
  }
}

ItemBorderWidth

Preview

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

R A

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-09 23:50:40
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 09:30:11
 * @ Description: Examples of AvatarGroup component of type text with Item Borders width.
 */

import React from 'react';
import Avatar, { AvatarGroup } from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>

        <AvatarGroup itemBorderWidth='none'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderWidth='hairline'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderWidth='thin'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderWidth='base'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderWidth='thick'>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemBorderWidth={2}>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

      </div>
    );
  }
}

ItemPadding

Preview

R A

R A

R A

R A

R A

R A

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-09 23:54:06
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 09:30:26
 * @ Description: Examples of AvatarGroup component of type text with Item Padding.
 */

import React from 'react';
import Avatar, { AvatarGroup } from '@flexnative/avatar';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <AvatarGroup itemPadding={15}>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>

        <AvatarGroup itemPadding={25}>
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
          <Avatar text='R A' type='text' color='primary' />
        </AvatarGroup>
      </div>
    );
  }
}

Combinations

Preview

RA



Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-10 00:03:26
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 09:30:04
 * @ Description: Examples of AvatarGroup component with different Avatar Components type.
 */

import React from 'react';
import { StyleSheet } from 'react-native';
import Avatar, { AvatarGroup } from '@flexnative/avatar';
import { LOGO } from '../../../../constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <AvatarGroup style={styles.combinations}>
          <Avatar text='RA' size='large' type='text' color='primary' />
          <Avatar icon='avatar' size='large' type='icon' color='success' />
          <Avatar source={LOGO} size='large' color='info' />
        </AvatarGroup>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  combinations: {
    paddingTop: 8,
    paddingBottom: 8,
    paddingRight: 8,
    paddingLeft: 21,
    borderRadius: 99,
    backgroundColor: '#ed143d30'
  }
});

Playground

Live Editor

//Play with props to see live changes;

const styles = {
  groupStyle: {
    paddingTop: 8,
    paddingBottom: 8,
    paddingRight: 8,
    paddingLeft: 21,
    borderRadius: 99,
    backgroundColor: '#ed143d30'
  }
};

render(
  <AvatarGroup style={styles.groupStyle}>
    <Avatar text='RA' size='large' type='text' color='primary' />
    <Avatar icon='avatar' size='large' type='icon' color='success' />
    <Avatar source={LOGO} size='large' color='info' />
  </AvatarGroup>
);

Result

Loading...