Avatar

An image that represents a person on your platform.

import { Icon } from '@roninoss/icons';
import { Stack } from 'expo-router';
import { View, Text, ScrollView, Pressable } from 'react-native';

import { Avatar, AvatarFallback, AvatarImage } from '~/components/nativewindui/Avatar';
import { useColorScheme } from '~/lib/useColorScheme';

const TWITTER_AVATAR_URI =
  'https://pbs.twimg.com/profile_images/1782428433898708992/1voyv4_A_400x400.jpg';

export default function AvatarScreen() {
  const { colors } = useColorScheme();
  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativeWindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerRight() {
            return (
              <Pressable className="opacity-80 active:opacity-40">
                <View className="opacity-90">
                  <Icon name="cog-outline" color={colors.foreground} />
                </View>
              </Pressable>
            );
          },
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Avatar
          </Text>
          <View className="items-center">
            <Avatar alt="NativeWindUI Avatar">
              <AvatarImage source={{ uri: TWITTER_AVATAR_URI }} />
              <AvatarFallback>
                <Text className="text-white">NUI</Text>
              </AvatarFallback>
            </Avatar>
          </View>
        </View>
      </ScrollView>
    </>
  );
}

Installation

Run the following command:

npx nwui-cli@latest add avatar

🚀

Ship.

Add the following dependency to your project:

npx expo install @rn-primitives/avatar

Copy/paste the following code to the specified file path:

~/components/nativewindui/Avatar.tsx

Download

import * as AvatarPrimitive from '@rn-primitives/avatar';
import * as React from 'react';

import { cn } from '~/lib/cn';

const Avatar = React.forwardRef<AvatarPrimitive.RootRef, AvatarPrimitive.RootProps>(
  ({ alt, className, ...props }, ref) => {
    return (
      <AvatarPrimitive.Root
        ref={ref}
        alt={alt}
        className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
        {...props}
      />
    );
  }
);

Avatar.displayName = AvatarPrimitive.Root.displayName;

const AvatarImage = React.forwardRef<AvatarPrimitive.ImageRef, AvatarPrimitive.ImageProps>(
  ({ className, ...props }, ref) => {
    return (
      <AvatarPrimitive.Image
        ref={ref}
        className={cn('aspect-square h-full w-full', className)}
        {...props}
      />
    );
  }
);

AvatarImage.displayName = AvatarPrimitive.Image.displayName;

const AvatarFallback = React.forwardRef<AvatarPrimitive.FallbackRef, AvatarPrimitive.FallbackProps>(
  ({ className, ...props }, ref) => {
    return (
      <AvatarPrimitive.Fallback
        ref={ref}
        className={cn(
          'bg-muted flex h-full w-full items-center justify-center rounded-full',
          className
        )}
        {...props}
      />
    );
  }
);

AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;

export { Avatar, AvatarFallback, AvatarImage };

🛸

Ship.

Usage

import { Avatar, AvatarFallback, AvatarImage } from '~/components/nativewindui/Avatar';

<Avatar alt="NativeWindUI Avatar">
  <AvatarImage
    source={{
      uri: 'https://pbs.twimg.com/profile_images/1782428433898708992/1voyv4_A_400x400.jpg',
    }}
  />
  <AvatarFallback>
    <Text className="text-foreground">NUI</Text>
  </AvatarFallback>
</Avatar>

Props

Avatar

Inherits all the props from @rn-primitives's Root component.

AvatarImage

Inherits all the props from @rn-primitives's Image component.

AvatarFallback

Inherits all the props from @rn-primitives's Fallback component.