react-native-bot-avatars

Animated bot avatars for React Native. There are 18 glossy 3D shapes, and each has a face that looks around, blinks, hops while it works and dozes off when it sleeps. Works on iOS, Android and web.

• One peer dependency: react-native-svg (included in Expo Go).
• Runs on the UI thread: motion only animates transforms and opacity with the native driver, so a busy JS thread won't make it stutter.
• Respects Reduce Motion: the avatar holds a static pose when the OS setting is on.

Install

npx expo install react-native-bot-avatars react-native-svg

Without Expo:

npm install react-native-bot-avatars react-native-svg
cd ios && pod install

Usage

import { BotAvatar } from 'react-native-bot-avatars';

<BotAvatar type="clover" state="working" size={64} />

| Prop | Type | Default | | --- | --- | --- | | type | clover flower star ghost mech circle hexagon square triangle blob drop droid alien cat cloud pill pebble puddle | clover | | state | idle working sleeping | idle | | size | number (dp) | 64 | | color | hex string | per shape | | brightness | 0.5–1.5 | 1 | | saturation | 0–2 | 1 | | ink | eye color | #1b1d2a | | speed | multiplier | 1 | | shading | plastic crisp smooth flat | plastic | | shadow | 0–1 | 0.35 | | depth | 0–1 | 0.65 | | paused | boolean | false | | style | ViewStyle | | | accessibilityLabel | string | "<type> bot, <state>" |

BOT_TYPES lists every shape name, which is handy for pickers.

Development

The library source is in src/. The Expo playground in example/ imports it by package name, and Metro resolves that to src/, so edits show up live.

npm install
npm --prefix example install
npm run example        # start the playground
npm run typecheck
npm run prepare        # build lib/ with react-native-builder-bob

To re-record media/demo.gif, start the example in showcase mode, which shows every bot on one screen:

cd example && EXPO_PUBLIC_SHOWCASE=1 npx expo start --ios

Publishing

npm login
npm publish

prepare builds lib/ automatically before the package is packed.

License

MIT