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

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

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',
}}
/>
);
}

Copyright 2022 - Atom Lab | Privacy Policy | Terms and Conditions