@kesha-antonov/react-native-chat 5.0.0 → 6.0.0

package/lib/components/BubbleBackground.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
+/**
+ * The bubble tail, drawn in a
+ * box whose origin is one point inside the body's bottom corner: the body's edge runs down to
+ * 11pt above its bottom, a concave arc (an ellipse 13 wide and 20 tall, 6dp `smallRad`) curls
+ * out to the tip 5.4pt beyond the body, and the bottom edge runs straight back. The first
+ * column overlaps the body so no seam shows between the two.
+ */
+export declare const TAIL_WIDTH = 6;
+/** What a bubble needs to show its slice of a gradient fixed to the message list. */
+export interface BubbleGradientStore {
+    /** The list's scroll offset, live: the bubbles' gradient and tails follow it every frame. */
+    scrolledY: SharedValue<number>;
+    listHeight: SharedValue<number>;
+    /**
+     * One row's place in list content coordinates, by message id; undefined until the list has
+     * placed it. One shared value per message, so a row that moves re-runs its own bubble's
+     * worklets and no other's.
+     */
+    cellLayout: (messageId: string) => SharedValue<{
+        y: number;
+        height: number;
+    } | undefined>;
+    isInverted: boolean;
+}
+export declare const BubbleGradientContext: React.Context<BubbleGradientStore | null>;
+interface TailProps {
+    /** The side of the screen the tail points to. */
+    side: 'left' | 'right';
+    color: string;
+    shadowColor?: string;
+    /** Overrides `color` from the UI thread (a bubble sliding through a screen-fixed gradient). */
+    animatedColor?: SharedValue<string>;
+}
+/** The curled tail at the bottom corner of the last bubble in a run. */
+export declare const BubbleTail: (props: TailProps) => React.JSX.Element;
+/** A CSS gradient, top to bottom, with the stops spread evenly. */
+export declare const linearGradientStyle: (stops: string[]) => ViewStyle;
+interface GradientBackgroundProps {
+    stops: string[];
+    mode: 'screen' | 'bubble';
+    messageId: string | number;
+    /** Space under the bubble inside its list cell (the gap to the next row). */
+    bottomGap: number;
+    /** The body's corner radii, so the fill is clipped like the bubble. */
+    cornerStyle: StyleProp<ViewStyle>;
+    /** Draw the tail on this side, sampling the gradient at the bubble's bottom. */
+    tailSide?: 'left' | 'right';
+}
+/** The gradient behind an outgoing bubble: screen-fixed inside a chat list, else per bubble. */
+export declare const GradientBubbleBackground: (props: GradientBackgroundProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=BubbleBackground.d.ts.map

package/lib/components/BubbleBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleBackground.d.ts","sourceRoot":"","sources":["../../src/components/BubbleBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AACrE,OAAiB,EAEf,WAAW,EAIZ,MAAM,yBAAyB,CAAA;AAShC;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,IAAI,CAAA;AAO3B,qFAAqF;AACrF,MAAM,WAAW,mBAAmB;IAClC,6FAA6F;IAC7F,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC/B;;;;OAIG;IACH,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,WAAW,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAA;IACzF,UAAU,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,qBAAqB,2CAAkD,CAAA;AAEpF,UAAU,SAAS;IACjB,iDAAiD;IACjD,IAAI,EAAE,MAAM,GAAG,OAAO,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+FAA+F;IAC/F,aAAa,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CACpC;AA2CD,wEAAwE;AACxE,eAAO,MAAM,UAAU,GAAI,OAAO,SAAS,sBAY1C,CAAA;AA2BD,mEAAmE;AACnE,eAAO,MAAM,mBAAmB,GAAI,OAAO,MAAM,EAAE,KAAG,SAIrD,CAAA;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAA;IACzB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,6EAA6E;IAC7E,SAAS,EAAE,MAAM,CAAA;IACjB,uEAAuE;IACvE,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACjC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC5B;AAkED,gGAAgG;AAChG,eAAO,MAAM,wBAAwB,GAAI,OAAO,uBAAuB,sBAetE,CAAA"}

package/lib/components/BubbleBackground.js

@@ -0,0 +1,513 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { createContext, useContext, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { interpolateColor, useAnimatedProps, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
+import { getSvg } from '../optional';
+const svg = getSvg();
+const Svg = svg ? svg.default ?? svg.Svg : null;
+const Path = svg?.Path;
+const AnimatedPath = Path ? Animated.createAnimatedComponent(Path) : null;
+
+/**
+ * The bubble tail, drawn in a
+ * box whose origin is one point inside the body's bottom corner: the body's edge runs down to
+ * 11pt above its bottom, a concave arc (an ellipse 13 wide and 20 tall, 6dp `smallRad`) curls
+ * out to the tip 5.4pt beyond the body, and the bottom edge runs straight back. The first
+ * column overlaps the body so no seam shows between the two.
+ */
+export const TAIL_WIDTH = 6;
+const TAIL_BOX_WIDTH = TAIL_WIDTH + 1;
+const TAIL_HEIGHT = 11;
+const TAIL_PATH = 'M0 0 L1 0 A6.5 10 0 0 0 6.708 9.925 L6.4 11 L0 11 Z';
+// The 1px drop under the bubble continues under the tail.
+const TAIL_SHADOW_PATH = 'M0 1 L1 1 A6.5 10 0 0 0 6.708 10.925 L6.4 12 L0 12 Z';
+
+/** What a bubble needs to show its slice of a gradient fixed to the message list. */
+
+export const BubbleGradientContext = createContext(null);
+const mirrorStyle = {
+  transform: [{
+    scaleX: -1
+  }]
+};
+const SvgTail = t0 => {
+  const $ = _c(15);
+  const {
+    side,
+    color,
+    shadowColor,
+    animatedColor
+  } = t0;
+  const animatedProps = useAnimatedProps(() => ({
+    fill: animatedColor ? animatedColor.value : color
+  }));
+  const t1 = side === "right" ? styles.tailRight : styles.tailLeft;
+  const t2 = side === "left" && mirrorStyle;
+  let t3;
+  if ($[0] !== t1 || $[1] !== t2) {
+    t3 = [styles.tail, t1, t2];
+    $[0] = t1;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== shadowColor) {
+    t4 = !!shadowColor && shadowColor !== "transparent" && <Path d={TAIL_SHADOW_PATH} fill={shadowColor} />;
+    $[3] = shadowColor;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== animatedColor || $[6] !== animatedProps || $[7] !== color) {
+    t5 = animatedColor ? <AnimatedPath d={TAIL_PATH} animatedProps={animatedProps} /> : <Path d={TAIL_PATH} fill={color} />;
+    $[5] = animatedColor;
+    $[6] = animatedProps;
+    $[7] = color;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== t4 || $[10] !== t5) {
+    t6 = <Svg width={TAIL_BOX_WIDTH} height={TAIL_HEIGHT + 1} viewBox={`0 0 ${TAIL_BOX_WIDTH} ${TAIL_HEIGHT + 1}`}>{t4}{t5}</Svg>;
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] !== t3 || $[13] !== t6) {
+    t7 = <View pointerEvents="none" style={t3}>{t6}</View>;
+    $[12] = t3;
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  return t7;
+};
+
+// Without react-native-svg the curl becomes a straight-edged wedge drawn with borders.
+const ViewTail = t0 => {
+  const $ = _c(8);
+  const {
+    side,
+    color,
+    animatedColor
+  } = t0;
+  const colorStyle = useAnimatedStyle(() => {
+    const value = animatedColor ? animatedColor.value : color;
+    return side === "right" ? {
+      borderLeftColor: value
+    } : {
+      borderRightColor: value
+    };
+  });
+  const t1 = side === "right" ? styles.tailRight : styles.tailLeft;
+  const t2 = side === "right" ? styles.wedgeRight : styles.wedgeLeft;
+  let t3;
+  if ($[0] !== color || $[1] !== side) {
+    t3 = side === "right" ? {
+      borderLeftColor: color
+    } : {
+      borderRightColor: color
+    };
+    $[0] = color;
+    $[1] = side;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const t4 = animatedColor && colorStyle;
+  let t5;
+  if ($[3] !== t1 || $[4] !== t2 || $[5] !== t3 || $[6] !== t4) {
+    t5 = <Animated.View pointerEvents="none" style={[styles.tail, t1, t2, t3, t4]} />;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
+};
+
+/** The curled tail at the bottom corner of the last bubble in a run. */
+export const BubbleTail = props => {
+  const $ = _c(8);
+  if (Svg && Path) {
+    if (props.animatedColor) {
+      let t0;
+      if ($[0] !== props) {
+        t0 = <SvgTail {...props} />;
+        $[0] = props;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+    let t0;
+    if ($[2] !== props) {
+      t0 = <StaticSvgTail {...props} />;
+      $[2] = props;
+      $[3] = t0;
+    } else {
+      t0 = $[3];
+    }
+    return t0;
+  }
+  if (props.animatedColor) {
+    let t0;
+    if ($[4] !== props) {
+      t0 = <ViewTail {...props} />;
+      $[4] = props;
+      $[5] = t0;
+    } else {
+      t0 = $[5];
+    }
+    return t0;
+  }
+  let t0;
+  if ($[6] !== props) {
+    t0 = <StaticViewTail {...props} />;
+    $[6] = props;
+    $[7] = t0;
+  } else {
+    t0 = $[7];
+  }
+  return t0;
+};
+
+// The common case carries no shared value and no worklet: most tails never change color.
+const StaticSvgTail = t0 => {
+  const $ = _c(13);
+  const {
+    side,
+    color,
+    shadowColor
+  } = t0;
+  const t1 = side === "right" ? styles.tailRight : styles.tailLeft;
+  const t2 = side === "left" && mirrorStyle;
+  let t3;
+  if ($[0] !== t1 || $[1] !== t2) {
+    t3 = [styles.tail, t1, t2];
+    $[0] = t1;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== shadowColor) {
+    t4 = !!shadowColor && shadowColor !== "transparent" && <Path d={TAIL_SHADOW_PATH} fill={shadowColor} />;
+    $[3] = shadowColor;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== color) {
+    t5 = <Path d={TAIL_PATH} fill={color} />;
+    $[5] = color;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== t4 || $[8] !== t5) {
+    t6 = <Svg width={TAIL_BOX_WIDTH} height={TAIL_HEIGHT + 1} viewBox={`0 0 ${TAIL_BOX_WIDTH} ${TAIL_HEIGHT + 1}`}>{t4}{t5}</Svg>;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t3 || $[11] !== t6) {
+    t7 = <View pointerEvents="none" style={t3}>{t6}</View>;
+    $[10] = t3;
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  return t7;
+};
+const StaticViewTail = t0 => {
+  const $ = _c(7);
+  const {
+    side,
+    color
+  } = t0;
+  const t1 = side === "right" ? styles.tailRight : styles.tailLeft;
+  const t2 = side === "right" ? styles.wedgeRight : styles.wedgeLeft;
+  let t3;
+  if ($[0] !== color || $[1] !== side) {
+    t3 = side === "right" ? {
+      borderLeftColor: color
+    } : {
+      borderRightColor: color
+    };
+    $[0] = color;
+    $[1] = side;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== t1 || $[4] !== t2 || $[5] !== t3) {
+    t4 = <View pointerEvents="none" style={[styles.tail, t1, t2, t3]} />;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  return t4;
+};
+
+/** A CSS gradient, top to bottom, with the stops spread evenly. */
+export const linearGradientStyle = stops => {
+  const last = Math.max(1, stops.length - 1);
+  const css = `linear-gradient(to bottom, ${stops.map((stop, i) => `${stop} ${Math.round(i / last * 1000) / 10}%`).join(', ')})`;
+  return {
+    backgroundImage: css,
+    experimental_backgroundImage: css
+  };
+};
+const TAIL_COLOR_STEPS = 20;
+const evenStops = count => {
+  const last = Math.max(1, count - 1);
+  return Array.from({
+    length: count
+  }, (_, i) => i / last);
+};
+
+/**
+ * The outgoing gradient: one vertical gradient spans
+ * the message list, and each bubble paints the slice behind it, so a bubble shifts from
+ * purple to blue as it scrolls and two bubbles read as one ramp. Each bubble holds a
+ * list-tall gradient and slides it by its own position, from the cell layout and the scroll
+ * offset - no measuring on the UI thread.
+ */
+const ScreenGradientBackground = t0 => {
+  const $ = _c(20);
+  const {
+    stops,
+    messageId,
+    bottomGap,
+    cornerStyle,
+    tailSide,
+    store
+  } = t0;
+  const {
+    scrolledY,
+    listHeight,
+    isInverted
+  } = store;
+  const cellLayout = store.cellLayout(String(messageId));
+  const positions = evenStops(stops.length);
+  const layerStyle = useAnimatedStyle(() => {
+    const layout = cellLayout.value;
+    const height = listHeight.value > 0 ? listHeight.value : 800;
+    const bottom = !layout ? height / 2 : isInverted ? height + scrolledY.value - layout.y - bottomGap : layout.y + layout.height - bottomGap - scrolledY.value;
+    return {
+      height,
+      transform: [{
+        translateY: height - bottom
+      }]
+    };
+  });
+  const tailColor = useDerivedValue(() => {
+    const layout_0 = cellLayout.value;
+    const height_0 = listHeight.value;
+    if (!layout_0 || height_0 <= 0) {
+      return stops[stops.length - 1];
+    }
+    const bottom_0 = isInverted ? height_0 + scrolledY.value - layout_0.y - bottomGap : layout_0.y + layout_0.height - bottomGap - scrolledY.value;
+    const fraction = Math.round(Math.min(1, Math.max(0, bottom_0 / height_0)) * TAIL_COLOR_STEPS) / TAIL_COLOR_STEPS;
+    return interpolateColor(fraction, positions, stops);
+  });
+  const t1 = stops[stops.length - 1];
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      backgroundColor: t1
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== cornerStyle || $[3] !== t2) {
+    t3 = [StyleSheet.absoluteFill, styles.clip, t2, cornerStyle];
+    $[2] = cornerStyle;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== stops) {
+    t4 = linearGradientStyle(stops);
+    $[5] = stops;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== layerStyle || $[8] !== t4) {
+    t5 = <Animated.View style={[styles.layer, t4, layerStyle]} />;
+    $[7] = layerStyle;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== t3 || $[11] !== t5) {
+    t6 = <View pointerEvents="none" style={t3}>{t5}</View>;
+    $[10] = t3;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== stops || $[14] !== tailColor || $[15] !== tailSide) {
+    t7 = tailSide && <BubbleTail side={tailSide} color={stops[stops.length - 1]} animatedColor={tailColor} />;
+    $[13] = stops;
+    $[14] = tailColor;
+    $[15] = tailSide;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  let t8;
+  if ($[17] !== t6 || $[18] !== t7) {
+    t8 = <>{t6}{t7}</>;
+    $[17] = t6;
+    $[18] = t7;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  return t8;
+};
+
+/** The gradient behind an outgoing bubble: screen-fixed inside a chat list, else per bubble. */
+export const GradientBubbleBackground = props => {
+  const $ = _c(17);
+  const store = useContext(BubbleGradientContext);
+  if (props.mode === "screen" && store) {
+    let t0;
+    if ($[0] !== props || $[1] !== store) {
+      t0 = <ScreenGradientBackground {...props} store={store} />;
+      $[0] = props;
+      $[1] = store;
+      $[2] = t0;
+    } else {
+      t0 = $[2];
+    }
+    return t0;
+  }
+  const t0 = props.stops[props.stops.length - 1];
+  let t1;
+  if ($[3] !== t0) {
+    t1 = {
+      backgroundColor: t0
+    };
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props.stops) {
+    t2 = linearGradientStyle(props.stops);
+    $[5] = props.stops;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== props.cornerStyle || $[8] !== t1 || $[9] !== t2) {
+    t3 = <View pointerEvents="none" style={[StyleSheet.absoluteFill, styles.clip, t1, t2, props.cornerStyle]} />;
+    $[7] = props.cornerStyle;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== props.stops || $[12] !== props.tailSide) {
+    t4 = props.tailSide && <BubbleTail side={props.tailSide} color={props.stops[props.stops.length - 1]} />;
+    $[11] = props.stops;
+    $[12] = props.tailSide;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[14] !== t3 || $[15] !== t4) {
+    t5 = <>{t3}{t4}</>;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  return t5;
+};
+const styles = StyleSheet.create({
+  tail: {
+    position: 'absolute',
+    bottom: 0,
+    width: TAIL_BOX_WIDTH,
+    height: TAIL_HEIGHT + 1,
+    marginBottom: -1
+  },
+  tailRight: {
+    right: -TAIL_WIDTH
+  },
+  tailLeft: {
+    left: -TAIL_WIDTH
+  },
+  wedgeRight: {
+    width: 0,
+    height: 0,
+    marginBottom: 0,
+    right: -TAIL_WIDTH,
+    borderTopWidth: TAIL_HEIGHT,
+    borderTopColor: 'transparent',
+    borderLeftWidth: TAIL_WIDTH
+  },
+  wedgeLeft: {
+    width: 0,
+    height: 0,
+    marginBottom: 0,
+    left: -TAIL_WIDTH,
+    borderTopWidth: TAIL_HEIGHT,
+    borderTopColor: 'transparent',
+    borderRightWidth: TAIL_WIDTH
+  },
+  clip: {
+    overflow: 'hidden'
+  },
+  layer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
+//# sourceMappingURL=BubbleBackground.js.map

package/lib/components/BubbleBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleBackground.js","names":["React","createContext","useContext","useMemo","StyleSheet","View","Animated","interpolateColor","useAnimatedProps","useAnimatedStyle","useDerivedValue","getSvg","svg","Svg","default","Path","AnimatedPath","createAnimatedComponent","TAIL_WIDTH","TAIL_BOX_WIDTH","TAIL_HEIGHT","TAIL_PATH","TAIL_SHADOW_PATH","BubbleGradientContext","mirrorStyle","transform","scaleX","SvgTail","t0","$","_c","side","color","shadowColor","animatedColor","animatedProps","fill","value","t1","styles","tailRight","tailLeft","t2","t3","tail","t4","t5","t6","t7","ViewTail","colorStyle","borderLeftColor","borderRightColor","wedgeRight","wedgeLeft","BubbleTail","props","StaticSvgTail","StaticViewTail","linearGradientStyle","stops","last","Math","max","length","css","map","stop","i","round","join","backgroundImage","experimental_backgroundImage","TAIL_COLOR_STEPS","evenStops","count","Array","from","_","ScreenGradientBackground","messageId","bottomGap","cornerStyle","tailSide","store","scrolledY","listHeight","isInverted","cellLayout","String","positions","layerStyle","layout","height","bottom","y","translateY","tailColor","layout_0","height_0","bottom_0","fraction","min","backgroundColor","absoluteFill","clip","layer","t8","GradientBubbleBackground","mode","create","position","width","marginBottom","right","left","borderTopWidth","borderTopColor","borderLeftWidth","borderRightWidth","overflow"],"sources":["../../src/components/BubbleBackground.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'\nimport Animated, {\n  interpolateColor,\n  SharedValue,\n  useAnimatedProps,\n  useAnimatedStyle,\n  useDerivedValue,\n} from 'react-native-reanimated'\n\nimport { getSvg } from '../optional'\n\nconst svg = getSvg()\nconst Svg: any = svg ? svg.default ?? svg.Svg : null\nconst Path: any = svg?.Path\nconst AnimatedPath: any = Path ? Animated.createAnimatedComponent(Path) : null\n\n/**\n * The bubble tail, drawn in a\n * box whose origin is one point inside the body's bottom corner: the body's edge runs down to\n * 11pt above its bottom, a concave arc (an ellipse 13 wide and 20 tall, 6dp `smallRad`) curls\n * out to the tip 5.4pt beyond the body, and the bottom edge runs straight back. The first\n * column overlaps the body so no seam shows between the two.\n */\nexport const TAIL_WIDTH = 6\nconst TAIL_BOX_WIDTH = TAIL_WIDTH + 1\nconst TAIL_HEIGHT = 11\nconst TAIL_PATH = 'M0 0 L1 0 A6.5 10 0 0 0 6.708 9.925 L6.4 11 L0 11 Z'\n// The 1px drop under the bubble continues under the tail.\nconst TAIL_SHADOW_PATH = 'M0 1 L1 1 A6.5 10 0 0 0 6.708 10.925 L6.4 12 L0 12 Z'\n\n/** What a bubble needs to show its slice of a gradient fixed to the message list. */\nexport interface BubbleGradientStore {\n  /** The list's scroll offset, live: the bubbles' gradient and tails follow it every frame. */\n  scrolledY: SharedValue<number>\n  listHeight: SharedValue<number>\n  /**\n   * One row's place in list content coordinates, by message id; undefined until the list has\n   * placed it. One shared value per message, so a row that moves re-runs its own bubble's\n   * worklets and no other's.\n   */\n  cellLayout: (messageId: string) => SharedValue<{ y: number, height: number } | undefined>\n  isInverted: boolean\n}\n\nexport const BubbleGradientContext = createContext<BubbleGradientStore | null>(null)\n\ninterface TailProps {\n  /** The side of the screen the tail points to. */\n  side: 'left' | 'right'\n  color: string\n  shadowColor?: string\n  /** Overrides `color` from the UI thread (a bubble sliding through a screen-fixed gradient). */\n  animatedColor?: SharedValue<string>\n}\n\nconst mirrorStyle: ViewStyle = { transform: [{ scaleX: -1 }] }\n\nconst SvgTail = ({ side, color, shadowColor, animatedColor }: TailProps) => {\n  const animatedProps = useAnimatedProps(() => ({ fill: animatedColor ? animatedColor.value : color }))\n\n  return (\n    <View\n      pointerEvents='none'\n      style={[styles.tail, side === 'right' ? styles.tailRight : styles.tailLeft, side === 'left' && mirrorStyle]}\n    >\n      <Svg width={TAIL_BOX_WIDTH} height={TAIL_HEIGHT + 1} viewBox={`0 0 ${TAIL_BOX_WIDTH} ${TAIL_HEIGHT + 1}`}>\n        {!!shadowColor && shadowColor !== 'transparent' && <Path d={TAIL_SHADOW_PATH} fill={shadowColor} />}\n        {animatedColor\n          ? <AnimatedPath d={TAIL_PATH} animatedProps={animatedProps} />\n          : <Path d={TAIL_PATH} fill={color} />}\n      </Svg>\n    </View>\n  )\n}\n\n// Without react-native-svg the curl becomes a straight-edged wedge drawn with borders.\nconst ViewTail = ({ side, color, animatedColor }: TailProps) => {\n  const colorStyle = useAnimatedStyle(() => {\n    const value = animatedColor ? animatedColor.value : color\n    return side === 'right' ? { borderLeftColor: value } : { borderRightColor: value }\n  })\n\n  return (\n    <Animated.View\n      pointerEvents='none'\n      style={[\n        styles.tail,\n        side === 'right' ? styles.tailRight : styles.tailLeft,\n        side === 'right' ? styles.wedgeRight : styles.wedgeLeft,\n        side === 'right' ? { borderLeftColor: color } : { borderRightColor: color },\n        animatedColor && colorStyle,\n      ]}\n    />\n  )\n}\n\n/** The curled tail at the bottom corner of the last bubble in a run. */\nexport const BubbleTail = (props: TailProps) => {\n  if (Svg && Path) {\n    if (props.animatedColor)\n      return <SvgTail {...props} />\n\n    return <StaticSvgTail {...props} />\n  }\n\n  if (props.animatedColor)\n    return <ViewTail {...props} />\n\n  return <StaticViewTail {...props} />\n}\n\n// The common case carries no shared value and no worklet: most tails never change color.\nconst StaticSvgTail = ({ side, color, shadowColor }: TailProps) => (\n  <View\n    pointerEvents='none'\n    style={[styles.tail, side === 'right' ? styles.tailRight : styles.tailLeft, side === 'left' && mirrorStyle]}\n  >\n    <Svg width={TAIL_BOX_WIDTH} height={TAIL_HEIGHT + 1} viewBox={`0 0 ${TAIL_BOX_WIDTH} ${TAIL_HEIGHT + 1}`}>\n      {!!shadowColor && shadowColor !== 'transparent' && <Path d={TAIL_SHADOW_PATH} fill={shadowColor} />}\n      <Path d={TAIL_PATH} fill={color} />\n    </Svg>\n  </View>\n)\n\nconst StaticViewTail = ({ side, color }: TailProps) => (\n  <View\n    pointerEvents='none'\n    style={[\n      styles.tail,\n      side === 'right' ? styles.tailRight : styles.tailLeft,\n      side === 'right' ? styles.wedgeRight : styles.wedgeLeft,\n      side === 'right' ? { borderLeftColor: color } : { borderRightColor: color },\n    ]}\n  />\n)\n\n/** A CSS gradient, top to bottom, with the stops spread evenly. */\nexport const linearGradientStyle = (stops: string[]): ViewStyle => {\n  const last = Math.max(1, stops.length - 1)\n  const css = `linear-gradient(to bottom, ${stops.map((stop, i) => `${stop} ${Math.round((i / last) * 1000) / 10}%`).join(', ')})`\n  return { backgroundImage: css, experimental_backgroundImage: css } as ViewStyle\n}\n\ninterface GradientBackgroundProps {\n  stops: string[]\n  mode: 'screen' | 'bubble'\n  messageId: string | number\n  /** Space under the bubble inside its list cell (the gap to the next row). */\n  bottomGap: number\n  /** The body's corner radii, so the fill is clipped like the bubble. */\n  cornerStyle: StyleProp<ViewStyle>\n  /** Draw the tail on this side, sampling the gradient at the bubble's bottom. */\n  tailSide?: 'left' | 'right'\n}\n\nconst TAIL_COLOR_STEPS = 20\n\nconst evenStops = (count: number) => {\n  const last = Math.max(1, count - 1)\n  return Array.from({ length: count }, (_, i) => i / last)\n}\n\n/**\n * The outgoing gradient: one vertical gradient spans\n * the message list, and each bubble paints the slice behind it, so a bubble shifts from\n * purple to blue as it scrolls and two bubbles read as one ramp. Each bubble holds a\n * list-tall gradient and slides it by its own position, from the cell layout and the scroll\n * offset - no measuring on the UI thread.\n */\nconst ScreenGradientBackground = ({ stops, messageId, bottomGap, cornerStyle, tailSide, store }: GradientBackgroundProps & { store: BubbleGradientStore }) => {\n  const { scrolledY, listHeight, isInverted } = store\n  const cellLayout = useMemo(() => store.cellLayout(String(messageId)), [store, messageId])\n  const positions = evenStops(stops.length)\n\n  // The gradient slides with the scroll on every frame, so it is one worklet that computes the\n  // bubble's bottom edge (in points from the top of the list) and the layer's offset together:\n  // a derived value in between doubled the per-bubble, per-frame work, which on Android cost\n  // about a third more dropped frames in a fling.\n  const layerStyle = useAnimatedStyle(() => {\n    const layout = cellLayout.value\n    const height = listHeight.value > 0 ? listHeight.value : 800\n    const bottom = !layout\n      ? height / 2\n      : isInverted\n        ? height + scrolledY.value - layout.y - bottomGap\n        : layout.y + layout.height - bottomGap - scrolledY.value\n    return {\n      height,\n      transform: [{ translateY: height - bottom }],\n    }\n  })\n\n  // The tail samples the gradient at the bubble's bottom, live. Its colour snaps to one of\n  // TAIL_COLOR_STEPS along the gradient: the tail is an SVG path, and redrawing it on every frame\n  // of a fling cost Android more than the whole sliding gradient. Snapped, it is redrawn only when\n  // its colour actually changes (Reanimated skips unchanged props), and a 6pt tail does not show\n  // the steps.\n  const tailColor = useDerivedValue(() => {\n    const layout = cellLayout.value\n    const height = listHeight.value\n    if (!layout || height <= 0)\n      return stops[stops.length - 1]\n    const bottom = isInverted\n      ? height + scrolledY.value - layout.y - bottomGap\n      : layout.y + layout.height - bottomGap - scrolledY.value\n    const fraction = Math.round(Math.min(1, Math.max(0, bottom / height)) * TAIL_COLOR_STEPS) / TAIL_COLOR_STEPS\n    return interpolateColor(fraction, positions, stops) as string\n  })\n\n  return (\n    <>\n      <View pointerEvents='none' style={[StyleSheet.absoluteFill, styles.clip, { backgroundColor: stops[stops.length - 1] }, cornerStyle]}>\n        <Animated.View style={[styles.layer, linearGradientStyle(stops), layerStyle]} />\n      </View>\n      {tailSide && <BubbleTail side={tailSide} color={stops[stops.length - 1]} animatedColor={tailColor} />}\n    </>\n  )\n}\n\n/** The gradient behind an outgoing bubble: screen-fixed inside a chat list, else per bubble. */\nexport const GradientBubbleBackground = (props: GradientBackgroundProps) => {\n  const store = useContext(BubbleGradientContext)\n\n  if (props.mode === 'screen' && store)\n    return <ScreenGradientBackground {...props} store={store} />\n\n  return (\n    <>\n      <View\n        pointerEvents='none'\n        style={[StyleSheet.absoluteFill, styles.clip, { backgroundColor: props.stops[props.stops.length - 1] }, linearGradientStyle(props.stops), props.cornerStyle]}\n      />\n      {props.tailSide && <BubbleTail side={props.tailSide} color={props.stops[props.stops.length - 1]} />}\n    </>\n  )\n}\n\nconst styles = StyleSheet.create({\n  tail: {\n    position: 'absolute',\n    bottom: 0,\n    width: TAIL_BOX_WIDTH,\n    height: TAIL_HEIGHT + 1,\n    marginBottom: -1,\n  },\n  tailRight: {\n    right: -TAIL_WIDTH,\n  },\n  tailLeft: {\n    left: -TAIL_WIDTH,\n  },\n  wedgeRight: {\n    width: 0,\n    height: 0,\n    marginBottom: 0,\n    right: -TAIL_WIDTH,\n    borderTopWidth: TAIL_HEIGHT,\n    borderTopColor: 'transparent',\n    borderLeftWidth: TAIL_WIDTH,\n  },\n  wedgeLeft: {\n    width: 0,\n    height: 0,\n    marginBottom: 0,\n    left: -TAIL_WIDTH,\n    borderTopWidth: TAIL_HEIGHT,\n    borderTopColor: 'transparent',\n    borderRightWidth: TAIL_WIDTH,\n  },\n  clip: {\n    overflow: 'hidden',\n  },\n  layer: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/ChatEmpty.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface ChatEmptyProps {
+    /**
+     * The big greeting under the text, sent as a message when tapped. `null` leaves it out.
+     * @default '👋'
+     */
+    greeting?: string | null;
+    /** Called with the greeting when it is tapped. */
+    onPressGreeting?: (greeting: string) => void;
+}
+/**
+ * The empty chat: a service-colored card in the middle of
+ * the wallpaper with "No messages here yet..." in bold, a line of help below it, and a greeting
+ * sticker that sends itself when tapped. Without a sticker of the app's own, the waving hand
+ * stands in for it.
+ */
+export declare function ChatEmpty({ greeting, onPressGreeting }: ChatEmptyProps): React.JSX.Element;
+//# sourceMappingURL=ChatEmpty.d.ts.map

package/lib/components/ChatEmpty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatEmpty.d.ts","sourceRoot":"","sources":["../../src/components/ChatEmpty.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,kDAAkD;IAClD,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7C;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAE,EAAE,QAAe,EAAE,eAAe,EAAE,EAAE,cAAc,qBAqB9E"}