Mascot is one soft, single-color shape with eyes. By default its eyes are the tiles of the Once UI mark, and they turn like the logo loader while it thinks. It takes the same props as the web Mascot, and a seed gives the same character on the phone as in the browser.
state is what the assistant is doing: idle, listening, thinking, speaking or sleeping. Each one has its own pose and motion. mood is the expression on top: neutral, happy, surprised, sad, skeptical, wink, focused or determined. Changing either one plays a short squash, then the face eases into the new expression.
While state is speaking, the body and mouth move on their own loop. Pass level, a loudness from 0 to 1, to make them move with the voice instead. Read it from your audio player's metering, for example expo-audio's metering.
Every part of the look is a prop: color (a scheme or any hex, rgb() or oklch() color), roundness, aspect, surface, eyes, eyeSize, eyeSpacing, eyeHeight, eyeColor, mouth, brows, cheeks and personality. bodyPath replaces the outline with your own SVG path, and accessory draws react-native-svg elements with the body.
seed picks a whole look from any string or number, such as a user id. Props you pass win over the seed. mascotLook(seed) returns that look, so you can store it or tweak it.
The mascot is one image. Screen readers hear "Assistant" and the state, such as "Assistant, thinking". Pass ariaLabel to name it after your product. With reduce motion turned on in the device settings, it holds still and keeps its expressions.
- There is no pointer on a phone, so lookAt="pointer", the web default, looks ahead. Pass { x, y } from -1 to 1 to make it look somewhere.
- source, an audio element or stream on the web, is not available. Pass level from your audio library instead.
- accessory takes react-native-svg elements, such as Circle and Path, not DOM <svg> elements.
- The animations are computed in JavaScript each frame and drawn with react-native-svg, so keep the number of mascots on one screen small.