Aptos Avatars React Native

Implementation of the Aptos Avatars shape library for React Native applications.

Installation

pnpm add aptos-avatars-react-native

How to Use

The avatar compoennt can be imported as a React Native component which renders an inline SVG element. If you choose to use a single shape, you can import the shape avatars directly. If you need custom children within, you can use the aptos wrapper component. The package is built with ES Modules so the rest of the package will be tree-shaken out of your bundle.

import { AptosAvatar, Shape2 } from "aptos-avatars-react-native";

// Usage
const App = () => {
  return (
    <div>
      <AptosAvatar value="0xd2cf...cff23" border shadow />
      <AvatarWrapper>
          <Text>ABC</Text>
      </AvatarWrapper>
      <Shape2 value="0xd2cf...dff23" />
    </div>
  );
};

export default App;

Props

| name | type | default | description | | -------------- | ------------------------ | ------------ | --------------------------------------------------------------------------------------------------- | | value* | string | required | Unique identifier for the user (e.g., address or Aptos Name) to randomly generate a shape and color | | size | number | 32 | Size of the icon | | shadow | boolean | false | Toggle the border | | border | boolean | false | Toggle the shadow | | borderSize | number | 2 | Width of the border, in pixels | | borderColor | string | #fff | Color of the border | | radius | number | size | Border radius of the avatar, in pixels | | displayValue | string | N/A | Value to be displayed on the avatar instead of value. This can be a name instead of an identifier | | style | "character" \| "shape" | "character" | Style of the avatar (either "character" or "shape") |