Skip to content
Avatune Logo

@avatune/react-native

Source: packages/react-native/README.md

React Native component for rendering avatars from themes.

Installation

Section titled “Installation”
Terminal window
npm install @avatune/react-native react-native-svg

react-native-svg is required as a peer dependency.

Usage

Section titled “Usage”
import { Avatar } from '@avatune/react-native'
import theme from '@avatune/kyute-theme/react-native'


function App() {
  return (
    <Avatar
      theme={theme}
      seed="user@example.com"
      size={200}
    />
  )
}

Props

Section titled “Props”
{
  theme: ReactNativeTheme    // Theme to use for rendering (required)
  seed?: string              // Random seed for avatar generation
  size?: number              // Avatar size in pixels (default: theme size)
  style?: ViewStyle          // Inline styles for SVG container


  // Part selection (string identifier)
  body?: string
  ears?: string
  eyebrows?: string
  eyes?: string
  hair?: string
  head?: string
  mouth?: string
  noses?: string


  // Part colors (CSS color values)
  bodyColor?: string
  earsColor?: string
  eyebrowsColor?: string
  eyesColor?: string
  hairColor?: string
  headColor?: string
  mouthColor?: string
  nosesColor?: string
}

Examples

Section titled “Examples”

Random avatar with seed:

<Avatar theme={nevmstasTheme} seed="521411f1-fab6-4ed5-90bf-2863028bcae6" />

Specific parts with custom colors:

<Avatar
  theme={nevmstasTheme}
  hair="long"
  hairColor="#ff6b6b"
  eyes="happy"
  eyesColor="#4ecdc4"
/>

Requirements

Section titled “Requirements”
  • React Native >= 0.70.0
  • React >= 18.0.0
  • react-native-svg >= 13.0.0