Avatar

A celestial avatar for profile representation

Galaxy Avatar

An avatar for identification

Preview

import React from "react";
import { View, Image } from "react-native";

const Avatar = () => {
  return (
    <View className="w-16 h-16 rounded-full bg-gray-200 flex justify-center items-center overflow-hidden">
      <Image
        source={require("../../assets/images/alien1.avif")}
        className="w-full h-full object-cover"
      />
    </View>
  );
};

export default Avatar;

Usage Example

import React from "react";
import { View } from "react-native";
import Avatar from "./components/Avatar/GalaxyAvatar";

const App = () => {
  return (
    <View>
      <Avatar />
    </View>
  );
};

export default App;

Earth Avatar

An avatar for profile identification on earth

Preview

Good morning

Zyphorax

import React from "react";
import { View, Text, Image } from "react-native";
import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";

const Avatar = () => {
  return (
    <View className="flex-row items-center gap-2">
      <View className="w-16 h-16 rounded-full bg-gray-200 flex justify-center items-center overflow-hidden">
        <Image
          source={require("../../assets/images/alien1.avif")}
          className="w-full h-full object-cover"
        />
      </View>
      <View>
        <Text className="text-xs text-gray-700">Good morning</Text>
        <Text className="font-semibold text-base">
          Zyphorax
          <MaterialCommunityIcons
            name="alien-outline"
            size={16}
            color="black"
          />
        </Text>
      </View>
    </View>
  );
};

export default Avatar;

Usage Example

import React from "react";
import { View } from "react-native";
import Avatar from "./components/Avatar/EarthAvatar";

const App = () => {
  return (
    <View>
      <Avatar />
    </View>
  );
};

export default App;