Components
Avatar
Avatar component for React Native.
Installation
npx rn-glow add accordion⚙️ Props
| Prop | Type | Default | Description |
|---|---|---|---|
image | AvatarItem | required | The main avatar image object with uri and optional name. |
size | number | 40 | Diameter of the avatar. |
onPress | (id: string) => void | undefined | Callback when the avatar is pressed. |
showBorder | boolean | false | Whether to show a border around the avatar. |
borderColor | string | "#fff" | Border color. |
borderWidth | number | 1 | Border thickness. |
backgroundColor | string | "#eee" | Background color of the avatar. |
textColor | string | "#000" | Text color for the name or label. |
disabled | boolean | false | Disables press interaction. |
loading | boolean | false | Shows a loading shimmer instead of avatar. |
showAvatar | boolean | true | Whether to show the avatar image. |
showText | boolean | false | Whether to show the name/label text. |
textPosition | "top" | "bottom" | "right" | "bottom" | Position of the text relative to the avatar. |
textStyle | object | {} | Style object for customizing the text. |
shimmerSpeed | number | 1.2 | Speed of the shimmer animation (if loading). |
pressedScale | number | 0.95 | Scale factor on press interaction. |
pressedOpacity | number | 0.8 | Opacity value on press interaction. |
showOnlineIndicator | boolean | false | Displays a small online status dot. |
onlineIndicatorColor | string | "#4CAF50" | Color of the online indicator. |
onlineIndicatorSize | number | 8 | Size of the online indicator dot. |
🚀 Example
import { View, Text, ScrollView, SafeAreaView } from "react-native";
import React, { useEffect, useState } from "react";
import { Avatar } from "@/components/index";
const AvatarDemo: React.FunctionComponent = (_$_): React.ReactNode => {
const [isAvatarLoading, setIsAvatarLoading] = useState<boolean>(true);
useEffect(() => {
setInterval(() => setIsAvatarLoading(false), 5000);
}, []);
return (
<ScrollView
className="flex-1 bg-gray-900"
contentContainerStyle={{ flexGrow: 1 }}
>
<SafeAreaView className="flex-1 items-center justify-center px-6">
<View className="mb-12 items-center">
<Text className="text-white text-3xl font-bold mb-2">
Profile Avatar
</Text>
<Text className="text-gray-400 text-base text-center leading-6">
Interactive avatar component with modern dark styling
</Text>
</View>
<View className="bg-gray-800 rounded-3xl p-8 shadow-2xl border border-gray-700 mb-8">
<View className="absolute -top-2 -right-2 w-4 h-4 bg-blue-500 rounded-full opacity-80" />
<View className="absolute -bottom-1 -left-1 w-3 h-3 bg-purple-500 rounded-full opacity-60" />
<View className="items-center">
<View className="relative">
<View className="absolute -inset-2 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full opacity-30 blur-lg" />
<View className="relative bg-gray-700 rounded-full p-2">
<Avatar
image={{
uri: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=400",
name: "John Doe",
}}
showAvatar={isAvatarLoading ? false : true}
loading={isAvatarLoading}
showOnlineIndicator={true}
size={80}
/>
</View>
</View>
</View>
</View>
</SafeAreaView>
</ScrollView>
);
};
export default AvatarDemo;