React Native + Tailwind CSS Avatar

A selection of React Native Avatar components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Circle Avatar

import { View, Image } from 'react-native';
import tailwind from 'twrnc';

export default function () {
  return (
    <Image
      style={tailwind`w-32 h-32 rounded-full`}
      source={{
        uri: 'https://images.unsplash.com/photo-1676824452052-b030b9026b5b',
      }}
    />
  );
}

Rounded Avatar

import { View, Image } from 'react-native';
import tailwind from 'twrnc';

export default function () {
  return (
    <Image
      style={tailwind`w-32 h-32 rounded-lg`}
      source={{
        uri: 'https://images.unsplash.com/photo-1676824452052-b030b9026b5b',
      }}
    />
  );
}