@kesha-antonov/react-native-chat 5.0.1 → 6.0.1

package/lib/components/TouchableOpacity.js.map

@@ -1 +1 @@
-{"version":3,"file":"TouchableOpacity.js","sourceRoot":"","sources":["../../src/components/TouchableOpacity.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TouchableOpacity.js","names":["React","useCallback","useEffect","useMemo","useRef","StyleSheet","BaseButton","Animated","useAnimatedStyle","useSharedValue","withTiming","TouchableOpacity","t0","$","_c","children","onPress","rest","style","t1","activeOpacity","undefined","opacity","isAnimationInFinished","pressOutTimeout","t2","t3","Symbol","for","clearTimeout","current","t4","set","duration","handlePressIn","t5","setTimeout","get","handlePressOut","t6","isActive","handleActiveStateChange","animatedStyle","t7","handlePress","t8","styles","content","composedStyle","t9","t10","create","pointerEvents"],"sources":["../../src/components/TouchableOpacity.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { StyleSheet } from 'react-native'\nimport { BaseButton } from 'react-native-gesture-handler'\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nexport type TouchableOpacityProps = Omit<React.ComponentProps<typeof BaseButton>, 'onPress'> & {\n  activeOpacity?: number\n  onPress?: () => void\n} & React.ComponentProps<typeof Animated.View>\n\n// Built on gesture-handler's `BaseButton`, not the `Touchable` 3.0 recommends in\n// its place. `Touchable` handles the press natively, outside the gesture system,\n// so a bubble's long-press could no longer win over a photo or play button\n// inside it: holding a photo neither opened the menu nor stopped the release\n// from opening the viewer. `BaseButton` is still a gesture, so it loses to the\n// long-press the way it always did.\nexport const TouchableOpacity: React.FC<TouchableOpacityProps> = ({\n  children,\n  style,\n  activeOpacity = 0.2,\n  onPress,\n  ...rest\n}) => {\n  const opacity = useSharedValue(1)\n  const isAnimationInFinished = useSharedValue(false)\n  // The press-out fade is deferred so a quick tap still shows the pressed state for a\n  // full beat. That timer has to be cancellable: unmounting between press-out and the\n  // fade (a button that dismisses its own sheet) would otherwise leave it pending.\n  const pressOutTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  useEffect(() => () => {\n    clearTimeout(pressOutTimeout.current)\n  }, [])\n\n  const handlePressIn = useCallback(() => {\n    opacity.set(withTiming(activeOpacity, { duration: 150 }, () => {\n      isAnimationInFinished.set(true)\n    }))\n  }, [activeOpacity, opacity, isAnimationInFinished])\n\n  const handlePressOut = useCallback(() => {\n    clearTimeout(pressOutTimeout.current)\n    pressOutTimeout.current = setTimeout(() => {\n      opacity.set(withTiming(1, { duration: 150 }))\n      isAnimationInFinished.set(false)\n    }, isAnimationInFinished.get() ? 0 : 150)\n  }, [opacity, isAnimationInFinished])\n\n  const handleActiveStateChange = useCallback((isActive: boolean) => {\n    if (isActive)\n      handlePressIn()\n    else\n      handlePressOut()\n  }, [handlePressIn, handlePressOut])\n\n  const animatedStyle = useAnimatedStyle(() => ({\n    opacity: opacity.get(),\n  }))\n\n  const handlePress = useCallback(() => {\n    onPress?.()\n  }, [onPress])\n\n  // Every tappable in the library goes through this component - each message bubble, avatar,\n  // action and attachment - so composing the style list inline handed Animated.View a fresh array\n  // on each of those renders.\n  const composedStyle = useMemo(() => [style, animatedStyle, styles.content], [style, animatedStyle])\n\n  return (\n    <BaseButton\n      {...rest}\n      onPress={handlePress}\n      onActiveStateChange={handleActiveStateChange}\n    >\n      <Animated.View\n        // The content view must not capture touches, otherwise it swallows the\n        // BaseButton's press on Android (see #2714). pointerEvents in style is\n        // the non-deprecated form on RN's New Architecture.\n        style={composedStyle}\n      >\n        {children}\n      </Animated.View>\n    </BaseButton>\n  )\n}\n\nconst styles = StyleSheet.create({\n  content: {\n    pointerEvents: 'none',\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/TranscribeButton.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export type TranscribeTapAction = 'none' | 'request' | 'collapse' | 'expand';
+/**
+ * What a tap on the transcribe button does. It ignores taps while a
+ * transcription is loading, asks for one when there
+ * is none yet, and otherwise toggles the text.
+ */
+export declare const transcribeTapAction: ({ hasTranscription, isOpen, isLoading, }: {
+    hasTranscription: boolean;
+    isOpen: boolean;
+    isLoading: boolean;
+}) => TranscribeTapAction;
+/**
+ * Transcription state for one voice note. The button shows when the app can
+ * transcribe (`onTranscribe`) or the message already carries a transcription.
+ * Asking for one shows the loading outline until `transcription` arrives, and
+ * then opens it.
+ */
+export declare const useTranscription: <TMessage>(message: TMessage | undefined, messageId: string | number | undefined, transcription: string | undefined, onTranscribe: ((message: TMessage) => void) | undefined) => {
+    isVisible: boolean;
+    isOpen: boolean;
+    isLoading: boolean;
+    onPress: () => void;
+};
+/**
+ * The transcribe button, drawn as vectors: an arrow
+ * into an "A" in a softly filled rounded rect. The arrow turns up once the
+ * text is open, so the button reads as "collapse".
+ */
+export declare function TranscribeButton({ isOpen, isLoading, onPress, color, }: {
+    isOpen: boolean;
+    isLoading: boolean;
+    onPress: () => void;
+    color: string;
+}): React.JSX.Element;
+/**
+ * The transcription under the waveform. It opens by growing to the text's
+ * height while fading in, and closes the same way back.
+ */
+export declare function TranscriptionText({ text, isOpen, color, }: {
+    text: string | undefined;
+    isOpen: boolean;
+    color: string;
+}): React.JSX.Element | null;
+//# sourceMappingURL=TranscribeButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TranscribeButton.d.ts","sourceRoot":"","sources":["../../src/components/TranscribeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAA;AA8B/D,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAA;AAE5E;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,0CAIjC;IACD,gBAAgB,EAAE,OAAO,CAAA;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;CACnB,KAAG,mBAMH,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAQ,EACvC,SAAS,QAAQ,GAAG,SAAS,EAC7B,WAAW,MAAM,GAAG,MAAM,GAAG,SAAS,EACtC,eAAe,MAAM,GAAG,SAAS,EACjC,cAAc,CAAC,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS;;;;;CAsCxD,CAAA;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAE,EAChC,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,GACN,EAAE;IACD,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd,qBAwDA;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAE,EACjC,IAAI,EACJ,MAAM,EACN,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IACxB,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;CACd,4BAiCA"}

package/lib/components/TranscribeButton.js

@@ -0,0 +1,549 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useCallback, useEffect, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import Animated, { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import { TRANSCRIBE_BUTTON_HEIGHT, TRANSCRIBE_BUTTON_RADIUS, TRANSCRIBE_BUTTON_WIDTH } from './voiceWaveform';
+
+// TranscribeButton's `loadingFloat`: the loading outline fades over 250ms,
+// eased out-quint.
+const LOADING_FADE_MS = 250;
+const EASE_OUT_QUINT = Easing.bezier(0.23, 1, 0.32, 1);
+// While loading, a dashed outline breathes on the beat of a stroke segment
+// running round it.
+const LOADING_PULSE_MS = 650;
+// The transcription opens with the bubble's height change
+// (`transitionParams.animateChangeProgress`, about 220ms) and fades in with it.
+const OPEN_MS = 220;
+// The button is filled with its color at 0.156 alpha.
+const BACKGROUND_ALPHA = 0.156;
+/**
+ * What a tap on the transcribe button does. It ignores taps while a
+ * transcription is loading, asks for one when there
+ * is none yet, and otherwise toggles the text.
+ */
+export const transcribeTapAction = ({
+  hasTranscription,
+  isOpen,
+  isLoading
+}) => {
+  if (isLoading) return 'none';
+  if (!hasTranscription) return 'request';
+  return isOpen ? 'collapse' : 'expand';
+};
+
+/**
+ * Transcription state for one voice note. The button shows when the app can
+ * transcribe (`onTranscribe`) or the message already carries a transcription.
+ * Asking for one shows the loading outline until `transcription` arrives, and
+ * then opens it.
+ */
+export const useTranscription = (message, messageId, transcription, onTranscribe) => {
+  const $ = _c(19);
+  const [isOpen, setIsOpen] = useState(false);
+  const [requestedFor, setRequestedFor] = useState(null);
+  const hasTranscription = !!transcription;
+  const isRequested = requestedFor != null && requestedFor === messageId;
+  const isLoading = isRequested && !hasTranscription;
+  let t0;
+  let t1;
+  if ($[0] !== hasTranscription || $[1] !== isRequested) {
+    t0 = () => {
+      if (isRequested && hasTranscription) {
+        setIsOpen(true);
+        setRequestedFor(null);
+      }
+    };
+    t1 = [isRequested, hasTranscription];
+    $[0] = hasTranscription;
+    $[1] = isRequested;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t0 = $[2];
+    t1 = $[3];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setIsOpen(false);
+    };
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== messageId) {
+    t3 = [messageId];
+    $[5] = messageId;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[7] !== hasTranscription || $[8] !== isLoading || $[9] !== isOpen || $[10] !== message || $[11] !== messageId || $[12] !== onTranscribe) {
+    t4 = () => {
+      const action = transcribeTapAction({
+        hasTranscription,
+        isOpen,
+        isLoading
+      });
+      if (action === "request") {
+        if (!message || !onTranscribe || messageId == null) {
+          return;
+        }
+        setRequestedFor(messageId);
+        onTranscribe(message);
+      } else {
+        if (action !== "none") {
+          setIsOpen(action === "expand");
+        }
+      }
+    };
+    $[7] = hasTranscription;
+    $[8] = isLoading;
+    $[9] = isOpen;
+    $[10] = message;
+    $[11] = messageId;
+    $[12] = onTranscribe;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  const onPress = t4;
+  const t5 = !!onTranscribe || hasTranscription;
+  const t6 = isOpen && hasTranscription;
+  let t7;
+  if ($[14] !== isLoading || $[15] !== onPress || $[16] !== t5 || $[17] !== t6) {
+    t7 = {
+      isVisible: t5,
+      isOpen: t6,
+      isLoading,
+      onPress
+    };
+    $[14] = isLoading;
+    $[15] = onPress;
+    $[16] = t5;
+    $[17] = t6;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  return t7;
+};
+
+/**
+ * The transcribe button, drawn as vectors: an arrow
+ * into an "A" in a softly filled rounded rect. The arrow turns up once the
+ * text is open, so the button reads as "collapse".
+ */
+export function TranscribeButton(t0) {
+  const $ = _c(46);
+  const {
+    isOpen,
+    isLoading,
+    onPress,
+    color
+  } = t0;
+  const turn = useSharedValue(isOpen ? 1 : 0);
+  const loading = useSharedValue(isLoading ? 1 : 0);
+  const pulse = useSharedValue(1);
+  let t1;
+  let t2;
+  if ($[0] !== isOpen || $[1] !== turn) {
+    t1 = () => {
+      turn.value = withTiming(isOpen ? 1 : 0, {
+        duration: OPEN_MS,
+        easing: EASE_OUT_QUINT
+      });
+    };
+    t2 = [isOpen, turn];
+    $[0] = isOpen;
+    $[1] = turn;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  let t4;
+  if ($[4] !== isLoading || $[5] !== loading || $[6] !== pulse) {
+    t3 = () => {
+      loading.value = withTiming(isLoading ? 1 : 0, {
+        duration: LOADING_FADE_MS,
+        easing: EASE_OUT_QUINT
+      });
+      if (isLoading) {
+        pulse.value = 1;
+        pulse.value = withRepeat(withTiming(0.35, {
+          duration: LOADING_PULSE_MS
+        }), -1, true);
+      } else {
+        cancelAnimation(pulse);
+      }
+    };
+    t4 = [isLoading, loading, pulse];
+    $[4] = isLoading;
+    $[5] = loading;
+    $[6] = pulse;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t3 = $[7];
+    t4 = $[8];
+  }
+  useEffect(t3, t4);
+  let t5;
+  let t6;
+  if ($[9] !== loading || $[10] !== pulse || $[11] !== turn) {
+    t5 = () => () => {
+      cancelAnimation(turn);
+      cancelAnimation(loading);
+      cancelAnimation(pulse);
+    };
+    t6 = [turn, loading, pulse];
+    $[9] = loading;
+    $[10] = pulse;
+    $[11] = turn;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t5 = $[12];
+    t6 = $[13];
+  }
+  useEffect(t5, t6);
+  const arrowStyle = useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${-90 * turn.value}deg`
+    }]
+  }));
+  const outlineStyle = useAnimatedStyle(() => ({
+    opacity: loading.value * pulse.value
+  }));
+  let t7;
+  if ($[14] !== isLoading || $[15] !== isOpen) {
+    t7 = {
+      expanded: isOpen,
+      busy: isLoading
+    };
+    $[14] = isLoading;
+    $[15] = isOpen;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  let t8;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      top: 8,
+      bottom: 8,
+      left: 8,
+      right: 8
+    };
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== color) {
+    t9 = <View pointerEvents="none" style={[buttonStyles.fill, {
+      backgroundColor: color
+    }]} />;
+    $[18] = color;
+    $[19] = t9;
+  } else {
+    t9 = $[19];
+  }
+  let t10;
+  if ($[20] !== color) {
+    t10 = {
+      borderColor: color
+    };
+    $[20] = color;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  let t11;
+  if ($[22] !== outlineStyle || $[23] !== t10) {
+    t11 = <Animated.View pointerEvents="none" testID="transcribe-loading" style={[buttonStyles.outline, t10, outlineStyle]} />;
+    $[22] = outlineStyle;
+    $[23] = t10;
+    $[24] = t11;
+  } else {
+    t11 = $[24];
+  }
+  let t12;
+  if ($[25] !== arrowStyle) {
+    t12 = [buttonStyles.arrow, arrowStyle];
+    $[25] = arrowStyle;
+    $[26] = t12;
+  } else {
+    t12 = $[26];
+  }
+  let t13;
+  if ($[27] !== color) {
+    t13 = <View style={[buttonStyles.shaft, {
+      backgroundColor: color
+    }]} />;
+    $[27] = color;
+    $[28] = t13;
+  } else {
+    t13 = $[28];
+  }
+  let t14;
+  if ($[29] !== color) {
+    t14 = <View style={[buttonStyles.head, {
+      borderColor: color
+    }]} />;
+    $[29] = color;
+    $[30] = t14;
+  } else {
+    t14 = $[30];
+  }
+  let t15;
+  if ($[31] !== t12 || $[32] !== t13 || $[33] !== t14) {
+    t15 = <Animated.View style={t12}>{t13}{t14}</Animated.View>;
+    $[31] = t12;
+    $[32] = t13;
+    $[33] = t14;
+    $[34] = t15;
+  } else {
+    t15 = $[34];
+  }
+  let t16;
+  if ($[35] !== color) {
+    t16 = <Text style={[buttonStyles.letter, {
+      color
+    }]}>A</Text>;
+    $[35] = color;
+    $[36] = t16;
+  } else {
+    t16 = $[36];
+  }
+  let t17;
+  if ($[37] !== t15 || $[38] !== t16) {
+    t17 = <View pointerEvents="none" style={buttonStyles.glyph}>{t15}{t16}</View>;
+    $[37] = t15;
+    $[38] = t16;
+    $[39] = t17;
+  } else {
+    t17 = $[39];
+  }
+  let t18;
+  if ($[40] !== onPress || $[41] !== t11 || $[42] !== t17 || $[43] !== t7 || $[44] !== t9) {
+    t18 = <Pressable onPress={onPress} accessibilityRole="button" accessibilityLabel="transcribe" accessibilityState={t7} hitSlop={t8} style={buttonStyles.button}>{t9}{t11}{t17}</Pressable>;
+    $[40] = onPress;
+    $[41] = t11;
+    $[42] = t17;
+    $[43] = t7;
+    $[44] = t9;
+    $[45] = t18;
+  } else {
+    t18 = $[45];
+  }
+  return t18;
+}
+
+/**
+ * The transcription under the waveform. It opens by growing to the text's
+ * height while fading in, and closes the same way back.
+ */
+export function TranscriptionText(t0) {
+  const $ = _c(22);
+  const {
+    text,
+    isOpen,
+    color
+  } = t0;
+  const open = useSharedValue(isOpen ? 1 : 0);
+  const textHeight = useSharedValue(0);
+  const [isMounted, setIsMounted] = useState(isOpen);
+  let t1;
+  let t2;
+  if ($[0] !== isOpen || $[1] !== open) {
+    t1 = () => {
+      if (isOpen) {
+        setIsMounted(true);
+      }
+      open.value = withTiming(isOpen ? 1 : 0, {
+        duration: OPEN_MS,
+        easing: EASE_OUT_QUINT
+      });
+    };
+    t2 = [isOpen, open];
+    $[0] = isOpen;
+    $[1] = open;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  let t4;
+  if ($[4] !== open) {
+    t3 = () => () => cancelAnimation(open);
+    t4 = [open];
+    $[4] = open;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t3 = $[5];
+    t4 = $[6];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[7] !== textHeight) {
+    t5 = event => {
+      textHeight.set(event.nativeEvent.layout.height);
+    };
+    $[7] = textHeight;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const onTextLayout = t5;
+  const style = useAnimatedStyle(() => ({
+    height: textHeight.value * open.value,
+    opacity: open.value
+  }));
+  if (!isMounted || !text) {
+    return null;
+  }
+  let t6;
+  if ($[9] !== style) {
+    t6 = [textStyles.clip, style];
+    $[9] = style;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== color) {
+    t7 = [textStyles.text, {
+      color
+    }];
+    $[11] = color;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== t7 || $[14] !== text) {
+    t8 = <Text style={t7} selectable={true}>{text}</Text>;
+    $[13] = t7;
+    $[14] = text;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== onTextLayout || $[17] !== t8) {
+    t9 = <View style={textStyles.measure} onLayout={onTextLayout}>{t8}</View>;
+    $[16] = onTextLayout;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== t6 || $[20] !== t9) {
+    t10 = <Animated.View style={t6}>{t9}</Animated.View>;
+    $[19] = t6;
+    $[20] = t9;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  return t10;
+}
+const ARROW_BOX = 9;
+const STROKE = 1.5;
+const HEAD = 5;
+const buttonStyles = StyleSheet.create({
+  button: {
+    width: TRANSCRIBE_BUTTON_WIDTH,
+    height: TRANSCRIBE_BUTTON_HEIGHT,
+    borderRadius: TRANSCRIBE_BUTTON_RADIUS,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  fill: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: TRANSCRIBE_BUTTON_RADIUS,
+    opacity: BACKGROUND_ALPHA
+  },
+  outline: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: TRANSCRIBE_BUTTON_RADIUS,
+    borderWidth: STROKE,
+    borderStyle: 'dashed'
+  },
+  glyph: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 1
+  },
+  arrow: {
+    width: ARROW_BOX,
+    height: ARROW_BOX
+  },
+  shaft: {
+    position: 'absolute',
+    left: 0,
+    top: (ARROW_BOX - STROKE) / 2,
+    width: ARROW_BOX - 1,
+    height: STROKE,
+    borderRadius: STROKE / 2
+  },
+  // A square's top and right edges turned 45 degrees make the arrowhead.
+  head: {
+    position: 'absolute',
+    left: ARROW_BOX - HEAD * Math.SQRT2 / 2 - HEAD / 2 - 0.5,
+    top: (ARROW_BOX - HEAD) / 2,
+    width: HEAD,
+    height: HEAD,
+    borderTopWidth: STROKE,
+    borderRightWidth: STROKE,
+    transform: [{
+      rotate: '45deg'
+    }]
+  },
+  letter: {
+    fontSize: 12,
+    lineHeight: 14,
+    fontWeight: '700'
+  }
+});
+const textStyles = StyleSheet.create({
+  clip: {
+    overflow: 'hidden'
+  },
+  measure: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0
+  },
+  text: {
+    fontSize: 15,
+    lineHeight: 20,
+    // Under the row's own bottom padding; this one keeps the same gap below.
+    paddingBottom: 6
+  }
+});
+//# sourceMappingURL=TranscribeButton.js.map