@oxy.so/bloom 6.0.0 → 6.2.0

package/src/cover-header/CoverHeader.tsx

@@ -0,0 +1,75 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { CoverImage } from './CoverImage';
+import type { CoverHeaderProps } from './types';
+
+const DEFAULT_POSITION = { x: 0.5, y: 0.5 };
+
+/**
+ * A cover band with content rising into its bottom edge — a profile's banner
+ * and the avatar that overlaps it.
+ *
+ *   cover     absolute over the top `coverHeight`, clipped, background-tertiary
+ *             under the photo; the FIRST child
+ *   content   in flow, `paddingTop: coverHeight - overlap`; the LAST child
+ *
+ * The overlap is made by layout, not by moving anything: the band is taken out
+ * of flow and the content starts `overlap` short of its bottom edge. No
+ * negative margin, no transform, no zIndex. The content is the later sibling,
+ * so it paints over the band on iOS, Android and web alike, and the measured
+ * height is the real one — a list header or a sticky section after it starts
+ * exactly where the content ends.
+ */
+function CoverHeaderComponent({
+  coverSource,
+  coverPosition = DEFAULT_POSITION,
+  cover,
+  coverHeight = 170,
+  overlap = 45,
+  coverStyle,
+  contentStyle,
+  children,
+  style,
+  testID,
+}: CoverHeaderProps) {
+  const theme = useTheme();
+  const rise = Math.min(Math.max(overlap, 0), coverHeight);
+
+  return (
+    <View testID={testID} style={[{ position: 'relative', width: '100%' }, style]}>
+      <View
+        testID={testID ? `${testID}-cover` : undefined}
+        style={[
+          {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: coverHeight,
+            overflow: 'hidden',
+            backgroundColor: theme.colors.backgroundTertiary,
+          },
+          coverStyle,
+        ]}>
+        {cover ??
+          (coverSource ? (
+            <CoverImage
+              source={coverSource}
+              position={coverPosition}
+              testID={testID ? `${testID}-cover-image` : undefined}
+            />
+          ) : null)}
+      </View>
+      <View
+        testID={testID ? `${testID}-content` : undefined}
+        style={[{ position: 'relative', width: '100%' }, contentStyle, { paddingTop: coverHeight - rise }]}>
+        {children}
+      </View>
+    </View>
+  );
+}
+
+export const CoverHeader = memo(CoverHeaderComponent);
+CoverHeader.displayName = 'CoverHeader';

package/src/cover-header/CoverImage.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Image,
+  StyleSheet,
+  View,
+  type ImageLoadEventData,
+  type ImageSourcePropType,
+  type LayoutChangeEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+
+/** `object-fit: cover` with an `object-position`: the image sized to cover the box, offset by the fractions. */
+export function CoverImage({
+  source,
+  position,
+  testID,
+}: {
+  source: string | ImageSourcePropType;
+  position: { x: number; y: number };
+  testID?: string;
+}) {
+  const [box, setBox] = useState<{ width: number; height: number } | null>(null);
+  const [natural, setNatural] = useState<{ width: number; height: number } | null>(null);
+  const resolved: ImageSourcePropType = typeof source === 'string' ? { uri: source } : source;
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setBox((prev) => (prev && prev.width === width && prev.height === height ? prev : { width, height }));
+  }, []);
+  const onLoad = useCallback((event: NativeSyntheticEvent<ImageLoadEventData>) => {
+    const s = event.nativeEvent?.source;
+    if (s && s.width > 0 && s.height > 0) setNatural({ width: s.width, height: s.height });
+  }, []);
+
+  const frame = useMemo(() => {
+    if (!box || !natural) return null;
+    const scale = Math.max(box.width / natural.width, box.height / natural.height);
+    const width = natural.width * scale;
+    const height = natural.height * scale;
+    return { width, height, left: (box.width - width) * position.x, top: (box.height - height) * position.y };
+  }, [box, natural, position.x, position.y]);
+
+  return (
+    <View style={StyleSheet.absoluteFill} onLayout={onLayout} testID={testID ? `${testID}-frame` : undefined}>
+      <Image
+        testID={testID}
+        source={resolved}
+        onLoad={onLoad}
+        accessibilityIgnoresInvertColors
+        aria-hidden
+        resizeMode="cover"
+        style={
+          frame
+            ? { position: 'absolute', left: frame.left, top: frame.top, width: frame.width, height: frame.height }
+            : StyleSheet.absoluteFill
+        }
+      />
+    </View>
+  );
+}

package/src/cover-header/index.ts

@@ -0,0 +1,3 @@
+export { CoverHeader } from './CoverHeader';
+
+export type { CoverHeaderProps } from './types';

package/src/cover-header/types.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+
+export interface CoverHeaderProps {
+  /** Photo across the cover band. Without one the band shows `background-tertiary`. */
+  coverSource?: string | ImageSourcePropType | null;
+  /**
+   * Where the photo's crop sits, as fractions (`object-position`). Default
+   * `{ x: 0.5, y: 0.5 }` — centred, as `resizeMode="cover"`.
+   */
+  coverPosition?: { x: number; y: number };
+  /** Drawn in the band instead of the photo (an editor, a gradient, a video poster). */
+  cover?: ReactNode;
+  /** Height of the cover band. Default `170`. */
+  coverHeight?: number;
+  /**
+   * How far the content rises into the cover band. Default `45` — half a 90px
+   * avatar. Clamped to `0..coverHeight`.
+   */
+  overlap?: number;
+  /** The band's own style: corner radii, a different fill. */
+  coverStyle?: StyleProp<ViewStyle>;
+  /** The content column's style. Its `paddingTop` is the component's and is ignored. */
+  contentStyle?: StyleProp<ViewStyle>;
+  /** The content: the avatar row first, then whatever follows it. */
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  /** Also names the parts: `-cover`, `-cover-image`, `-content`. */
+  testID?: string;
+}

package/src/index.ts

@@ -198,6 +198,7 @@ export * from './calendar';
 export * from './stat-cards';
 export * from './recent-hires-card';
 export * from './ai-profile-card';
+export * from './cover-header';
 export * from './important-alerts-card';
 export * from './patient-info-card';
 export * from './sidebar';
@@ -595,6 +596,8 @@ export type {
   VoiceMessageProps,
   VoicePlaybackRate,
 } from './message-media';
+export { Sticker, provideLottiePlayer, resetLottiePlayer } from './sticker';
+export type { LottiePlayerProps, StickerProps } from './sticker';
 export {
   BUBBLE_RADIUS,
   BUBBLE_TAIL_RADIUS,

package/src/index.web.ts

@@ -203,6 +203,7 @@ export * from './calendar';
 export * from './stat-cards';
 export * from './recent-hires-card';
 export * from './ai-profile-card';
+export * from './cover-header';
 export * from './important-alerts-card';
 export * from './patient-info-card';
 export * from './sidebar';
@@ -600,6 +601,8 @@ export type {
   VoiceMessageProps,
   VoicePlaybackRate,
 } from './message-media';
+export { Sticker, provideLottiePlayer, resetLottiePlayer } from './sticker/index.web';
+export type { LottiePlayerProps, StickerProps } from './sticker/index.web';
 export {
   BUBBLE_RADIUS,
   BUBBLE_TAIL_RADIUS,

package/src/locale/translations/ar.ts

@@ -176,6 +176,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'المرفقات',
   removeAttachment: (name) => `إزالة ${name}`,
   suggestions: { mention: 'الأشخاص', command: 'الأوامر', emoji: 'رموز تعبيرية' },
+  suggestionVerified: 'موثّق',
+  searchingSuggestions: 'جارٍ البحث…',
+  noSuggestions: { mention: 'لم يتم العثور على أشخاص', command: 'لم يتم العثور على أوامر', emoji: 'لم يتم العثور على رموز تعبيرية' },
   attachmentItems: { gallery: 'المعرض', camera: 'الكاميرا', file: 'ملف', location: 'الموقع', contact: 'جهة اتصال', poll: 'استطلاع', music: 'موسيقى' },
 };
 

package/src/locale/translations/bn.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'সংযুক্তি',
   removeAttachment: (name) => `${name} সরান`,
   suggestions: { mention: 'লোকজন', command: 'কমান্ড', emoji: 'ইমোজি' },
+  suggestionVerified: 'যাচাইকৃত',
+  searchingSuggestions: 'খোঁজা হচ্ছে…',
+  noSuggestions: { mention: 'কাউকে পাওয়া যায়নি', command: 'কোনো কমান্ড পাওয়া যায়নি', emoji: 'কোনো ইমোজি পাওয়া যায়নি' },
   attachmentItems: { gallery: 'গ্যালারি', camera: 'ক্যামেরা', file: 'ফাইল', location: 'অবস্থান', contact: 'পরিচিতি', poll: 'পোল', music: 'সংগীত' },
 };
 

package/src/locale/translations/ca.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Fitxers adjunts',
   removeAttachment: (name) => `Treu ${name}`,
   suggestions: { mention: 'Persones', command: 'Ordres', emoji: 'Emoji' },
+  suggestionVerified: 'Verificat',
+  searchingSuggestions: 'Cercant…',
+  noSuggestions: { mention: "No s'ha trobat ningú", command: "No s'han trobat ordres", emoji: "No s'han trobat emojis" },
   attachmentItems: { gallery: 'Galeria', camera: 'Càmera', file: 'Fitxer', location: 'Ubicació', contact: 'Contacte', poll: 'Enquesta', music: 'Música' },
 };
 

package/src/locale/translations/de.ts

@@ -160,6 +160,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Anhänge',
   removeAttachment: (name) => `${name} entfernen`,
   suggestions: { mention: 'Personen', command: 'Befehle', emoji: 'Emoji' },
+  suggestionVerified: 'Verifiziert',
+  searchingSuggestions: 'Suche läuft…',
+  noSuggestions: { mention: 'Keine Personen gefunden', command: 'Keine Befehle gefunden', emoji: 'Keine Emojis gefunden' },
   attachmentItems: { gallery: 'Galerie', camera: 'Kamera', file: 'Datei', location: 'Standort', contact: 'Kontakt', poll: 'Umfrage', music: 'Musik' },
 };
 

package/src/locale/translations/es.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Archivos adjuntos',
   removeAttachment: (name) => `Quitar ${name}`,
   suggestions: { mention: 'Personas', command: 'Comandos', emoji: 'Emoji' },
+  suggestionVerified: 'Verificado',
+  searchingSuggestions: 'Buscando…',
+  noSuggestions: { mention: 'No se encontraron personas', command: 'No se encontraron comandos', emoji: 'No se encontraron emojis' },
   attachmentItems: { gallery: 'Galería', camera: 'Cámara', file: 'Archivo', location: 'Ubicación', contact: 'Contacto', poll: 'Encuesta', music: 'Música' },
 };
 

package/src/locale/translations/fr.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Pièces jointes',
   removeAttachment: (name) => `Retirer ${name}`,
   suggestions: { mention: 'Personnes', command: 'Commandes', emoji: 'Émoji' },
+  suggestionVerified: 'Vérifié',
+  searchingSuggestions: 'Recherche…',
+  noSuggestions: { mention: 'Aucune personne trouvée', command: 'Aucune commande trouvée', emoji: 'Aucun émoji trouvé' },
   attachmentItems: { gallery: 'Galerie', camera: 'Appareil photo', file: 'Fichier', location: 'Position', contact: 'Contact', poll: 'Sondage', music: 'Musique' },
 };
 

package/src/locale/translations/hi.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'अटैचमेंट',
   removeAttachment: (name) => `${name} हटाएं`,
   suggestions: { mention: 'लोग', command: 'कमांड', emoji: 'इमोजी' },
+  suggestionVerified: 'सत्यापित',
+  searchingSuggestions: 'खोज रहे हैं…',
+  noSuggestions: { mention: 'कोई व्यक्ति नहीं मिला', command: 'कोई कमांड नहीं मिला', emoji: 'कोई इमोजी नहीं मिला' },
   attachmentItems: { gallery: 'गैलरी', camera: 'कैमरा', file: 'फ़ाइल', location: 'लोकेशन', contact: 'संपर्क', poll: 'पोल', music: 'संगीत' },
 };
 

package/src/locale/translations/id.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Lampiran',
   removeAttachment: (name) => `Hapus ${name}`,
   suggestions: { mention: 'Orang', command: 'Perintah', emoji: 'Emoji' },
+  suggestionVerified: 'Terverifikasi',
+  searchingSuggestions: 'Mencari…',
+  noSuggestions: { mention: 'Orang tidak ditemukan', command: 'Perintah tidak ditemukan', emoji: 'Emoji tidak ditemukan' },
   attachmentItems: { gallery: 'Galeri', camera: 'Kamera', file: 'File', location: 'Lokasi', contact: 'Kontak', poll: 'Polling', music: 'Musik' },
 };
 

package/src/locale/translations/it.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Allegati',
   removeAttachment: (name) => `Rimuovi ${name}`,
   suggestions: { mention: 'Persone', command: 'Comandi', emoji: 'Emoji' },
+  suggestionVerified: 'Verificato',
+  searchingSuggestions: 'Ricerca in corso…',
+  noSuggestions: { mention: 'Nessuna persona trovata', command: 'Nessun comando trovato', emoji: 'Nessuna emoji trovata' },
   attachmentItems: { gallery: 'Galleria', camera: 'Fotocamera', file: 'File', location: 'Posizione', contact: 'Contatto', poll: 'Sondaggio', music: 'Musica' },
 };
 

package/src/locale/translations/ja.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: '添付ファイル',
   removeAttachment: (name) => `${name}を削除`,
   suggestions: { mention: 'ユーザー', command: 'コマンド', emoji: '絵文字' },
+  suggestionVerified: '認証済み',
+  searchingSuggestions: '検索中…',
+  noSuggestions: { mention: 'ユーザーが見つかりません', command: 'コマンドが見つかりません', emoji: '絵文字が見つかりません' },
   attachmentItems: { gallery: 'ギャラリー', camera: 'カメラ', file: 'ファイル', location: '位置情報', contact: '連絡先', poll: 'アンケート', music: '音楽' },
 };
 

package/src/locale/translations/pt.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Anexos',
   removeAttachment: (name) => `Remover ${name}`,
   suggestions: { mention: 'Pessoas', command: 'Comandos', emoji: 'Emoji' },
+  suggestionVerified: 'Verificado',
+  searchingSuggestions: 'Pesquisando…',
+  noSuggestions: { mention: 'Nenhuma pessoa encontrada', command: 'Nenhum comando encontrado', emoji: 'Nenhum emoji encontrado' },
   attachmentItems: { gallery: 'Galeria', camera: 'Câmera', file: 'Arquivo', location: 'Localização', contact: 'Contato', poll: 'Enquete', music: 'Música' },
 };
 

package/src/locale/translations/ru.ts

@@ -163,6 +163,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Вложения',
   removeAttachment: (name) => `Удалить ${name}`,
   suggestions: { mention: 'Люди', command: 'Команды', emoji: 'Эмодзи' },
+  suggestionVerified: 'Подтверждён',
+  searchingSuggestions: 'Поиск…',
+  noSuggestions: { mention: 'Никого не найдено', command: 'Команды не найдены', emoji: 'Эмодзи не найдены' },
   attachmentItems: { gallery: 'Галерея', camera: 'Камера', file: 'Файл', location: 'Геопозиция', contact: 'Контакт', poll: 'Опрос', music: 'Музыка' },
 };
 

package/src/locale/translations/tr.ts

@@ -159,6 +159,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Ekler',
   removeAttachment: (name) => `Kaldır: ${name}`,
   suggestions: { mention: 'Kişiler', command: 'Komutlar', emoji: 'Emoji' },
+  suggestionVerified: 'Doğrulanmış',
+  searchingSuggestions: 'Aranıyor…',
+  noSuggestions: { mention: 'Kişi bulunamadı', command: 'Komut bulunamadı', emoji: 'Emoji bulunamadı' },
   attachmentItems: { gallery: 'Galeri', camera: 'Kamera', file: 'Dosya', location: 'Konum', contact: 'Kişi', poll: 'Anket', music: 'Müzik' },
 };
 

package/src/locale/translations/zh.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: '附件',
   removeAttachment: (name) => `移除 ${name}`,
   suggestions: { mention: '用户', command: '命令', emoji: '表情' },
+  suggestionVerified: '已认证',
+  searchingSuggestions: '正在搜索…',
+  noSuggestions: { mention: '未找到用户', command: '未找到命令', emoji: '未找到表情' },
   attachmentItems: { gallery: '相册', camera: '相机', file: '文件', location: '位置', contact: '联系人', poll: '投票', music: '音乐' },
 };
 

package/src/message-media/StickerMessage.tsx

@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
 import { useMessages } from '../locale/messages';
+import { Sticker } from '../sticker/Sticker';
 import { useTheme } from '../theme/use-theme';
 import { MESSAGE_MEDIA_MESSAGES } from './messages';
 import { MediaFailure, MediaImage, MediaOverlay, MediaPressable, MediaProgressRing } from './parts';
@@ -12,7 +13,8 @@ import type { StickerMessageProps } from './types';
 const TRANSPARENT = 'transparent';
 
 /**
- * A sticker: a transparent image and nothing else.
+ * A sticker: a transparent image and nothing else — or, given `animation`, a
+ * Lottie animation drawn by `Sticker` over that same image.
  *
  * IT DRAWS NO SURFACE AT ALL — no background, no radius, no padding — because a
  * sticker with a bubble behind it is a picture of a sticker. The shell renders it
@@ -30,6 +32,7 @@ const TRANSPARENT = 'transparent';
  */
 function StickerMessageComponent({
   source,
+  animation,
   sourceVariant,
   size = 128,
   accessibilityLabel: accessibilityLabelProp,
@@ -61,13 +64,23 @@ function StickerMessageComponent({
         ariaBusy={sending}
         testID={testID ? `${testID}-frame` : undefined}
       >
-        <MediaImage
-          source={source}
-          sourceVariant={sourceVariant}
-          placeholder={TRANSPARENT}
-          resizeMode="contain"
-          testID={testID ? `${testID}-image` : undefined}
-        />
+        {animation ? (
+          <Sticker
+            animation={animation}
+            fallback={source}
+            size={size}
+            decorative
+            testID={testID ? `${testID}-sticker` : undefined}
+          />
+        ) : (
+          <MediaImage
+            source={source}
+            sourceVariant={sourceVariant}
+            placeholder={TRANSPARENT}
+            resizeMode="contain"
+            testID={testID ? `${testID}-image` : undefined}
+          />
+        )}
         {sending ? (
           <MediaOverlay>
             <MediaProgressRing

package/src/message-media/types.ts

@@ -400,7 +400,10 @@ export interface PollMessageProps extends MessageMediaToneProps {
 // ---------------------------------------------------------------------------
 
 export interface StickerMessageProps extends MessageMediaToneProps {
+  /** The still image. With `animation`, it is what shows until (or unless) the animation plays. */
   source: MessageMediaSource;
+  /** URL of the sticker's Lottie animation. Omit it for a still sticker. */
+  animation?: string;
   sourceVariant?: string;
   /** Square edge. Default 128. */
   size?: number;

package/src/sticker/Sticker.tsx

@@ -0,0 +1,5 @@
+import { createSticker } from './create-sticker';
+import { loadLottiePlayer, warnLottieUnavailable } from './lottie-module';
+
+/** A sticker, animated with `lottie-react-native` when it is installed. */
+export const Sticker = createSticker({ loadLottiePlayer, warnLottieUnavailable });

package/src/sticker/Sticker.web.tsx

@@ -0,0 +1,5 @@
+import { createSticker } from './create-sticker';
+import { loadLottiePlayer, warnLottieUnavailable } from './lottie-module.web';
+
+/** A sticker, animated with `@lottiefiles/dotlottie-react` when it is installed. */
+export const Sticker = createSticker({ loadLottiePlayer, warnLottieUnavailable });

package/src/sticker/create-sticker.tsx

@@ -0,0 +1,129 @@
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { useReducedMotion } from 'react-native-reanimated';
+
+import { useMessages } from '../locale/messages';
+import { MESSAGE_MEDIA_MESSAGES } from '../message-media/messages';
+import { MediaImage } from '../message-media/parts';
+import type { ComponentType } from 'react';
+import type { LottiePlayerProps, StickerProps } from './types';
+
+export interface StickerPlatform {
+  /** The platform's Lottie player, or `null` when its optional peer is missing. */
+  loadLottiePlayer(): ComponentType<LottiePlayerProps> | null;
+  warnLottieUnavailable(): void;
+}
+
+/** A sticker's transparent parts must stay transparent: no placeholder colour. */
+const TRANSPARENT = 'transparent';
+
+/**
+ * A sticker, animated when it can be and still when it cannot.
+ *
+ * The still `fallback` is ALWAYS drawn first and stays until the animation
+ * reports it has loaded, so a sticker never flashes blank while its Lottie file
+ * arrives — and when the animation cannot play at all (no player installed on
+ * this platform, a failed load, a person who asked for reduced motion) the still
+ * is simply what remains. Every one of those outcomes looks like a sticker.
+ *
+ * Draws no surface: no background, no radius, no padding. A sticker with a
+ * bubble behind it is a picture of a sticker. `StickerMessage` is this plus the
+ * chat affordances (press, sending, failed).
+ */
+export function createSticker({
+  loadLottiePlayer,
+  warnLottieUnavailable,
+}: StickerPlatform) {
+  function StickerComponent({
+    animation,
+    fallback,
+    size = 128,
+    loop = true,
+    paused = false,
+    accessibilityLabel: accessibilityLabelProp,
+    decorative = false,
+    style,
+    testID,
+  }: StickerProps) {
+    const { messages } = useMessages(MESSAGE_MEDIA_MESSAGES);
+    const reducedMotion = useReducedMotion();
+    const [loaded, setLoaded] = useState(false);
+    const [failed, setFailed] = useState(false);
+
+    // A new animation starts from its still again.
+    useEffect(() => {
+      setLoaded(false);
+      setFailed(false);
+    }, [animation]);
+
+    const Player =
+      animation && !reducedMotion && !failed ? loadLottiePlayer() : null;
+    useEffect(() => {
+      if (animation && !reducedMotion && !Player) warnLottieUnavailable();
+    }, [animation, reducedMotion, Player]);
+
+    const onLoad = useCallback(() => setLoaded(true), []);
+    const onError = useCallback(() => setFailed(true), []);
+
+    const showStill = !Player || !loaded;
+
+    return (
+      <View
+        accessible={!decorative}
+        accessibilityRole={decorative ? undefined : 'image'}
+        accessibilityLabel={decorative ? undefined : accessibilityLabelProp ?? messages.sticker}
+        aria-hidden={decorative}
+        style={[
+          { width: size, height: size, position: 'relative' },
+          style ?? null,
+        ]}
+        testID={testID}
+      >
+        {showStill ? (
+          <View
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: size,
+              height: size,
+            }}
+          >
+            <MediaImage
+              source={fallback}
+              placeholder={TRANSPARENT}
+              resizeMode='contain'
+              testID={testID ? `${testID}-still` : undefined}
+            />
+          </View>
+        ) : null}
+        {Player && animation ? (
+          <View
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: size,
+              height: size,
+              opacity: loaded ? 1 : 0,
+            }}
+            testID={testID ? `${testID}-animation` : undefined}
+          >
+            <Player
+              uri={animation}
+              loop={loop}
+              paused={paused}
+              onLoad={onLoad}
+              onError={onError}
+              style={{ width: size, height: size }}
+            />
+          </View>
+        ) : null}
+      </View>
+    );
+  }
+
+  const Sticker = memo(StickerComponent);
+  Sticker.displayName = 'Sticker';
+  return Sticker;
+}

package/src/sticker/index.ts

@@ -0,0 +1,3 @@
+export { Sticker } from './Sticker';
+export { provideLottiePlayer, resetLottiePlayer } from './lottie-module';
+export type { LottiePlayerProps, StickerProps } from './types';

package/src/sticker/index.web.ts

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/sticker/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
+export { Sticker } from './Sticker.web';
+export { provideLottiePlayer, resetLottiePlayer } from './lottie-module.web';
+export type { LottiePlayerProps, StickerProps } from './types';