npm - @planningcenter/chat-react-native - Versions diffs - 3.7.0 → 3.7.1-rc.1 - Mend

@planningcenter/chat-react-native 3.7.0 → 3.7.1-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/build/components/conversation/message_reaction.d.ts CHANGED Viewed

@@ -16,6 +16,7 @@ export declare const useReactionStyles: ({ mine }: {
         borderColor: string;
         backgroundColor: string;
         borderRadius: number;
+        overflow: "hidden";
         paddingVertical: number;
         paddingHorizontal: number;
         flexDirection: "row";

package/build/components/conversation/message_reaction.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message_reaction.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_reaction.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;~~AAE7C~~,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,CAM1E,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,WAAW,EACX,OAAO,EACP,cAAc,GACf,EAAE;IACD,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,WAAW,EAAE,CAAC,SAAS,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACvD,OAAO,EAAE,eAAe,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;CACvB,~~4BAyBA~~;AAED,eAAO,MAAM,iBAAiB,aAAc;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE~~;;;;;;;;;;;;;;;;;;;;CA8B3D~~,CAAA"}
1	+ {"version":3,"file":"message_reaction.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_reaction.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAG7C,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,CAM1E,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,WAAW,EACX,OAAO,EACP,cAAc,GACf,EAAE;IACD,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,WAAW,EAAE,CAAC,SAAS,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACvD,OAAO,EAAE,eAAe,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;CACvB,4BA8BA;AAED,eAAO,MAAM,iBAAiB,aAAc;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;;CA+B3D,CAAA"}

package/build/components/conversation/message_reaction.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { StyleSheet } from 'react-native';
 import { Text } from '../../components/display';
 import { useTheme } from '../../hooks';
 import { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggle';
+import { useCreateAndroidRippleColor } from '../../hooks/use_create_android_ripple_color';
 export const REACTION_EMOJIS = {
     thumbs_up: '👍',
     thumbs_down: '👎',
@@ -18,6 +19,9 @@ export function MessageReaction({ reaction, onLongPress, message, conversationId
         conversation_id: conversationId,
         message,
     });
+    const { colors } = useTheme();
+    const baseRippleColor = reaction.mine ? colors.interaction : colors.fillColorNeutral060;
+    const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor });
     if (!reaction.count)
         return null;
     if (!REACTION_EMOJIS[reaction.value])
@@ -25,7 +29,7 @@ export function MessageReaction({ reaction, onLongPress, message, conversationId
     const handlePress = () => {
         handleReactionToggle({ value: reaction.value, mine: !!reaction.mine });
     };
-    return (<PlatformPressable key={reaction.value} style={styles.reaction} onLongPress={() => onLongPress(reaction)} onPress={handlePress}>
+    return (<PlatformPressable key={reaction.value} style={styles.reaction} onLongPress={() => onLongPress(reaction)} onPress={handlePress} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}>
       <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
       <Text style={styles.reactionText}>{reaction.count}</Text>
     </PlatformPressable>);
@@ -50,6 +54,7 @@ export const useReactionStyles = ({ mine }) => {
             borderColor: mine ? activeBorderColor : 'transparent',
             backgroundColor: mine ? activeBackgroundColor : colors.fillColorNeutral060,
             borderRadius: 16,
+            overflow: 'hidden',
             paddingVertical: 4,
             paddingHorizontal: 8,
             flexDirection: 'row',

package/build/components/conversation/message_reaction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message_reaction.js","sourceRoot":"","sources":["../../../src/components/conversation/message_reaction.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,aAAa,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAA;~~AAIlF~~,MAAM,CAAC,MAAM,eAAe,GAAmD;IAC7E,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;IACjB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;CACZ,CAAA;AAED,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,WAAW,EACX,OAAO,EACP,cAAc,GAMf;IACC,MAAM,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IAC1C,MAAM,EAAE,oBAAoB,EAAE,GAAG,wBAAwB,CAAC;QACxD,eAAe,EAAE,cAAc;QAC/B,OAAO;KACR,CAAC,CAAA;IAEF,IAAI,CAAC,QAAQ,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAChC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEjD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,oBAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA;IACxE,CAAC,CAAA;IAED,OAAO,CACL,CAAC,iBAAiB,CAChB,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACpB,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CACvB,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CACzC,OAAO,CAAC,CAAC,WAAW,CAAC,~~CAErB~~;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAC1E;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,CAC1D;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;IAC9D,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC;aACrC,GAAG,EAAE;aACL,SAAS,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aAC3C,MAAM,EAAE,CAAA;IACb,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IACrC,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,OAAO,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC;aACrC,GAAG,EAAE;aACL,SAAS,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aAC3C,MAAM,EAAE,CAAA;IACb,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAErC,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,QAAQ,EAAE;YACR,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,aAAa;YACrD,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB;YAC1E,YAAY,EAAE,EAAE;YAChB,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,CAAC;YACpB,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;SACP;QACD,aAAa,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE;QAC9C,YAAY,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,uBAAuB,EAAE;KACtE,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport colorFunction from 'color'\nimport React, { useMemo } from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Text } from '../../components/display'\nimport { useTheme } from '../../hooks'\nimport { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggle'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageResource } from '../../types'\n\nexport const REACTION_EMOJIS: Record<ReactionCountResource['value'], string> = {\n thumbs_up: '👍',\n thumbs_down: '👎',\n pray: '🙏',\n laugh: '😂',\n heart: '❤️',\n}\n\nexport function MessageReaction({\n reaction,\n onLongPress,\n message,\n conversationId,\n}: {\n reaction: ReactionCountResource\n onLongPress: (_reaction: ReactionCountResource) => void\n message: MessageResource\n conversationId: number\n}) {\n const styles = useReactionStyles(reaction)\n const { handleReactionToggle } = useMessageReactionToggle({\n conversation_id: conversationId,\n message,\n })\n\n if (!reaction.count) return null\n if (!REACTION_EMOJIS[reaction.value]) return null\n\n const handlePress = () => {\n handleReactionToggle({ value: reaction.value, mine: !!reaction.mine })\n }\n\n return (\n <PlatformPressable\n key={reaction.value}\n style={styles.reaction}\n onLongPress={() => onLongPress(reaction)}\n onPress={handlePress}\n >\n <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n <Text style={styles.reactionText}>{reaction.count}</Text>\n </PlatformPressable>\n )\n}\n\nexport const useReactionStyles = ({ mine }: { mine: number }) => {\n const { colors } = useTheme()\n const activeBorderColor = useMemo(() => {\n return colorFunction(colors.interaction)\n .hsl()\n .lightness(colors.name === 'dark' ? 20 : 80)\n .string()\n }, [colors.interaction, colors.name])\n const activeBackgroundColor = useMemo(() => {\n return colorFunction(colors.interaction)\n .hsl()\n .lightness(colors.name === 'dark' ? 12 : 92)\n .string()\n }, [colors.interaction, colors.name])\n\n return StyleSheet.create({\n reaction: {\n borderWidth: 1,\n borderColor: mine ? activeBorderColor : 'transparent',\n backgroundColor: mine ? activeBackgroundColor : colors.fillColorNeutral060,\n borderRadius: 16,\n paddingVertical: 4,\n paddingHorizontal: 8,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 2,\n },\n reactionEmoji: { fontSize: 12, paddingTop: 0 },\n reactionText: { fontSize: 12, color: colors.textColorDefaultPrimary },\n })\n}\n"]}
1	+ {"version":3,"file":"message_reaction.js","sourceRoot":"","sources":["../../../src/components/conversation/message_reaction.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport colorFunction from 'color'\nimport React, { useMemo } from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Text } from '../../components/display'\nimport { useTheme } from '../../hooks'\nimport { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggle'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageResource } from '../../types'\nimport { useCreateAndroidRippleColor } from '../../hooks/use_create_android_ripple_color'\n\nexport const REACTION_EMOJIS: Record<ReactionCountResource['value'], string> = {\n thumbs_up: '👍',\n thumbs_down: '👎',\n pray: '🙏',\n laugh: '😂',\n heart: '❤️',\n}\n\nexport function MessageReaction({\n reaction,\n onLongPress,\n message,\n conversationId,\n}: {\n reaction: ReactionCountResource\n onLongPress: (_reaction: ReactionCountResource) => void\n message: MessageResource\n conversationId: number\n}) {\n const styles = useReactionStyles(reaction)\n const { handleReactionToggle } = useMessageReactionToggle({\n conversation_id: conversationId,\n message,\n })\n\n const { colors } = useTheme()\n const baseRippleColor = reaction.mine ? colors.interaction : colors.fillColorNeutral060\n const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })\n\n if (!reaction.count) return null\n if (!REACTION_EMOJIS[reaction.value]) return null\n\n const handlePress = () => {\n handleReactionToggle({ value: reaction.value, mine: !!reaction.mine })\n }\n\n return (\n <PlatformPressable\n key={reaction.value}\n style={styles.reaction}\n onLongPress={() => onLongPress(reaction)}\n onPress={handlePress}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n >\n <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n <Text style={styles.reactionText}>{reaction.count}</Text>\n </PlatformPressable>\n )\n}\n\nexport const useReactionStyles = ({ mine }: { mine: number }) => {\n const { colors } = useTheme()\n const activeBorderColor = useMemo(() => {\n return colorFunction(colors.interaction)\n .hsl()\n .lightness(colors.name === 'dark' ? 20 : 80)\n .string()\n }, [colors.interaction, colors.name])\n const activeBackgroundColor = useMemo(() => {\n return colorFunction(colors.interaction)\n .hsl()\n .lightness(colors.name === 'dark' ? 12 : 92)\n .string()\n }, [colors.interaction, colors.name])\n\n return StyleSheet.create({\n reaction: {\n borderWidth: 1,\n borderColor: mine ? activeBorderColor : 'transparent',\n backgroundColor: mine ? activeBackgroundColor : colors.fillColorNeutral060,\n borderRadius: 16,\n overflow: 'hidden',\n paddingVertical: 4,\n paddingHorizontal: 8,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 2,\n },\n reactionEmoji: { fontSize: 12, paddingTop: 0 },\n reactionText: { fontSize: 12, color: colors.textColorDefaultPrimary },\n })\n}\n"]}

package/build/components/primitive/form_sheet.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import React, { ReactNode } from 'react';
-import { type AccessibilityRole } from 'react-native';
+import { type AccessibilityRole, type StyleProp, type ViewStyle } from 'react-native';
 import { IconString } from '../display';
 /**
  * Screen options for the formsheet's NativeStackNavigation route
@@ -20,8 +20,10 @@ export default _default;
 export type { FormSheetRootProps, FormSheetActionProps, FormSheetHeaderProps };
 interface FormSheetRootProps {
     children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
 }
-export declare function FormSheetRoot({ children }: FormSheetRootProps): React.JSX.Element;
+export declare function FormSheetRoot({ children, style, contentStyle }: FormSheetRootProps): React.JSX.Element;
 export declare namespace FormSheetRoot {
     var displayName: string;
 }

package/build/components/primitive/form_sheet.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form_sheet.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/form_sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAKL,KAAK,iBAAiB,~~EACvB~~,MAAM,cAAc,CAAA;AAIrB,OAAO,EAAiB,UAAU,EAAQ,MAAM,YAAY,CAAA;AAM5D;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,mDAInC,4BAA4B,KAAQ,4BAQrC,CAAA;AAQF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAClC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAA;IACtC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAA;CACvC,CAAA;wBAE2B,mBAAmB;AAA/C,wBAA+C;AAC/C,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA;AAM9E,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAA;~~CACpB~~;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,~~qBAS7D~~;yBATe,aAAa;;;AA8B7B,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,SAAS,CAAA;IAC3B,aAAa,CAAC,EAAE,SAAS,CAAA;CAC1B;AA0BD,QAAA,MAAM,6BAA6B;;;CAGzB,CAAA;AAEV,KAAK,8BAA8B,GACjC,CAAC,OAAO,6BAA6B,CAAC,CAAC,MAAM,OAAO,6BAA6B,CAAC,CAAA;AAEpF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,UAAU,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,UAAU,CAAC,EAAE,8BAA8B,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
1	+ {"version":3,"file":"form_sheet.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/form_sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AAIrB,OAAO,EAAiB,UAAU,EAAQ,MAAM,YAAY,CAAA;AAM5D;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,mDAInC,4BAA4B,KAAQ,4BAQrC,CAAA;AAQF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAClC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAA;IACtC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAA;CACvC,CAAA;wBAE2B,mBAAmB;AAA/C,wBAA+C;AAC/C,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA;AAM9E,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CACpC;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,kBAAkB,qBASlF;yBATe,aAAa;;;AA8B7B,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,SAAS,CAAA;IAC3B,aAAa,CAAC,EAAE,SAAS,CAAA;CAC1B;AA0BD,QAAA,MAAM,6BAA6B;;;CAGzB,CAAA;AAEV,KAAK,8BAA8B,GACjC,CAAC,OAAO,6BAA6B,CAAC,CAAC,MAAM,OAAO,6BAA6B,CAAC,CAAA;AAEpF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,UAAU,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,UAAU,CAAC,EAAE,8BAA8B,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/build/components/primitive/form_sheet.js CHANGED Viewed

@@ -29,11 +29,11 @@ const FormSheet = {
     Header: FormSheetHeader,
 };
 export default FormSheet;
-export function FormSheetRoot({ children }) {
+export function FormSheetRoot({ children, style, contentStyle }) {
     const styles = useStyles();
-    return (<View style={styles.container} collapsable={false}>
+    return (<View style={[styles.container, style]} collapsable={false}>
       <AndroidSheetGrabber />
-      <View style={styles.content}>{children}</View>
+      <View style={[styles.content, contentStyle]}>{children}</View>
     </View>);
 }
 FormSheetRoot.displayName = 'FormSheet.Root';

package/build/components/primitive/form_sheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form_sheet.js","sourceRoot":"","sources":["../../../src/components/primitive/form_sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport React, { ReactNode } from 'react'\nimport {\n Platform,\n StyleSheet,\n View,\n useWindowDimensions,\n type AccessibilityRole,\n} from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../../hooks'\nimport { PlatformPressable, useHeaderHeight } from '@react-navigation/elements'\nimport { Heading, Icon, IconString, Text } from '../display'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\n/*\n Screen options for the formsheet's NativeStackNavigation route\n * @param {string} options.headerTitle - Doesn't show in UI but good to have for semantic reasons.\n * @param {number[]} [options.sheetAllowedDetents] - Controls the height increments the sheet grows to. To prevent bugs in Android, do not specify more then two values and use [0.94] instead of [1] to go full screen.\n * @param {NativeStackNavigationOptions} [options.rest] - Adds or overrides any valid NativeStackNavigationOptions\n * @returns {NativeStackNavigationOptions} Merged NativeStackNavigationOptions\n */\nexport const getFormSheetScreenOptions = ({\n headerTitle,\n sheetAllowedDetents = [0.25],\n ...rest\n}: NativeStackNavigationOptions = {}): NativeStackNavigationOptions => ({\n presentation: 'formSheet',\n headerShown: false,\n sheetAllowedDetents,\n sheetCornerRadius: 16,\n sheetGrabberVisible: true,\n headerTitle,\n ...rest,\n})\n\nconst FormSheet = {\n Root: FormSheetRoot,\n Action: FormSheetAction,\n Header: FormSheetHeader,\n} as const\n\ntype FormSheetComponents = {\n Root: React.FC<FormSheetRootProps>\n Action: React.FC<FormSheetActionProps>\n Header: React.FC<FormSheetHeaderProps>\n}\n\nexport default FormSheet as FormSheetComponents\nexport type { FormSheetRootProps, FormSheetActionProps, FormSheetHeaderProps }\n\n// ====================================\n// ====== ActionsFormSheetRoot ========\n// ====================================\n\ninterface FormSheetRootProps {\n children: ReactNode\n}\n\nexport function FormSheetRoot({ children }: FormSheetRootProps) {\n const styles = useStyles()\n\n return (\n <View style={styles.container} collapsable={false}>\n <AndroidSheetGrabber />\n <View style={styles.content}>{children}</View>\n </View>\n )\n}\n\nFormSheetRoot.displayName = 'FormSheet.Root'\n\n// ====================================\n// ====== AndroidSheetGrabber =========\n// ====================================\n\nfunction AndroidSheetGrabber() {\n const styles = useStyles()\n\n return Platform.select({\n android: <View style={styles.androidSheetGrabber} />,\n ios: null,\n })\n}\n\n// ====================================\n// ====== FormSheetHeader =============\n// ====================================\n\ninterface FormSheetHeaderProps {\n title: string\n secondaryButton?: ReactNode\n primaryButton?: ReactNode\n}\nfunction FormSheetHeader({ title, secondaryButton, primaryButton }: FormSheetHeaderProps) {\n const styles = useStyles()\n const hasActions = Boolean(secondaryButton) \|\| Boolean(primaryButton)\n\n return (\n <View style={styles.header}>\n <Heading variant=\"h3\" style={styles.headerTitle}>\n {title}\n </Heading>\n {hasActions && (\n <View style={styles.headerActions}>\n {secondaryButton}\n {primaryButton}\n </View>\n )}\n </View>\n )\n}\n\nFormSheetHeader.displayName = 'FormSheet.Header'\n\n// ====================================\n// ====== ActionsFormSheetAction ======\n// ====================================\n\nconst FORM_SHEET_ACTION_APPEARANCES = {\n neutral: 'neutral',\n danger: 'danger',\n} as const\n\ntype FormSheetActionAppearanceUnion =\n (typeof FORM_SHEET_ACTION_APPEARANCES)[keyof typeof FORM_SHEET_ACTION_APPEARANCES]\n\ninterface FormSheetActionProps {\n title: string\n iconName: IconString\n onPress: () => void\n accessibilityLabel?: string\n accessibilityHint?: string\n accessibilityRole?: AccessibilityRole\n appearance?: FormSheetActionAppearanceUnion\n disabled?: boolean\n}\n\nfunction FormSheetAction({\n title,\n iconName,\n onPress,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'button',\n appearance = 'neutral',\n disabled = false,\n}: FormSheetActionProps) {\n const styles = useStyles({ appearance })\n\n return (\n <PlatformPressable\n onPress={onPress}\n accessibilityLabel={accessibilityLabel}\n accessibilityHint={accessibilityHint}\n accessibilityRole={accessibilityRole}\n style={styles.actionPressable}\n disabled={disabled}\n >\n <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />\n <Text style={styles.actionTitle}>{title}</Text>\n </PlatformPressable>\n )\n}\n\nFormSheetAction.displayName = 'FormSheet.Action'\n\n// ==================================\n// ====== Styles ====================\n// ==================================\n\ninterface Styles {\n appearance?: FormSheetActionAppearanceUnion\n}\n\nconst useStyles = ({ appearance = 'neutral' }: Styles = {}) => {\n const { colors } = useTheme()\n const { height } = useWindowDimensions()\n const { bottom, top } = useSafeAreaInsets()\n const headerHeight = useHeaderHeight()\n\n const containerHeight = Platform.select({\n ios: height - top - headerHeight,\n default: null,\n })\n\n const appearanceColorsMap = {\n neutral: {\n iconColor: colors.iconColorDefaultPrimary,\n textColor: colors.textColorDefaultPrimary,\n },\n danger: {\n iconColor: colors.fillColorStatusErrorMedium,\n textColor: colors.fillColorStatusErrorMedium,\n },\n }\n\n return StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'flex-start',\n paddingBottom: bottom,\n width: '100%',\n backgroundColor: colors.fillColorNeutral100Inverted,\n height: containerHeight,\n },\n androidSheetGrabber: {\n marginTop: 5,\n width: 34,\n height: 5,\n backgroundColor: colors.fillColorNeutral040,\n borderRadius: 100,\n alignSelf: 'center',\n },\n content: {\n paddingTop: Platform.select({ android: 16, ios: 20 }),\n },\n header: {\n backgroundColor: colors.fillColorNeutral100Inverted,\n paddingHorizontal: 16,\n paddingBottom: 16,\n gap: 16,\n borderBottomWidth: 1,\n borderBottomColor: colors.borderColorDefaultBase,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n headerTitle: {\n textAlign: 'left',\n },\n headerActions: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 16,\n },\n actionPressable: {\n flexDirection: 'row',\n alignItems: 'center',\n paddingVertical: 12,\n paddingHorizontal: 16,\n gap: 8,\n },\n actionIcon: {\n color: appearanceColorsMap[appearance].iconColor,\n },\n actionTitle: {\n color: appearanceColorsMap[appearance].textColor,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"form_sheet.js","sourceRoot":"","sources":["../../../src/components/primitive/form_sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport React, { ReactNode } from 'react'\nimport {\n Platform,\n StyleSheet,\n View,\n useWindowDimensions,\n type AccessibilityRole,\n type StyleProp,\n type ViewStyle,\n} from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../../hooks'\nimport { PlatformPressable, useHeaderHeight } from '@react-navigation/elements'\nimport { Heading, Icon, IconString, Text } from '../display'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\n/*\n Screen options for the formsheet's NativeStackNavigation route\n * @param {string} options.headerTitle - Doesn't show in UI but good to have for semantic reasons.\n * @param {number[]} [options.sheetAllowedDetents] - Controls the height increments the sheet grows to. To prevent bugs in Android, do not specify more then two values and use [0.94] instead of [1] to go full screen.\n * @param {NativeStackNavigationOptions} [options.rest] - Adds or overrides any valid NativeStackNavigationOptions\n * @returns {NativeStackNavigationOptions} Merged NativeStackNavigationOptions\n */\nexport const getFormSheetScreenOptions = ({\n headerTitle,\n sheetAllowedDetents = [0.25],\n ...rest\n}: NativeStackNavigationOptions = {}): NativeStackNavigationOptions => ({\n presentation: 'formSheet',\n headerShown: false,\n sheetAllowedDetents,\n sheetCornerRadius: 16,\n sheetGrabberVisible: true,\n headerTitle,\n ...rest,\n})\n\nconst FormSheet = {\n Root: FormSheetRoot,\n Action: FormSheetAction,\n Header: FormSheetHeader,\n} as const\n\ntype FormSheetComponents = {\n Root: React.FC<FormSheetRootProps>\n Action: React.FC<FormSheetActionProps>\n Header: React.FC<FormSheetHeaderProps>\n}\n\nexport default FormSheet as FormSheetComponents\nexport type { FormSheetRootProps, FormSheetActionProps, FormSheetHeaderProps }\n\n// ====================================\n// ====== ActionsFormSheetRoot ========\n// ====================================\n\ninterface FormSheetRootProps {\n children: ReactNode\n style?: StyleProp<ViewStyle>\n contentStyle?: StyleProp<ViewStyle>\n}\n\nexport function FormSheetRoot({ children, style, contentStyle }: FormSheetRootProps) {\n const styles = useStyles()\n\n return (\n <View style={[styles.container, style]} collapsable={false}>\n <AndroidSheetGrabber />\n <View style={[styles.content, contentStyle]}>{children}</View>\n </View>\n )\n}\n\nFormSheetRoot.displayName = 'FormSheet.Root'\n\n// ====================================\n// ====== AndroidSheetGrabber =========\n// ====================================\n\nfunction AndroidSheetGrabber() {\n const styles = useStyles()\n\n return Platform.select({\n android: <View style={styles.androidSheetGrabber} />,\n ios: null,\n })\n}\n\n// ====================================\n// ====== FormSheetHeader =============\n// ====================================\n\ninterface FormSheetHeaderProps {\n title: string\n secondaryButton?: ReactNode\n primaryButton?: ReactNode\n}\nfunction FormSheetHeader({ title, secondaryButton, primaryButton }: FormSheetHeaderProps) {\n const styles = useStyles()\n const hasActions = Boolean(secondaryButton) \|\| Boolean(primaryButton)\n\n return (\n <View style={styles.header}>\n <Heading variant=\"h3\" style={styles.headerTitle}>\n {title}\n </Heading>\n {hasActions && (\n <View style={styles.headerActions}>\n {secondaryButton}\n {primaryButton}\n </View>\n )}\n </View>\n )\n}\n\nFormSheetHeader.displayName = 'FormSheet.Header'\n\n// ====================================\n// ====== ActionsFormSheetAction ======\n// ====================================\n\nconst FORM_SHEET_ACTION_APPEARANCES = {\n neutral: 'neutral',\n danger: 'danger',\n} as const\n\ntype FormSheetActionAppearanceUnion =\n (typeof FORM_SHEET_ACTION_APPEARANCES)[keyof typeof FORM_SHEET_ACTION_APPEARANCES]\n\ninterface FormSheetActionProps {\n title: string\n iconName: IconString\n onPress: () => void\n accessibilityLabel?: string\n accessibilityHint?: string\n accessibilityRole?: AccessibilityRole\n appearance?: FormSheetActionAppearanceUnion\n disabled?: boolean\n}\n\nfunction FormSheetAction({\n title,\n iconName,\n onPress,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'button',\n appearance = 'neutral',\n disabled = false,\n}: FormSheetActionProps) {\n const styles = useStyles({ appearance })\n\n return (\n <PlatformPressable\n onPress={onPress}\n accessibilityLabel={accessibilityLabel}\n accessibilityHint={accessibilityHint}\n accessibilityRole={accessibilityRole}\n style={styles.actionPressable}\n disabled={disabled}\n >\n <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />\n <Text style={styles.actionTitle}>{title}</Text>\n </PlatformPressable>\n )\n}\n\nFormSheetAction.displayName = 'FormSheet.Action'\n\n// ==================================\n// ====== Styles ====================\n// ==================================\n\ninterface Styles {\n appearance?: FormSheetActionAppearanceUnion\n}\n\nconst useStyles = ({ appearance = 'neutral' }: Styles = {}) => {\n const { colors } = useTheme()\n const { height } = useWindowDimensions()\n const { bottom, top } = useSafeAreaInsets()\n const headerHeight = useHeaderHeight()\n\n const containerHeight = Platform.select({\n ios: height - top - headerHeight,\n default: null,\n })\n\n const appearanceColorsMap = {\n neutral: {\n iconColor: colors.iconColorDefaultPrimary,\n textColor: colors.textColorDefaultPrimary,\n },\n danger: {\n iconColor: colors.fillColorStatusErrorMedium,\n textColor: colors.fillColorStatusErrorMedium,\n },\n }\n\n return StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'flex-start',\n paddingBottom: bottom,\n width: '100%',\n backgroundColor: colors.fillColorNeutral100Inverted,\n height: containerHeight,\n },\n androidSheetGrabber: {\n marginTop: 5,\n width: 34,\n height: 5,\n backgroundColor: colors.fillColorNeutral040,\n borderRadius: 100,\n alignSelf: 'center',\n },\n content: {\n paddingTop: Platform.select({ android: 16, ios: 20 }),\n },\n header: {\n backgroundColor: colors.fillColorNeutral100Inverted,\n paddingHorizontal: 16,\n paddingBottom: 16,\n gap: 16,\n borderBottomWidth: 1,\n borderBottomColor: colors.borderColorDefaultBase,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n headerTitle: {\n textAlign: 'left',\n },\n headerActions: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 16,\n },\n actionPressable: {\n flexDirection: 'row',\n alignItems: 'center',\n paddingVertical: 12,\n paddingHorizontal: 16,\n gap: 8,\n },\n actionIcon: {\n color: appearanceColorsMap[appearance].iconColor,\n },\n actionTitle: {\n color: appearanceColorsMap[appearance].textColor,\n },\n })\n}\n"]}

package/build/screens/message_actions_screen.js CHANGED Viewed

@@ -5,7 +5,7 @@ import React, { useCallback } from 'react';
 import { Alert, Platform, StyleSheet, View } from 'react-native';
 import { Text } from '../components';
 import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction';
-import { useTheme } from '../hooks';
+import { useCreateAndroidRippleColor, useFontScale, useTheme } from '../hooks';
 import { useApiClient } from '../hooks/use_api_client';
 import { useConversationMessages } from '../hooks/use_conversation_messages';
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle';
@@ -105,14 +105,18 @@ export function MessageActionsScreen({ route }) {
 const Reaction = ({ reaction, onPress, }) => {
     const styles = useStyles();
     const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 });
-    return (<PlatformPressable key={reaction.value} style={[reactionStyles.reaction, styles.reaction]} onPress={onPress}>
+    const { colors } = useTheme();
+    const baseRippleColor = reaction.mine ? colors.interaction : colors.fillColorNeutral060;
+    const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor });
+    return (<PlatformPressable key={reaction.value} style={[reactionStyles.reaction, styles.reaction]} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} onPress={onPress}>
       <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
     </PlatformPressable>);
 };
 const useStyles = () => {
     const { colors } = useTheme();
+    const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 });
     const btnBorderWidth = 1;
-    const baseSize = 44;
+    const baseSize = 44 * fontScale;
     const reactionBtnSize = Platform.select({
         ios: baseSize,
         android: baseSize + btnBorderWidth * 2,
@@ -134,6 +138,7 @@ const useStyles = () => {
             borderWidth: btnBorderWidth,
             borderRadius: 32,
             justifyContent: 'center',
+            overflow: 'hidden',
         },
         reactionEmoji: {
             fontSize: 24,

package/build/screens/message_actions_screen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message_actions_screen.js","sourceRoot":"","sources":["../../src/screens/message_actions_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport { useMutation } from '@tanstack/react-query'\nimport React, { useCallback } from 'react'\nimport { Alert, Platform, StyleSheet, View } from 'react-native'\nimport { Text } from '../components'\nimport { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'\nimport { useTheme } from '../hooks'\nimport { useApiClient } from '../hooks/use_api_client'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\nimport { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport { Clipboard } from '../utils/native_adapters'\nimport { isNil, omitBy } from 'lodash'\nimport FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'\n\nexport const MessageActionsScreenOptions = getFormSheetScreenOptions({\n sheetAllowedDetents: [0.5],\n headerTitle: 'Message actions',\n})\n\nexport type MessageActionsScreenProps = StaticScreenProps<{\n message_id: string\n conversation_id: number\n canDeleteNonAuthoredMessages?: boolean\n}>\n\nexport function MessageActionsScreen({ route }: MessageActionsScreenProps) {\n const navigation = useNavigation()\n const { conversation_id, message_id, canDeleteNonAuthoredMessages } = route.params\n\n const apiClient = useApiClient()\n const styles = useStyles()\n\n const { messages, refetch } = useConversationMessages(\n { conversation_id },\n { refetchOnMount: false }\n )\n const message = messages.find(m => m.id === message_id)\n\n if (!message) fail('Message not found')\n\n const myReactions = message?.reactionCounts\n .filter(reaction => reaction.mine)\n .map(reaction => reaction.value)\n\n const availableReactions = Object.entries(REACTION_EMOJIS).map(([value, emoji]) => {\n return {\n value: value as ReactionCountResource['value'],\n emoji,\n mine: myReactions?.includes(value as ReactionCountResource['value']),\n }\n })\n\n const attachmentForCopy = (): string => {\n const giphyTitleLink = message?.attachments.find(\n attachment => attachment.type === 'giphy'\n )?.titleLink\n\n if (giphyTitleLink) return giphyTitleLink\n return ''\n }\n\n const handleCopyPress = () => {\n Clipboard.setStringAsync(message?.text \|\| attachmentForCopy() \|\| '')\n navigation.goBack()\n }\n\n const { handleReactionToggle, isPending } = useMessageReactionToggle({\n conversation_id,\n message,\n onSuccess: () => navigation.goBack(),\n })\n\n const deleteMessage = useCallback(() => {\n const url = `/me/conversations/${conversation_id}/messages/${message_id}/`\n\n return apiClient.chat.delete({ url })\n }, [apiClient, conversation_id, message_id])\n\n const { mutate: handleDeleteMessage } = useMutation({\n mutationFn: deleteMessage,\n onSuccess: () => {\n refetch()\n navigation.goBack()\n },\n onError: () => {\n Alert.alert('Oops', 'We were unable to delete this message. Please try again.')\n },\n })\n\n const handleDeleteConfirm = useCallback(() => {\n Alert.alert('Delete message', 'Are you sure you want to permanently delete this message?', [\n { text: 'Cancel', style: 'cancel' },\n { text: 'Delete', style: 'destructive', onPress: () => handleDeleteMessage() },\n ])\n }, [handleDeleteMessage])\n\n const handleEditPress = useCallback(() => {\n const state = navigation.getState?.()\n const targetRoute = state?.routes?.find(r => r.name === 'Conversation')\n const params = omitBy(\n {\n ...(targetRoute?.params \|\| {}),\n conversation_id,\n editing_message_id: message_id,\n },\n isNil\n )\n navigation.dispatch(StackActions.popTo('Conversation', params))\n }, [navigation, conversation_id, message_id])\n\n const handleViewReadReceiptsPress = useCallback(() => {\n const params = omitBy(\n {\n conversation_id,\n message_id,\n },\n isNil\n )\n navigation.dispatch(StackActions.popTo('MessageReadReceipts', params))\n }, [navigation, conversation_id, message_id])\n\n return (\n <FormSheet.Root>\n <View style={styles.reactionList}>\n {availableReactions.map((reaction, index) => (\n <Reaction\n key={index}\n reaction={reaction}\n onPress={() =>\n handleReactionToggle({\n value: reaction.value,\n mine: reaction.mine,\n })\n }\n />\n ))}\n </View>\n <View style={styles.actions}>\n <FormSheet.Action\n onPress={handleCopyPress}\n title=\"Copy text\"\n iconName=\"services.fileCopy\"\n accessibilityHint=\"Copies text and links to clipboard\"\n />\n {message?.mine && (\n <FormSheet.Action\n onPress={() => handleEditPress()}\n title=\"Edit message\"\n iconName=\"accounts.editor\"\n accessibilityHint=\"Opens existing text in the message form input.\"\n />\n )}\n {message?.mine && (\n <FormSheet.Action\n onPress={() => handleViewReadReceiptsPress()}\n title=\"View read receipts\"\n iconName=\"general.checkPerson\"\n accessibilityHint=\"Opens a modal with a list of people who read your message.\"\n />\n )}\n {(message?.mine \|\| canDeleteNonAuthoredMessages) && (\n <FormSheet.Action\n onPress={() => handleDeleteConfirm()}\n title=\"Delete message\"\n iconName=\"publishing.trash\"\n appearance=\"danger\"\n disabled={isPending}\n accessibilityHint=\"Opens a confirmation alert to delete this message permanently.\"\n />\n )}\n </View>\n </FormSheet.Root>\n )\n}\n\nconst Reaction = ({\n reaction,\n onPress,\n}: {\n reaction: { value: ReactionCountResource['value']; emoji: string; mine: boolean \| undefined }\n onPress: () => void\n}) => {\n const styles = useStyles()\n const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })\n\n return (\n <PlatformPressable\n key={reaction.value}\n style={[reactionStyles.reaction, styles.reaction]}\n onPress={onPress}\n >\n <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n </PlatformPressable>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n const btnBorderWidth = 1\n const baseSize = 44\n const reactionBtnSize = Platform.select({\n ios: baseSize,\n android: baseSize + btnBorderWidth * 2,\n })\n\n return StyleSheet.create({\n reactionList: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n gap: 16,\n paddingTop: 8,\n paddingBottom: 16,\n borderBottomColor: colors.borderColorDefaultBase,\n borderBottomWidth: 1,\n },\n reaction: {\n height: reactionBtnSize,\n width: reactionBtnSize,\n borderWidth: btnBorderWidth,\n borderRadius: 32,\n justifyContent: 'center',\n },\n reactionEmoji: {\n fontSize: 24,\n },\n actions: {\n paddingTop: 4,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"message_actions_screen.js","sourceRoot":"","sources":["../../src/screens/message_actions_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport { useMutation } from '@tanstack/react-query'\nimport React, { useCallback } from 'react'\nimport { Alert, Platform, StyleSheet, View } from 'react-native'\nimport { Text } from '../components'\nimport { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'\nimport { useCreateAndroidRippleColor, useFontScale, useTheme } from '../hooks'\nimport { useApiClient } from '../hooks/use_api_client'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\nimport { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport { Clipboard } from '../utils/native_adapters'\nimport { isNil, omitBy } from 'lodash'\nimport FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'\n\nexport const MessageActionsScreenOptions = getFormSheetScreenOptions({\n sheetAllowedDetents: [0.5],\n headerTitle: 'Message actions',\n})\n\nexport type MessageActionsScreenProps = StaticScreenProps<{\n message_id: string\n conversation_id: number\n canDeleteNonAuthoredMessages?: boolean\n}>\n\nexport function MessageActionsScreen({ route }: MessageActionsScreenProps) {\n const navigation = useNavigation()\n const { conversation_id, message_id, canDeleteNonAuthoredMessages } = route.params\n\n const apiClient = useApiClient()\n const styles = useStyles()\n\n const { messages, refetch } = useConversationMessages(\n { conversation_id },\n { refetchOnMount: false }\n )\n const message = messages.find(m => m.id === message_id)\n\n if (!message) fail('Message not found')\n\n const myReactions = message?.reactionCounts\n .filter(reaction => reaction.mine)\n .map(reaction => reaction.value)\n\n const availableReactions = Object.entries(REACTION_EMOJIS).map(([value, emoji]) => {\n return {\n value: value as ReactionCountResource['value'],\n emoji,\n mine: myReactions?.includes(value as ReactionCountResource['value']),\n }\n })\n\n const attachmentForCopy = (): string => {\n const giphyTitleLink = message?.attachments.find(\n attachment => attachment.type === 'giphy'\n )?.titleLink\n\n if (giphyTitleLink) return giphyTitleLink\n return ''\n }\n\n const handleCopyPress = () => {\n Clipboard.setStringAsync(message?.text \|\| attachmentForCopy() \|\| '')\n navigation.goBack()\n }\n\n const { handleReactionToggle, isPending } = useMessageReactionToggle({\n conversation_id,\n message,\n onSuccess: () => navigation.goBack(),\n })\n\n const deleteMessage = useCallback(() => {\n const url = `/me/conversations/${conversation_id}/messages/${message_id}/`\n\n return apiClient.chat.delete({ url })\n }, [apiClient, conversation_id, message_id])\n\n const { mutate: handleDeleteMessage } = useMutation({\n mutationFn: deleteMessage,\n onSuccess: () => {\n refetch()\n navigation.goBack()\n },\n onError: () => {\n Alert.alert('Oops', 'We were unable to delete this message. Please try again.')\n },\n })\n\n const handleDeleteConfirm = useCallback(() => {\n Alert.alert('Delete message', 'Are you sure you want to permanently delete this message?', [\n { text: 'Cancel', style: 'cancel' },\n { text: 'Delete', style: 'destructive', onPress: () => handleDeleteMessage() },\n ])\n }, [handleDeleteMessage])\n\n const handleEditPress = useCallback(() => {\n const state = navigation.getState?.()\n const targetRoute = state?.routes?.find(r => r.name === 'Conversation')\n const params = omitBy(\n {\n ...(targetRoute?.params \|\| {}),\n conversation_id,\n editing_message_id: message_id,\n },\n isNil\n )\n navigation.dispatch(StackActions.popTo('Conversation', params))\n }, [navigation, conversation_id, message_id])\n\n const handleViewReadReceiptsPress = useCallback(() => {\n const params = omitBy(\n {\n conversation_id,\n message_id,\n },\n isNil\n )\n navigation.dispatch(StackActions.popTo('MessageReadReceipts', params))\n }, [navigation, conversation_id, message_id])\n\n return (\n <FormSheet.Root>\n <View style={styles.reactionList}>\n {availableReactions.map((reaction, index) => (\n <Reaction\n key={index}\n reaction={reaction}\n onPress={() =>\n handleReactionToggle({\n value: reaction.value,\n mine: reaction.mine,\n })\n }\n />\n ))}\n </View>\n <View style={styles.actions}>\n <FormSheet.Action\n onPress={handleCopyPress}\n title=\"Copy text\"\n iconName=\"services.fileCopy\"\n accessibilityHint=\"Copies text and links to clipboard\"\n />\n {message?.mine && (\n <FormSheet.Action\n onPress={() => handleEditPress()}\n title=\"Edit message\"\n iconName=\"accounts.editor\"\n accessibilityHint=\"Opens existing text in the message form input.\"\n />\n )}\n {message?.mine && (\n <FormSheet.Action\n onPress={() => handleViewReadReceiptsPress()}\n title=\"View read receipts\"\n iconName=\"general.checkPerson\"\n accessibilityHint=\"Opens a modal with a list of people who read your message.\"\n />\n )}\n {(message?.mine \|\| canDeleteNonAuthoredMessages) && (\n <FormSheet.Action\n onPress={() => handleDeleteConfirm()}\n title=\"Delete message\"\n iconName=\"publishing.trash\"\n appearance=\"danger\"\n disabled={isPending}\n accessibilityHint=\"Opens a confirmation alert to delete this message permanently.\"\n />\n )}\n </View>\n </FormSheet.Root>\n )\n}\n\nconst Reaction = ({\n reaction,\n onPress,\n}: {\n reaction: { value: ReactionCountResource['value']; emoji: string; mine: boolean \| undefined }\n onPress: () => void\n}) => {\n const styles = useStyles()\n const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })\n\n const { colors } = useTheme()\n const baseRippleColor = reaction.mine ? colors.interaction : colors.fillColorNeutral060\n const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })\n\n return (\n <PlatformPressable\n key={reaction.value}\n style={[reactionStyles.reaction, styles.reaction]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n onPress={onPress}\n >\n <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n </PlatformPressable>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })\n\n const btnBorderWidth = 1\n const baseSize = 44 * fontScale\n const reactionBtnSize = Platform.select({\n ios: baseSize,\n android: baseSize + btnBorderWidth * 2,\n })\n\n return StyleSheet.create({\n reactionList: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n gap: 16,\n paddingTop: 8,\n paddingBottom: 16,\n borderBottomColor: colors.borderColorDefaultBase,\n borderBottomWidth: 1,\n },\n reaction: {\n height: reactionBtnSize,\n width: reactionBtnSize,\n borderWidth: btnBorderWidth,\n borderRadius: 32,\n justifyContent: 'center',\n overflow: 'hidden',\n },\n reactionEmoji: {\n fontSize: 24,\n },\n actions: {\n paddingTop: 4,\n },\n })\n}\n"]}

package/build/screens/reactions_screen.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { StaticScreenProps } from '@react-navigation/native';
-import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import React from 'react';
-export declare const ReactionsScreenOptions: NativeStackNavigationOptions;
+export declare const ReactionsScreenOptions: import("@react-navigation/native-stack").NativeStackNavigationOptions;
 export type ReactionScreenProps = StaticScreenProps<{
     message_id: string;
     conversation_id: number;

package/build/screens/reactions_screen.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"reactions_screen.d.ts","sourceRoot":"","sources":["../../src/screens/reactions_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,~~EAAE~~,~~4BAA4B,EAAE,~~MAAM,~~gCAAgC,CAAA;AAC7E,~~OAAO,~~KAAK,MAAM,OAAO,~~CAAA;~~AAYzB~~,eAAO,MAAM,sBAAsB,~~EAAE~~,~~4BAMpC,~~CAAA;~~AAED~~,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;IAClD,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,~~qBA8D7D~~"}
1	+ {"version":3,"file":"reactions_screen.d.ts","sourceRoot":"","sources":["../../src/screens/reactions_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAe,MAAM,OAAO,CAAA;AAenC,eAAO,MAAM,sBAAsB,uEAMjC,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;IAClD,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,qBA0D7D"}

package/build/screens/reactions_screen.js CHANGED Viewed

@@ -1,19 +1,22 @@
-import React from 'react';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import React, { memo } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Avatar, Text } from '../components';
-import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction';
+import { REACTION_EMOJIS } from '../components/conversation/message_reaction';
 import { Tabs } from '../components/display/tabs';
 import { useSuspenseGet, useTheme } from '../hooks';
 import { useConversationMessages } from '../hooks/use_conversation_messages';
-import { FlashList } from '@shopify/flash-list';
-export const ReactionsScreenOptions = {
-    presentation: 'formSheet',
-    headerShown: false,
-    sheetAllowedDetents: [0.5],
-    sheetGrabberVisible: true,
-    sheetCornerRadius: 16,
-};
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet';
+import { platformFontWeightMedium } from '../utils';
+import { useFontScale } from '../hooks/use_font_scale';
+export const ReactionsScreenOptions = getFormSheetScreenOptions({
+    sheetAllowedDetents: Platform.select({
+        android: [0.5, 0.94], // Going straight to full 0.94 preserves height of screen on Android
+        default: [0.5, 1],
+    }),
+    headerTitle: 'Reactions',
+});
 export function ReactionsScreen({ route }) {
     const { conversation_id, message_id, reaction_value } = route.params;
     const styles = useStyles();
@@ -38,54 +41,65 @@ export function ReactionsScreen({ route }) {
     }
     const authorIds = reactionCount.authorIds;
     const authors = members.filter(member => authorIds.includes(member.id));
-    return (<View style={styles.container}>
+    return (<FormSheet.Root contentStyle={styles.formSheetContent}>
       <Tabs data={reactionCounts} activeTab={reactionCount} onTabPress={item => {
             setReactionCountValue(item.value);
         }} renderItem={({ item }) => (<Reaction active={reactionCount.id === item.id} reaction={item} onPress={() => setReactionCountValue(item.value)}/>)} style={styles.actions}/>
-      <FlashList data={authors} keyExtractor={item => item.id.toString()} renderItem={({ item: author }) => (<View style={styles.authorList}>
-            <Avatar size={'md'} sourceUri={author.avatar}/>
-            <Text key={author.id}>{author.name}</Text>
-          </View>)}/>
-    </View>);
+      <FlatList data={authors} contentContainerStyle={styles.contentContainer} keyExtractor={item => item.id.toString()} renderItem={({ item: author }) => <Author author={author} key={author.id}/>}/>
+    </FormSheet.Root>);
 }
 const Reaction = ({ reaction, }) => {
     const styles = useStyles();
-    const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 });
     return (<View key={reaction.value} style={styles.reaction}>
-      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
-      <Text style={reactionStyles.reactionEmoji}>{reaction.count}</Text>
+      <Text style={styles.reactionContent}>{REACTION_EMOJIS[reaction.value]}</Text>
+      <Text style={styles.reactionContent}>{reaction.count}</Text>
     </View>);
 };
+const Author = memo(({ author }) => {
+    const styles = useStyles();
+    return (<View style={styles.authorRow}>
+      <Avatar sourceUri={author.avatar} size="sm"/>
+      <Text variant="tertiary" numberOfLines={2} style={styles.authorName}>
+        {author.name}
+      </Text>
+    </View>);
+});
 const useStyles = () => {
-    const theme = useTheme();
-    const { height } = useWindowDimensions();
+    const { colors } = useTheme();
     const { bottom } = useSafeAreaInsets();
+    const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 });
     return StyleSheet.create({
-        container: {
-            justifyContent: 'flex-start',
-            paddingTop: 12,
-            paddingBottom: bottom,
-            width: '100%',
-            backgroundColor: theme.colors.fillColorNeutral100Inverted,
-            height,
-            gap: 8,
+        formSheetContent: {
+            paddingTop: Platform.select({ android: 4, default: 16 }),
         },
-        authorList: {
+        contentContainer: {
+            paddingTop: 8,
+            paddingBottom: bottom + Platform.select({ android: 24, default: 16 }),
+        },
+        authorRow: {
             flexDirection: 'row',
             alignItems: 'center',
             gap: 8,
-            paddingHorizontal: 12,
-            paddingVertical: 12,
+            paddingVertical: 8,
+            paddingHorizontal: 16,
+            flex: 1,
+        },
+        authorName: {
+            flex: 1,
         },
         reaction: {
-            paddingVertical: 12,
-            paddingHorizontal: 12,
+            paddingHorizontal: 8,
+            paddingVertical: 16,
             flexDirection: 'row',
             gap: 4,
         },
+        reactionContent: {
+            fontSize: 18,
+            fontWeight: platformFontWeightMedium,
+        },
         actions: {
-            minHeight: 48,
-            borderBottomColor: theme.colors.fillColorNeutral040,
+            minHeight: 68 * fontScale,
+            borderBottomColor: colors.borderColorDefaultBase,
             borderBottomWidth: 1,
         },
         errorContainer: {

package/build/screens/reactions_screen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"reactions_screen.js","sourceRoot":"","sources":["../../src/screens/reactions_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport React from 'react'\nimport { StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Avatar, Text } from '../components'\nimport { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'\nimport { Tabs } from '../components/display/tabs'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\nimport { MemberResource } from '../types'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport { FlashList } from '@shopify/flash-list'\n\nexport const ReactionsScreenOptions: NativeStackNavigationOptions = {\n presentation: 'formSheet',\n headerShown: false,\n sheetAllowedDetents: [0.5],\n sheetGrabberVisible: true,\n sheetCornerRadius: 16,\n}\n\nexport type ReactionScreenProps = StaticScreenProps<{\n message_id: string\n conversation_id: number\n reaction_value?: string\n}>\n\nexport function ReactionsScreen({ route }: ReactionScreenProps) {\n const { conversation_id, message_id, reaction_value } = route.params\n const styles = useStyles()\n\n const { messages } = useConversationMessages({ conversation_id }, { refetchOnMount: false })\n const { data: members } = useSuspenseGet<MemberResource[]>({\n url: `/me/conversations/${conversation_id}/members`,\n data: {\n fields: {\n Member: ['id', 'name', 'avatar', 'badges', 'child', 'role'],\n },\n },\n })\n const message = messages.find(m => m.id === message_id)\n const reactionCounts = message?.reactionCounts \|\| []\n const initialReactionCount =\n reactionCounts.find(r => r.value === reaction_value) \|\| reactionCounts[0]\n const [reactionCountValue, setReactionCountValue] = React.useState<\n ReactionCountResource['value']\n >(initialReactionCount.value)\n const reactionCount = reactionCounts.find(r => r.value === reactionCountValue)\n\n if (!reactionCount) {\n return (\n <View style={styles.errorContainer}>\n <Text>No reactions found for this message.</Text>\n </View>\n )\n }\n\n const authorIds = reactionCount.authorIds\n const authors = members.filter(member => authorIds.includes(member.id))\n\n return (\n <View style={styles.container}>\n <Tabs\n data={reactionCounts}\n activeTab={reactionCount}\n onTabPress={item => {\n setReactionCountValue(item.value)\n }}\n renderItem={({ item }) => (\n <Reaction\n active={reactionCount.id === item.id}\n reaction={item}\n onPress={() => setReactionCountValue(item.value)}\n />\n )}\n style={styles.actions}\n />\n <FlashList\n data={authors}\n keyExtractor={item => item.id.toString()}\n renderItem={({ item: author }) => (\n <View style={styles.authorList}>\n <Avatar size={'md'} sourceUri={author.avatar} />\n <Text key={author.id}>{author.name}</Text>\n </View>\n )}\n />\n </View>\n )\n}\n\nconst Reaction = ({\n reaction,\n}: {\n active: boolean\n reaction: ReactionCountResource\n onPress: () => void\n}) => {\n const styles = useStyles()\n const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })\n\n return (\n <View key={reaction.value} style={styles.reaction}>\n <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n <Text style={reactionStyles.reactionEmoji}>{reaction.count}</Text>\n </View>\n )\n}\n\nconst useStyles = () => {\n const theme = useTheme()\n const { height } = useWindowDimensions()\n const { bottom } = useSafeAreaInsets()\n\n return StyleSheet.create({\n container: {\n justifyContent: 'flex-start',\n paddingTop: 12,\n paddingBottom: bottom,\n width: '100%',\n backgroundColor: theme.colors.fillColorNeutral100Inverted,\n height,\n gap: 8,\n },\n authorList: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n paddingHorizontal: 12,\n paddingVertical: 12,\n },\n reaction: {\n paddingVertical: 12,\n paddingHorizontal: 12,\n flexDirection: 'row',\n gap: 4,\n },\n actions: {\n minHeight: 48,\n borderBottomColor: theme.colors.fillColorNeutral040,\n borderBottomWidth: 1,\n },\n errorContainer: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n padding: 16,\n marginTop: 30,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"reactions_screen.js","sourceRoot":"","sources":["../../src/screens/reactions_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport React, { memo } from 'react'\nimport { Platform, StyleSheet, View } from 'react-native'\nimport { FlatList } from 'react-native-gesture-handler'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Avatar, Text } from '../components'\nimport { REACTION_EMOJIS } from '../components/conversation/message_reaction'\nimport { Tabs } from '../components/display/tabs'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\nimport { MemberResource } from '../types'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'\nimport { platformFontWeightMedium } from '../utils'\nimport { useFontScale } from '../hooks/use_font_scale'\n\nexport const ReactionsScreenOptions = getFormSheetScreenOptions({\n sheetAllowedDetents: Platform.select({\n android: [0.5, 0.94], // Going straight to full 0.94 preserves height of screen on Android\n default: [0.5, 1],\n }),\n headerTitle: 'Reactions',\n})\n\nexport type ReactionScreenProps = StaticScreenProps<{\n message_id: string\n conversation_id: number\n reaction_value?: string\n}>\n\nexport function ReactionsScreen({ route }: ReactionScreenProps) {\n const { conversation_id, message_id, reaction_value } = route.params\n const styles = useStyles()\n\n const { messages } = useConversationMessages({ conversation_id }, { refetchOnMount: false })\n const { data: members } = useSuspenseGet<MemberResource[]>({\n url: `/me/conversations/${conversation_id}/members`,\n data: {\n fields: {\n Member: ['id', 'name', 'avatar', 'badges', 'child', 'role'],\n },\n },\n })\n const message = messages.find(m => m.id === message_id)\n const reactionCounts = message?.reactionCounts \|\| []\n const initialReactionCount =\n reactionCounts.find(r => r.value === reaction_value) \|\| reactionCounts[0]\n const [reactionCountValue, setReactionCountValue] = React.useState<\n ReactionCountResource['value']\n >(initialReactionCount.value)\n const reactionCount = reactionCounts.find(r => r.value === reactionCountValue)\n\n if (!reactionCount) {\n return (\n <View style={styles.errorContainer}>\n <Text>No reactions found for this message.</Text>\n </View>\n )\n }\n\n const authorIds = reactionCount.authorIds\n const authors = members.filter(member => authorIds.includes(member.id))\n\n return (\n <FormSheet.Root contentStyle={styles.formSheetContent}>\n <Tabs\n data={reactionCounts}\n activeTab={reactionCount}\n onTabPress={item => {\n setReactionCountValue(item.value)\n }}\n renderItem={({ item }) => (\n <Reaction\n active={reactionCount.id === item.id}\n reaction={item}\n onPress={() => setReactionCountValue(item.value)}\n />\n )}\n style={styles.actions}\n />\n <FlatList\n data={authors}\n contentContainerStyle={styles.contentContainer}\n keyExtractor={item => item.id.toString()}\n renderItem={({ item: author }) => <Author author={author} key={author.id} />}\n />\n </FormSheet.Root>\n )\n}\n\nconst Reaction = ({\n reaction,\n}: {\n active: boolean\n reaction: ReactionCountResource\n onPress: () => void\n}) => {\n const styles = useStyles()\n\n return (\n <View key={reaction.value} style={styles.reaction}>\n <Text style={styles.reactionContent}>{REACTION_EMOJIS[reaction.value]}</Text>\n <Text style={styles.reactionContent}>{reaction.count}</Text>\n </View>\n )\n}\n\ntype AuthorProps = Pick<MemberResource, 'id' \| 'name' \| 'avatar'>\n\nconst Author = memo(({ author }: { author: AuthorProps }) => {\n const styles = useStyles()\n\n return (\n <View style={styles.authorRow}>\n <Avatar sourceUri={author.avatar} size=\"sm\" />\n <Text variant=\"tertiary\" numberOfLines={2} style={styles.authorName}>\n {author.name}\n </Text>\n </View>\n )\n})\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const { bottom } = useSafeAreaInsets()\n const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })\n\n return StyleSheet.create({\n formSheetContent: {\n paddingTop: Platform.select({ android: 4, default: 16 }),\n },\n contentContainer: {\n paddingTop: 8,\n paddingBottom: bottom + Platform.select({ android: 24, default: 16 }),\n },\n authorRow: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n paddingVertical: 8,\n paddingHorizontal: 16,\n flex: 1,\n },\n authorName: {\n flex: 1,\n },\n reaction: {\n paddingHorizontal: 8,\n paddingVertical: 16,\n flexDirection: 'row',\n gap: 4,\n },\n reactionContent: {\n fontSize: 18,\n fontWeight: platformFontWeightMedium,\n },\n actions: {\n minHeight: 68 * fontScale,\n borderBottomColor: colors.borderColorDefaultBase,\n borderBottomWidth: 1,\n },\n errorContainer: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n padding: 16,\n marginTop: 30,\n },\n })\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.7.0",
+  "version": "3.7.1-rc.1",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "2eb01142fedb7a8ec219e6bcac2ccc685b6ac1e2"
+  "gitHead": "7d11e45c6ec9d85c3526bba6254771776f8599d7"
 }

package/src/components/conversation/message_reaction.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ import { useTheme } from '../../hooks'
 import { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../../types/resources/reaction'
 import { MessageResource } from '../../types'
+import { useCreateAndroidRippleColor } from '../../hooks/use_create_android_ripple_color'
 export const REACTION_EMOJIS: Record<ReactionCountResource['value'], string> = {
   thumbs_up: '👍',
@@ -33,6 +34,10 @@ export function MessageReaction({
     message,
   })
+  const { colors } = useTheme()
+  const baseRippleColor = reaction.mine ? colors.interaction : colors.fillColorNeutral060
+  const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })
   if (!reaction.count) return null
   if (!REACTION_EMOJIS[reaction.value]) return null
@@ -46,6 +51,7 @@ export function MessageReaction({
       style={styles.reaction}
       onLongPress={() => onLongPress(reaction)}
       onPress={handlePress}
+      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
     >
       <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
       <Text style={styles.reactionText}>{reaction.count}</Text>
@@ -74,6 +80,7 @@ export const useReactionStyles = ({ mine }: { mine: number }) => {
       borderColor: mine ? activeBorderColor : 'transparent',
       backgroundColor: mine ? activeBackgroundColor : colors.fillColorNeutral060,
       borderRadius: 16,
+      overflow: 'hidden',
       paddingVertical: 4,
       paddingHorizontal: 8,
       flexDirection: 'row',

package/src/components/primitive/form_sheet.tsx CHANGED Viewed

@@ -6,6 +6,8 @@ import {
   View,
   useWindowDimensions,
   type AccessibilityRole,
+  type StyleProp,
+  type ViewStyle,
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
@@ -58,15 +60,17 @@ export type { FormSheetRootProps, FormSheetActionProps, FormSheetHeaderProps }
 interface FormSheetRootProps {
   children: ReactNode
+  style?: StyleProp<ViewStyle>
+  contentStyle?: StyleProp<ViewStyle>
 }
-export function FormSheetRoot({ children }: FormSheetRootProps) {
+export function FormSheetRoot({ children, style, contentStyle }: FormSheetRootProps) {
   const styles = useStyles()
   return (
-    <View style={styles.container} collapsable={false}>
+    <View style={[styles.container, style]} collapsable={false}>
       <AndroidSheetGrabber />
-      <View style={styles.content}>{children}</View>
+      <View style={[styles.content, contentStyle]}>{children}</View>
     </View>
   )
 }

package/src/screens/message_actions_screen.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import React, { useCallback } from 'react'
 import { Alert, Platform, StyleSheet, View } from 'react-native'
 import { Text } from '../components'
 import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'
-import { useTheme } from '../hooks'
+import { useCreateAndroidRippleColor, useFontScale, useTheme } from '../hooks'
 import { useApiClient } from '../hooks/use_api_client'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
@@ -185,10 +185,15 @@ const Reaction = ({
   const styles = useStyles()
   const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })
+  const { colors } = useTheme()
+  const baseRippleColor = reaction.mine ? colors.interaction : colors.fillColorNeutral060
+  const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })
   return (
     <PlatformPressable
       key={reaction.value}
       style={[reactionStyles.reaction, styles.reaction]}
+      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
       onPress={onPress}
     >
       <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
@@ -198,9 +203,10 @@ const Reaction = ({
 const useStyles = () => {
   const { colors } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })
   const btnBorderWidth = 1
-  const baseSize = 44
+  const baseSize = 44 * fontScale
   const reactionBtnSize = Platform.select({
     ios: baseSize,
     android: baseSize + btnBorderWidth * 2,
@@ -223,6 +229,7 @@ const useStyles = () => {
       borderWidth: btnBorderWidth,
       borderRadius: 32,
       justifyContent: 'center',
+      overflow: 'hidden',
     },
     reactionEmoji: {
       fontSize: 24,

package/src/screens/reactions_screen.tsx CHANGED Viewed

@@ -1,24 +1,26 @@
 import { StaticScreenProps } from '@react-navigation/native'
-import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import React from 'react'
-import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import React, { memo } from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import { FlatList } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Avatar, Text } from '../components'
-import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'
+import { REACTION_EMOJIS } from '../components/conversation/message_reaction'
 import { Tabs } from '../components/display/tabs'
 import { useSuspenseGet, useTheme } from '../hooks'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { MemberResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
-import { FlashList } from '@shopify/flash-list'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { platformFontWeightMedium } from '../utils'
+import { useFontScale } from '../hooks/use_font_scale'
-export const ReactionsScreenOptions: NativeStackNavigationOptions = {
-  presentation: 'formSheet',
-  headerShown: false,
-  sheetAllowedDetents: [0.5],
-  sheetGrabberVisible: true,
-  sheetCornerRadius: 16,
-}
+export const ReactionsScreenOptions = getFormSheetScreenOptions({
+  sheetAllowedDetents: Platform.select({
+    android: [0.5, 0.94], // Going straight to full 0.94 preserves height of screen on Android
+    default: [0.5, 1],
+  }),
+  headerTitle: 'Reactions',
+})
 export type ReactionScreenProps = StaticScreenProps<{
   message_id: string
@@ -60,7 +62,7 @@ export function ReactionsScreen({ route }: ReactionScreenProps) {
   const authors = members.filter(member => authorIds.includes(member.id))
   return (
-    <View style={styles.container}>
+    <FormSheet.Root contentStyle={styles.formSheetContent}>
       <Tabs
         data={reactionCounts}
         activeTab={reactionCount}
@@ -76,17 +78,13 @@ export function ReactionsScreen({ route }: ReactionScreenProps) {
         )}
         style={styles.actions}
       />
-      <FlashList
+      <FlatList
         data={authors}
+        contentContainerStyle={styles.contentContainer}
         keyExtractor={item => item.id.toString()}
-        renderItem={({ item: author }) => (
-          <View style={styles.authorList}>
-            <Avatar size={'md'} sourceUri={author.avatar} />
-            <Text key={author.id}>{author.name}</Text>
-          </View>
-        )}
+        renderItem={({ item: author }) => <Author author={author} key={author.id} />}
       />
-    </View>
+    </FormSheet.Root>
   )
 }
@@ -98,47 +96,67 @@ const Reaction = ({
   onPress: () => void
 }) => {
   const styles = useStyles()
-  const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })
   return (
     <View key={reaction.value} style={styles.reaction}>
-      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
-      <Text style={reactionStyles.reactionEmoji}>{reaction.count}</Text>
+      <Text style={styles.reactionContent}>{REACTION_EMOJIS[reaction.value]}</Text>
+      <Text style={styles.reactionContent}>{reaction.count}</Text>
     </View>
   )
 }
+type AuthorProps = Pick<MemberResource, 'id' | 'name' | 'avatar'>
+const Author = memo(({ author }: { author: AuthorProps }) => {
+  const styles = useStyles()
+  return (
+    <View style={styles.authorRow}>
+      <Avatar sourceUri={author.avatar} size="sm" />
+      <Text variant="tertiary" numberOfLines={2} style={styles.authorName}>
+        {author.name}
+      </Text>
+    </View>
+  )
+})
 const useStyles = () => {
-  const theme = useTheme()
-  const { height } = useWindowDimensions()
+  const { colors } = useTheme()
   const { bottom } = useSafeAreaInsets()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })
   return StyleSheet.create({
-    container: {
-      justifyContent: 'flex-start',
-      paddingTop: 12,
-      paddingBottom: bottom,
-      width: '100%',
-      backgroundColor: theme.colors.fillColorNeutral100Inverted,
-      height,
-      gap: 8,
+    formSheetContent: {
+      paddingTop: Platform.select({ android: 4, default: 16 }),
+    },
+    contentContainer: {
+      paddingTop: 8,
+      paddingBottom: bottom + Platform.select({ android: 24, default: 16 }),
     },
-    authorList: {
+    authorRow: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 8,
-      paddingHorizontal: 12,
-      paddingVertical: 12,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      flex: 1,
+    },
+    authorName: {
+      flex: 1,
     },
     reaction: {
-      paddingVertical: 12,
-      paddingHorizontal: 12,
+      paddingHorizontal: 8,
+      paddingVertical: 16,
       flexDirection: 'row',
       gap: 4,
     },
+    reactionContent: {
+      fontSize: 18,
+      fontWeight: platformFontWeightMedium,
+    },
     actions: {
-      minHeight: 48,
-      borderBottomColor: theme.colors.fillColorNeutral040,
+      minHeight: 68 * fontScale,
+      borderBottomColor: colors.borderColorDefaultBase,
       borderBottomWidth: 1,
     },
     errorContainer: {