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

package/lib/Message/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAS3D,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAQpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,cAAc,SAAS,CAAA;AA0CvB,eAAO,MAAM,OAAO,GAAI,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAAE,OAAO,YAAY,CAAC,QAAQ,CAAC,6BAiL1F,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAYxE,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAOpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,cAAc,SAAS,CAAA;AA6BvB,eAAO,MAAM,OAAO,GAAI,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAAE,OAAO,YAAY,CAAC,QAAQ,CAAC,6BA8P1F,CAAA"}

package/lib/Message/index.js

@@ -1,189 +1,428 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-import { View, StyleSheet } from 'react-native';
-import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { c as _c } from "react/compiler-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Animated as RNAnimated, Easing as RNEasing, Pressable, StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { Avatar } from '../Avatar';
 import { Bubble } from '../Bubble';
+import { useIsNoteGrown } from '../components/mediaPlayback';
+import { HighlightOverlay, useMessageHighlightToken } from '../components/messageHighlight';
+import { useMessageSelection } from '../components/messageSelection';
+import { SELECTION_CHECKBOX_SIZE, SelectionCheckbox } from '../components/SelectionCheckbox';
 import { useIsRTL } from '../hooks/useIsRTL';
-import { useTheme, useThemedStyles } from '../hooks/useTheme';
+import { useTheme } from '../hooks/useTheme';
 import { mirrorPosition } from '../rtl';
 import { getStyleWithPosition } from '../styles';
 import { SystemMessage } from '../SystemMessage';
-import { isSameUser, renderComponentOrElement } from '../utils';
+import { isSameGroup, renderComponentOrElement } from '../utils';
 import styles from './styles';
+import { SwipeToReplyRow } from './SwipeToReply';
 export * from './types';
-const ReplyIcon = ({ progress, direction, position, style }) => {
-    const localStyles = useThemedStyles(createLocalStyles);
-    const animatedStyle = useAnimatedStyle(() => {
-        'worklet';
-        const scale = Math.min(progress.value, 1);
-        // When swiping left (icon on right), icon should move left (negative)
-        // When swiping right (icon on left), icon should move right (positive)
-        const translateX = direction === 'left'
-            ? Math.min(progress.value * -12, -12)
-            : Math.max(progress.value * 12, 12);
-        return {
-            transform: [{ scale }, { translateX }],
-            marginLeft: position === 'left' ? 0 : 16,
-            marginRight: position === 'right' ? 0 : 16,
-        };
-    });
-    return (<Animated.View style={[localStyles.swipeActionContainer, animatedStyle, style]}>
-      <View style={localStyles.replyIconContainer}>
-        <View style={localStyles.replyIcon}>
-          <View style={localStyles.replyIconArrow}/>
-          <View style={localStyles.replyIconLine}/>
-        </View>
-      </View>
-    </Animated.View>);
+
+// Selection mode: incoming rows slide 35dp aside for the
+// check, which sits 8dp from the edge, 8dp above the bubble's bottom; ease-out in, ease-in out.
+const SELECTION_SHIFT = 35;
+const SELECTION_CHECK_INSET = 8;
+const SELECTION_MS = 200;
+const SELECTION_EASE_OUT = RNEasing.bezier(0, 0, 0.58, 1);
+const SELECTION_EASE_IN = RNEasing.bezier(0.42, 0, 1, 1);
+
+/** The avatar fades out as fast as the note grows over it. */
+const AVATAR_FADE_MS = 250;
+
+/**
+ * The avatar beside a round note, faded out while that note is grown to play,
+ * since the grown note covers it. The space stays,
+ * so the row does not move.
+ */
+const NoteAvatar = t0 => {
+  const $ = _c(7);
+  const {
+    messageId,
+    children
+  } = t0;
+  const isGrown = useIsNoteGrown(messageId);
+  const opacity = useSharedValue(isGrown ? 0 : 1);
+  let t1;
+  let t2;
+  if ($[0] !== isGrown || $[1] !== opacity) {
+    t1 = () => {
+      opacity.value = withTiming(isGrown ? 0 : 1, {
+        duration: AVATAR_FADE_MS
+      });
+    };
+    t2 = [isGrown, opacity];
+    $[0] = isGrown;
+    $[1] = opacity;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  const style = useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }));
+  let t3;
+  if ($[4] !== children || $[5] !== style) {
+    t3 = <Animated.View style={style}>{children}</Animated.View>;
+    $[4] = children;
+    $[5] = style;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 };
-export const Message = (props) => {
-    const { currentMessage, renderBubble: renderBubbleProp, renderSystemMessage: renderSystemMessageProp, onMessageLayout, nextMessage, position, containerStyle, user, isUserAvatarVisible, swipeToReply, } = props;
-    // Extract swipe props
-    const isSwipeToReplyEnabled = swipeToReply?.isEnabled ?? false;
-    const swipeToReplyDirection = swipeToReply?.direction ?? 'left';
-    const onSwipeToReply = swipeToReply?.onSwipe;
-    const renderSwipeToReplyActionProp = swipeToReply?.renderAction;
-    const swipeToReplyActionContainerStyle = swipeToReply?.actionContainerStyle;
-    const theme = useTheme();
-    const isRTL = useIsRTL();
-    // Only for the row's own layout (which side the avatar/bubble render on) -
-    // `containerStyle?.[position]` stays keyed by the real, unmirrored `position`
-    // below, since that is "my message vs. theirs", not a physical screen side.
-    const visualPosition = mirrorPosition(position, isRTL);
-    const swipeableRef = useRef(null);
-    const renderBubble = useCallback(() => {
-        const { 
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle, onMessageLayout, swipeToReply, 
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...rest } = props;
-        if (renderBubbleProp)
-            return renderComponentOrElement(renderBubbleProp, rest);
-        return <Bubble {...rest}/>;
-    }, [props, renderBubbleProp]);
-    const renderSystemMessage = useCallback(() => {
-        const { 
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle, onMessageLayout, swipeToReply, 
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...rest } = props;
-        if (renderSystemMessageProp)
-            return renderComponentOrElement(renderSystemMessageProp, rest);
-        return <SystemMessage {...rest}/>;
-    }, [props, renderSystemMessageProp]);
-    const renderAvatar = useCallback(() => {
-        if (user?._id &&
-            currentMessage?.user &&
-            user._id === currentMessage.user._id &&
-            !isUserAvatarVisible)
-            return null;
-        if (currentMessage?.user?.avatar === null)
-            return null;
-        const { 
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle, onMessageLayout, swipeToReply, 
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...rest } = props;
-        return <Avatar {...rest}/>;
-    }, [
-        props,
-        user,
-        currentMessage,
-        isUserAvatarVisible,
-    ]);
-    const renderSwipeAction = useCallback((progress, translation) => {
-        if (renderSwipeToReplyActionProp)
-            return renderSwipeToReplyActionProp(progress, translation, position);
-        return (<ReplyIcon progress={progress} translation={translation} direction={swipeToReplyDirection} position={position} style={swipeToReplyActionContainerStyle}/>);
-    }, [position, renderSwipeToReplyActionProp, swipeToReplyDirection, swipeToReplyActionContainerStyle]);
-    const handleSwipeableOpen = useCallback(() => {
-        swipeableRef.current?.close();
-    }, []);
-    const handleSwipeableWillOpen = useCallback(() => {
-        if (onSwipeToReply && currentMessage)
-            onSwipeToReply(currentMessage);
-    }, [onSwipeToReply, currentMessage]);
-    const sameUser = useMemo(() => isSameUser(currentMessage, nextMessage), [currentMessage, nextMessage]);
-    const messageContent = useMemo(() => {
-        if (currentMessage?.system)
-            return renderSystemMessage();
-        return (<View style={[
-                getStyleWithPosition(styles, 'container', visualPosition),
-                { marginBottom: sameUser ? theme.spacing.withinGroup : theme.spacing.betweenGroups },
-                containerStyle?.[position],
-            ]}>
-        {visualPosition === 'left' && renderAvatar()}
-        {renderBubble()}
-        {visualPosition === 'right' && renderAvatar()}
-      </View>);
-    }, [
-        currentMessage?.system,
-        renderSystemMessage,
-        position,
-        visualPosition,
-        sameUser,
-        theme,
-        containerStyle,
-        renderAvatar,
-        renderBubble,
-    ]);
-    if (!currentMessage)
+export const Message = props => {
+  const $ = _c(77);
+  const {
+    currentMessage,
+    renderBubble: renderBubbleProp,
+    renderSystemMessage: renderSystemMessageProp,
+    onMessageLayout,
+    nextMessage,
+    position,
+    containerStyle,
+    user,
+    isUserAvatarVisible,
+    isAvatarVisible: t0,
+    swipeToReply
+  } = props;
+  const isAvatarVisible = t0 === undefined ? true : t0;
+  const isSwipeToReplyEnabled = swipeToReply?.isEnabled ?? false;
+  const swipeToReplyDirection = swipeToReply?.direction ?? "left";
+  const onSwipeToReply = swipeToReply?.onSwipe;
+  const renderSwipeToReplyActionProp = swipeToReply?.renderAction;
+  const swipeToReplyActionContainerStyle = swipeToReply?.actionContainerStyle;
+  const theme = useTheme();
+  const isRTL = useIsRTL();
+  let t1;
+  if ($[0] !== isRTL || $[1] !== position) {
+    t1 = mirrorPosition(position, isRTL);
+    $[0] = isRTL;
+    $[1] = position;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const visualPosition = t1;
+  const highlightToken = useMessageHighlightToken(currentMessage?._id);
+  const selection = useMessageSelection(currentMessage?.system ? undefined : currentMessage?._id);
+  const [isSelectionChromeShown, setIsSelectionChromeShown] = useState(selection.isActive);
+  if (selection.isActive && !isSelectionChromeShown) {
+    setIsSelectionChromeShown(true);
+  }
+  let t2;
+  if ($[3] !== selection.isActive) {
+    t2 = () => new RNAnimated.Value(selection.isActive ? 1 : 0);
+    $[3] = selection.isActive;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const [selectionProgress] = useState(t2);
+  let t3;
+  let t4;
+  if ($[5] !== isSelectionChromeShown || $[6] !== selection.isActive || $[7] !== selectionProgress) {
+    t3 = () => {
+      if (!isSelectionChromeShown) {
+        return;
+      }
+      const isActive = selection.isActive;
+      const animation = RNAnimated.timing(selectionProgress, {
+        toValue: isActive ? 1 : 0,
+        duration: SELECTION_MS,
+        easing: isActive ? SELECTION_EASE_OUT : SELECTION_EASE_IN,
+        useNativeDriver: true
+      });
+      animation.start(t5 => {
+        const {
+          finished
+        } = t5;
+        if (finished && !isActive) {
+          setIsSelectionChromeShown(false);
+        }
+      });
+      return () => animation.stop();
+    };
+    t4 = [selection.isActive, isSelectionChromeShown, selectionProgress];
+    $[5] = isSelectionChromeShown;
+    $[6] = selection.isActive;
+    $[7] = selectionProgress;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t3 = $[8];
+    t4 = $[9];
+  }
+  useEffect(t3, t4);
+  const checkSide = isRTL ? "right" : "left";
+  const isShiftedForCheck = visualPosition === checkSide;
+  let t5;
+  bb0: {
+    if (!isSelectionChromeShown || !isShiftedForCheck) {
+      t5 = null;
+      break bb0;
+    }
+    const direction = checkSide === "left" ? 1 : -1;
+    let t6;
+    if ($[10] !== direction || $[11] !== selectionProgress) {
+      t6 = selectionProgress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, SELECTION_SHIFT * direction]
+      });
+      $[10] = direction;
+      $[11] = selectionProgress;
+      $[12] = t6;
+    } else {
+      t6 = $[12];
+    }
+    let t7;
+    if ($[13] !== t6) {
+      t7 = {
+        transform: [{
+          translateX: t6
+        }]
+      };
+      $[13] = t6;
+      $[14] = t7;
+    } else {
+      t7 = $[14];
+    }
+    t5 = t7;
+  }
+  const shiftStyle = t5;
+  let t6;
+  if ($[15] !== props || $[16] !== renderBubbleProp) {
+    t6 = () => {
+      const {
+        containerStyle: containerStyle_0,
+        onMessageLayout: onMessageLayout_0,
+        swipeToReply: swipeToReply_0,
+        ...rest
+      } = props;
+      if (renderBubbleProp) {
+        return renderComponentOrElement(renderBubbleProp, rest);
+      }
+      return <Bubble {...rest} />;
+    };
+    $[15] = props;
+    $[16] = renderBubbleProp;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  const renderBubble = t6;
+  let t7;
+  if ($[18] !== props || $[19] !== renderSystemMessageProp) {
+    t7 = () => {
+      const {
+        containerStyle: containerStyle_1,
+        onMessageLayout: onMessageLayout_1,
+        swipeToReply: swipeToReply_1,
+        ...rest_0
+      } = props;
+      if (renderSystemMessageProp) {
+        return renderComponentOrElement(renderSystemMessageProp, rest_0);
+      }
+      return <SystemMessage {...rest_0} />;
+    };
+    $[18] = props;
+    $[19] = renderSystemMessageProp;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  const renderSystemMessage = t7;
+  let t8;
+  if ($[21] !== currentMessage || $[22] !== isAvatarVisible || $[23] !== isUserAvatarVisible || $[24] !== props || $[25] !== user) {
+    t8 = () => {
+      if (!isAvatarVisible) {
         return null;
-    // Don't wrap system messages in Swipeable
-    if (currentMessage.system || !isSwipeToReplyEnabled)
-        return (<View onLayout={onMessageLayout}>
-        {messageContent}
-      </View>);
-    return (<View onLayout={onMessageLayout}>
-      <ReanimatedSwipeable ref={swipeableRef} friction={2} overshootFriction={8} renderRightActions={swipeToReplyDirection === 'left' ? renderSwipeAction : undefined} renderLeftActions={swipeToReplyDirection === 'right' ? renderSwipeAction : undefined} onSwipeableOpen={handleSwipeableOpen} onSwipeableWillOpen={handleSwipeableWillOpen}>
-        {messageContent}
-      </ReanimatedSwipeable>
-    </View>);
+      }
+      if (user?._id && currentMessage?.user && user._id === currentMessage.user._id && !isUserAvatarVisible) {
+        return null;
+      }
+      if (currentMessage?.user?.avatar === null) {
+        return null;
+      }
+      const {
+        containerStyle: containerStyle_2,
+        onMessageLayout: onMessageLayout_2,
+        swipeToReply: swipeToReply_2,
+        ...rest_1
+      } = props;
+      if (currentMessage?.videoNote && currentMessage._id != null) {
+        return <NoteAvatar messageId={currentMessage._id}><Avatar {...rest_1} /></NoteAvatar>;
+      }
+      return <Avatar {...rest_1} />;
+    };
+    $[21] = currentMessage;
+    $[22] = isAvatarVisible;
+    $[23] = isUserAvatarVisible;
+    $[24] = props;
+    $[25] = user;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  const renderAvatar = t8;
+  let t9;
+  if ($[27] !== currentMessage || $[28] !== onSwipeToReply) {
+    t9 = () => {
+      if (onSwipeToReply && currentMessage) {
+        onSwipeToReply(currentMessage);
+      }
+    };
+    $[27] = currentMessage;
+    $[28] = onSwipeToReply;
+    $[29] = t9;
+  } else {
+    t9 = $[29];
+  }
+  const handleSwipeReply = t9;
+  let t10;
+  if ($[30] !== currentMessage || $[31] !== nextMessage) {
+    t10 = isSameGroup(currentMessage, nextMessage);
+    $[30] = currentMessage;
+    $[31] = nextMessage;
+    $[32] = t10;
+  } else {
+    t10 = $[32];
+  }
+  const isGroupedWithNext = t10;
+  let t11;
+  if ($[33] !== containerStyle || $[34] !== currentMessage?.system || $[35] !== highlightToken || $[36] !== isGroupedWithNext || $[37] !== position || $[38] !== renderAvatar || $[39] !== renderBubble || $[40] !== renderSystemMessage || $[41] !== shiftStyle || $[42] !== theme || $[43] !== visualPosition) {
+    t11 = () => {
+      if (currentMessage?.system) {
+        return renderSystemMessage();
+      }
+      return <RNAnimated.View style={[getStyleWithPosition(styles, "container", visualPosition), {
+        marginBottom: isGroupedWithNext ? theme.spacing.withinGroup : theme.spacing.betweenGroups
+      }, containerStyle?.[position], shiftStyle]}>{!!highlightToken && <HighlightOverlay token={highlightToken} color={theme.colors.selectionBackground} opacity={1} />}{visualPosition === "left" && renderAvatar()}{renderBubble()}{visualPosition === "right" && renderAvatar()}</RNAnimated.View>;
+    };
+    $[33] = containerStyle;
+    $[34] = currentMessage?.system;
+    $[35] = highlightToken;
+    $[36] = isGroupedWithNext;
+    $[37] = position;
+    $[38] = renderAvatar;
+    $[39] = renderBubble;
+    $[40] = renderSystemMessage;
+    $[41] = shiftStyle;
+    $[42] = theme;
+    $[43] = visualPosition;
+    $[44] = t11;
+  } else {
+    t11 = $[44];
+  }
+  currentMessage?.system;
+  let t12;
+  if ($[45] !== t11) {
+    t12 = t11();
+    $[45] = t11;
+    $[46] = t12;
+  } else {
+    t12 = $[46];
+  }
+  const messageContent = t12;
+  if (!currentMessage) {
+    return null;
+  }
+  const bottomGap = isGroupedWithNext ? theme.spacing.withinGroup : theme.spacing.betweenGroups;
+  let t13;
+  if ($[47] !== isSelectionChromeShown || $[48] !== selection.isSelected || $[49] !== theme.colors) {
+    t13 = isSelectionChromeShown && selection.isSelected ? <View style={[StyleSheet.absoluteFill, {
+      backgroundColor: theme.colors.selectionBackground
+    }]} pointerEvents="none" /> : null;
+    $[47] = isSelectionChromeShown;
+    $[48] = selection.isSelected;
+    $[49] = theme.colors;
+    $[50] = t13;
+  } else {
+    t13 = $[50];
+  }
+  const selectionTint = t13;
+  let t14;
+  if ($[51] !== bottomGap || $[52] !== checkSide || $[53] !== isSelectionChromeShown || $[54] !== selection.isActive || $[55] !== selection.isSelected || $[56] !== selection.toggle || $[57] !== selectionProgress) {
+    t14 = isSelectionChromeShown ? <><RNAnimated.View pointerEvents="none" style={[selectionStyles.check, checkSide === "left" ? selectionStyles.checkLeft : selectionStyles.checkRight, {
+        bottom: bottomGap + SELECTION_CHECK_INSET,
+        opacity: selectionProgress,
+        transform: [{
+          translateX: selectionProgress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [checkSide === "left" ? -SELECTION_SHIFT : SELECTION_SHIFT, 0]
+          })
+        }]
+      }]}><SelectionCheckbox isChecked={selection.isSelected} /></RNAnimated.View>{selection.isActive && <Pressable style={StyleSheet.absoluteFill} onPress={selection.toggle} accessibilityRole="checkbox" accessibilityState={{
+        checked: selection.isSelected
+      }} testID="message-select-toggle" />}</> : null;
+    $[51] = bottomGap;
+    $[52] = checkSide;
+    $[53] = isSelectionChromeShown;
+    $[54] = selection.isActive;
+    $[55] = selection.isSelected;
+    $[56] = selection.toggle;
+    $[57] = selectionProgress;
+    $[58] = t14;
+  } else {
+    t14 = $[58];
+  }
+  const selectionChrome = t14;
+  if (currentMessage.system || !isSwipeToReplyEnabled) {
+    let t15;
+    if ($[59] !== messageContent || $[60] !== onMessageLayout || $[61] !== selectionChrome || $[62] !== selectionTint) {
+      t15 = <View onLayout={onMessageLayout}>{selectionTint}{messageContent}{selectionChrome}</View>;
+      $[59] = messageContent;
+      $[60] = onMessageLayout;
+      $[61] = selectionChrome;
+      $[62] = selectionTint;
+      $[63] = t15;
+    } else {
+      t15 = $[63];
+    }
+    return t15;
+  }
+  const t15 = !selection.isActive;
+  let t16;
+  if ($[64] !== handleSwipeReply || $[65] !== messageContent || $[66] !== position || $[67] !== renderSwipeToReplyActionProp || $[68] !== swipeToReplyActionContainerStyle || $[69] !== swipeToReplyDirection || $[70] !== t15) {
+    t16 = <SwipeToReplyRow direction={swipeToReplyDirection} position={position} onReply={handleSwipeReply} renderAction={renderSwipeToReplyActionProp} actionContainerStyle={swipeToReplyActionContainerStyle} isEnabled={t15}>{messageContent}</SwipeToReplyRow>;
+    $[64] = handleSwipeReply;
+    $[65] = messageContent;
+    $[66] = position;
+    $[67] = renderSwipeToReplyActionProp;
+    $[68] = swipeToReplyActionContainerStyle;
+    $[69] = swipeToReplyDirection;
+    $[70] = t15;
+    $[71] = t16;
+  } else {
+    t16 = $[71];
+  }
+  let t17;
+  if ($[72] !== onMessageLayout || $[73] !== selectionChrome || $[74] !== selectionTint || $[75] !== t16) {
+    t17 = <View onLayout={onMessageLayout}>{selectionTint}{t16}{selectionChrome}</View>;
+    $[72] = onMessageLayout;
+    $[73] = selectionChrome;
+    $[74] = selectionTint;
+    $[75] = t16;
+    $[76] = t17;
+  } else {
+    t17 = $[76];
+  }
+  return t17;
 };
-const createLocalStyles = (theme) => StyleSheet.create({
-    swipeActionContainer: {
-        width: 40,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    replyIconContainer: {
-        width: 28,
-        height: 28,
-        borderRadius: 14,
-        backgroundColor: theme.colors.accent,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    replyIcon: {
-        width: 14,
-        height: 10,
-        transform: [{ scaleX: -1 }],
-    },
-    replyIconArrow: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0,
-        borderTopWidth: 5,
-        borderTopColor: 'transparent',
-        borderBottomWidth: 5,
-        borderBottomColor: 'transparent',
-        borderRightWidth: 6,
-        borderRightColor: '#fff',
-    },
-    replyIconLine: {
-        position: 'absolute',
-        top: 3,
-        left: 5,
-        width: 9,
-        height: 4,
-        borderTopWidth: 2,
-        borderRightWidth: 2,
-        borderTopColor: '#fff',
-        borderRightColor: '#fff',
-        borderTopRightRadius: 4,
-    },
+const selectionStyles = StyleSheet.create({
+  check: {
+    position: 'absolute',
+    width: SELECTION_CHECKBOX_SIZE,
+    height: SELECTION_CHECKBOX_SIZE
+  },
+  checkLeft: {
+    left: SELECTION_CHECK_INSET
+  },
+  checkRight: {
+    right: SELECTION_CHECK_INSET
+  }
 });
 //# sourceMappingURL=index.js.map