React Native Animated Character Introduction

A friendly character introduces itself line by line, changes expression while speaking, and settles into a ready-to-chat screen.

How it works

1. The layout measures its own container with onLayout; the face, text, controls, and chat composer all scale from that width and height.
2. A small JavaScript interval reveals Unicode characters with Array.from, so emoji stay intact. A second interval crossfades the smile and an open mouth only while text is being typed.
3. Four expression layers share the same View-built facial geometry. Reanimated fades and scales those layers over 220 ms whenever the script changes expression.
4. Reanimated shared values drive the face entrance, its move into the chat layout, the staggered copy, and two slow background blobs without rerendering React on every frame.
5. The forwarded ref owns replay and skip behavior, while every timer and interval is tracked and cleared when a run is replaced or the component unmounts.

Install

npx expo install expo-linear-gradient react-native-reanimated

Usage

import CompanionIntro from './CompanionIntro';

export function WelcomeScreen() {
  return <CompanionIntro />;
}

Customize the character, script, timing, and callbacks:

import { useRef } from 'react';
import CompanionIntro, {
  type CompanionIntroRef,
} from './CompanionIntro';

export function WelcomeScreen() {
  const introRef = useRef<CompanionIntroRef>(null);

  return (
    <CompanionIntro
      ref={introRef}
      script={[
        { text: 'Good morning!', expression: 'sparkle', holdMs: 700 },
        { text: 'Ready when you are.', expression: 'happy' },
      ]}
      typingSpeed={16}
      title="Start a conversation"
      faceColor="#C8EBD9"
      accentColor="#426FF5"
      onFacePress={() => showBreathingExercise()}
      onSend={(message) => sendMessage(message)}
    />
  );
}

The forwarded ref exposes replay() and skip().

Props

Compatibility

• Expo SDK 57
• React Native 0.86
• Reanimated 4.5
• iOS: supported, not yet verified on a device
• Android: supported, not yet verified on a device
• Web: supported, not yet verified in a browser
• Works in Expo Go because its native dependencies are included in the SDK

Accessibility

The face is exposed as a labeled button, and each changing phrase uses a polite live region. The sound, send, and voice controls have explicit button labels. With reduced motion enabled, lines appear whole instead of typing, ambient breathing and press bounces stop, and transitions use short fades.