Hi, I’m trying to use the avatar component. I’m trying to create a small profile pic in the top left of my screen with a couple of text fields to the right of it. However, it just looks like this. I’ve tried using the smallest size for the avatar but the size does not seem to change. Here is my code:

import { useEffect, useState } from 'react';
import { VStack } from "@/components/ui/vstack";
import { HStack } from "@/components/ui/hstack";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { View } from 'react-native';
import { Text } from '@/components/ui/text';
import { SafeAreaView } from "react-native-safe-area-context";
import profileData from '../assets/profile.json';

interface Profile {
    name: string;
    avatar: string;
    totalRaised: string;
    causes: string[];
}

export default function Home() {
    const [profile, setProfile] = useState<Profile | null>(null);

    useEffect(() => {
        setProfile(profileData);
    }, []);

    if (!profile) return null; 

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: '#fff', paddingHorizontal: 16 }}>
            <View style={{ flex: 1, padding: 16, backgroundColor: '#fff' }}>
                {/* Profile Section */}
                <HStack space="md" alignItems="center">
                    {/* Avatar with Explicit Sizing */}
                    <Avatar style={{ width: 50, height: 50, borderRadius: 25 }}>
                        <AvatarImage source={require('../assets/profile2.png')} />
                    </Avatar>

                    {/* Name and Total Raised */}
                    <VStack space="xs">
                        <Text size="lg" bold>
                            {profile.name}
                        </Text>
                        <Text size="md" color="gray">
                            Total Raised: {profile.totalRaised}
                        </Text>
                    </VStack>
                </HStack>
            </View>
        </SafeAreaView>
    );
}

I’m using expo with expo-router. In my app directory, I have a _layout.tsx and that is where I have my <GlustackUIProvider> wrapper like this:

import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { GluestackUIProvider } from '@gluestack-ui/themed';
import { config } from '../gluestack-ui.config'; // Adjust path if needed

export default function Layout() {
  return (
    <GluestackUIProvider config={config} colorMode="dark">
      <Tabs
        screenOptions={{
          tabBarStyle: { backgroundColor: '#000000' },
          tabBarActiveTintColor: '#ffffff',
          tabBarInactiveTintColor: '#888888',
        }}
      >
        <Tabs.Screen
          name="index"
          options={{
            title: 'Home',
            tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} />,
          }}
        />
        <Tabs.Screen
          name="discover"
          options={{
            title: 'Discover',
            tabBarIcon: ({ color, size }) => <Ionicons name="compass" color={color} size={size} />,
          }}
        />
        <Tabs.Screen
          name="cards"
          options={{
            title: 'Cards',
            tabBarIcon: ({ color, size }) => <Ionicons name="card" color={color} size={size} />,
          }}
        />
        <Tabs.Screen
          name="donations"
          options={{
            title: 'Donations',
            tabBarIcon: ({ color, size }) => <Ionicons name="heart" color={color} size={size} />,
          }}
        />
        <Tabs.Screen
          name="settings"
          options={{
            title: 'Settings',
            tabBarIcon: ({ color, size }) => <Ionicons name="settings" color={color} size={size} />,
          }}
        />
      </Tabs>
    </GluestackUIProvider>
  );
}
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Is this a bug or am I missing something? Thanks in advance.