npm - @planningcenter/chat-react-native - Versions diffs - 3.4.1-rc.3 → 3.4.1-rc.5 - Mend

@planningcenter/chat-react-native 3.4.1-rc.3 → 3.4.1-rc.5

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 (18) hide show

package/build/components/conversation/attachments/image_attachment.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;~~AAgC7D~~,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,GACV,EAAE;IACD,UAAU,EAAE,GAAG,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;CACrB,~~qBAwDA~~"}
1	+ {"version":3,"file":"image_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AA+B7D,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,GACV,EAAE;IACD,UAAU,EAAE,GAAG,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;CACrB,qBAuDA"}

package/build/components/conversation/attachments/image_attachment.js CHANGED Viewed

@@ -1,14 +1,16 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Image, StyleSheet, Modal, Pressable, useWindowDimensions, SafeAreaView, View, Linking, } from 'react-native';
+import { StyleSheet, Modal, Pressable, useWindowDimensions, SafeAreaView, View, Linking, } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { tokens } from '../../../vendor/tapestry/tokens';
-import { IconButton, Heading, Text } from '../../display';
+import { IconButton, Image, Heading, Text } from '../../display';
 import colorFunction from 'color';
 import { formatDatePreview } from '../../../utils/date';
 const PAN_THRESHOLD_PX = 300;
 export function ImageAttachment({ attachment, metaProps, }) {
-    const styles = useStyles();
+    const { attributes } = attachment;
+    const { url, urlMedium, filename, metadata = {} } = attributes;
+    const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height });
     const [visible, setVisible] = useState(false);
     // shared values run on the native UI thread and prevents clogging up the JS thread
     const dismissY = useSharedValue(0);
@@ -33,13 +35,9 @@ export function ImageAttachment({ attachment, metaProps, }) {
         transform: [{ translateY: dismissY.value }],
         opacity: opacity.value,
     }));
-    const { attributes } = attachment;
-    const { url, urlMedium, filename, metadata = {} } = attributes;
-    const width = metadata.width || 100;
-    const height = metadata.height || 100;
     return (<>
       <Pressable style={styles.container} onPress={() => setVisible(true)}>
-        <Image source={{ uri: urlMedium || url }} style={[styles.image, { aspectRatio: width / height }]} accessibilityLabel={filename}/>
+        <Image source={{ uri: urlMedium || url }} style={{ borderRadius: 8 }} wrapperStyle={styles.imageWrapper} alt={filename}/>
       </Pressable>
       <LightboxModal visible={visible} handleCloseModal={handleCloseModal} uri={urlMedium || url} metaProps={metaProps} panGesture={panGesture} animatedImageStyle={animatedImageStyle}/>
     </>);
@@ -54,7 +52,7 @@ const LightboxModal = ({ uri, visible, handleCloseModal, metaProps, panGesture,
       <SafeAreaView style={styles.modal}>
         <GestureHandlerRootView>
           <GestureDetector gesture={panGesture}>
-            <Animated.Image source={{ uri }} style={[styles.lightboxImage, animatedImageStyle]} resizeMode="contain"/>
+            <Image source={{ uri }} loadingBackgroundStyles={styles.lightboxImageLoading} style={styles.lightboxImage} animatedImageStyle={animatedImageStyle} resizeMode="contain" animated={true} alt=""/>
           </GestureDetector>
           <View style={styles.actionToolbar} accessibilityRole="toolbar">
             <View style={styles.actionToolbarTextMeta}>
@@ -72,7 +70,7 @@ const LightboxModal = ({ uri, visible, handleCloseModal, metaProps, panGesture,
       </SafeAreaView>
     </Modal>);
 };
-const useStyles = () => {
+const useStyles = ({ imageWidth = 100, imageHeight = 100 } = {}) => {
     const { width: windowWidth } = useWindowDimensions();
     const backgroundColor = tokens.colorNeutral7;
     const transparentBackgroundColor = useMemo(() => colorFunction(backgroundColor).alpha(0.8).toString(), [backgroundColor]);
@@ -80,9 +78,12 @@ const useStyles = () => {
         container: {
             maxWidth: '100%',
         },
+        imageWrapper: {
+            minWidth: 200,
+            aspectRatio: imageWidth / imageHeight,
+        },
         image: {
             borderRadius: 8,
-            minWidth: 200,
         },
         modal: {
             flex: 1,
@@ -91,8 +92,12 @@ const useStyles = () => {
             alignItems: 'center',
         },
         lightboxImage: {
-            width: windowWidth,
             height: '100%',
+            width: windowWidth,
+            backgroundColor,
+        },
+        lightboxImageLoading: {
+            backgroundColor,
         },
         actionToolbar: {
             width: '100%',

package/build/components/conversation/attachments/image_attachment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo, useState } from 'react'\nimport {\n Image,\n StyleSheet,\n Modal,\n Pressable,\n useWindowDimensions,\n SafeAreaView,\n View,\n Linking,\n ImageStyle,\n} from 'react-native'\nimport {\n Gesture,\n GestureDetector,\n GestureHandlerRootView,\n type PanGesture,\n} from 'react-native-gesture-handler'\nimport Animated, {\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withTiming,\n type AnimatedStyle,\n} from 'react-native-reanimated'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { IconButton, Heading, Text } from '../../display'\nimport colorFunction from 'color'\nimport { formatDatePreview } from '../../../utils/date'\n\nconst PAN_THRESHOLD_PX = 300\n\nexport type MetaProps = {\n authorName: string\n createdAt: string\n}\n\nexport function ImageAttachment({\n attachment,\n metaProps,\n}: {\n attachment: any\n metaProps: MetaProps\n}) {\n const styles = useStyles()\n const [visible, setVisible] = useState(false)\n\n // shared values run on the native UI thread and prevents clogging up the JS thread\n const dismissY = useSharedValue(0)\n const opacity = useSharedValue(1)\n\n const resetAnimations = useCallback(() => {\n dismissY.value = withTiming(0)\n opacity.value = withTiming(1)\n }, [dismissY, opacity])\n\n const handleCloseModal = useCallback(() => {\n setVisible(false)\n resetAnimations()\n }, [setVisible, resetAnimations])\n\n const panGesture = Gesture.Pan()\n .onUpdate(e => {\n dismissY.value = e.translationY\n opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX\n })\n .onEnd(() => {\n runOnJS(handleCloseModal)() // Ensures we can call a JS function\n })\n\n const animatedImageStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: dismissY.value }],\n opacity: opacity.value,\n }))\n\n const { attributes } = attachment\n const { url, urlMedium, filename, metadata = {} } = attributes\n const width = metadata.width \|\| 100\n const height = metadata.height \|\| 100\n\n return (\n <>\n <Pressable style={styles.container} onPress={() => setVisible(true)}>\n <Image\n source={{ uri: urlMedium \|\| url }}\n style={[styles.image, { aspectRatio: width / height }]}\n accessibilityLabel={filename}\n />\n </Pressable>\n <LightboxModal\n visible={visible}\n handleCloseModal={handleCloseModal}\n uri={urlMedium \|\| url}\n metaProps={metaProps}\n panGesture={panGesture}\n animatedImageStyle={animatedImageStyle}\n />\n </>\n )\n}\n\ninterface LightboxModalProps {\n visible: boolean\n handleCloseModal: () => void\n uri: string\n metaProps: MetaProps\n panGesture: PanGesture\n animatedImageStyle: AnimatedStyle<ImageStyle>\n}\n\nconst LightboxModal = ({\n uri,\n visible,\n handleCloseModal,\n metaProps,\n panGesture,\n animatedImageStyle,\n}: LightboxModalProps) => {\n const styles = useStyles()\n\n const { authorName, createdAt } = metaProps\n\n const handleOpenInBrowser = () => {\n Linking.openURL(uri)\n }\n\n return (\n <Modal visible={visible} transparent animationType=\"fade\" onRequestClose={handleCloseModal}>\n <SafeAreaView style={styles.modal}>\n <GestureHandlerRootView>\n <GestureDetector gesture={panGesture}>\n <Animated.Image\n source={{ uri }}\n style={[styles.lightboxImage, animatedImageStyle]}\n resizeMode=\"contain\"\n />\n </GestureDetector>\n <View style={styles.actionToolbar} accessibilityRole=\"toolbar\">\n <View style={styles.actionToolbarTextMeta}>\n <Heading variant=\"h3\" style={styles.actionToolbarTitle} numberOfLines={1}>\n {authorName}\n </Heading>\n <Text variant=\"tertiary\" style={styles.actionToolbarSubtitle}>\n {formatDatePreview(createdAt)}\n </Text>\n </View>\n <IconButton\n onPress={handleOpenInBrowser}\n name=\"general.newWindow\"\n accessibilityRole=\"link\"\n accessibilityLabel=\"Open image in browser\"\n accessibilityHint=\"Image can be downloaded and shared through the browser.\"\n style={styles.actionButton}\n iconStyle={styles.actionButtonIcon}\n size=\"lg\"\n />\n <IconButton\n onPress={handleCloseModal}\n name=\"general.x\"\n accessibilityLabel=\"Close image\"\n style={styles.actionButton}\n iconStyle={styles.actionButtonIcon}\n />\n </View>\n </GestureHandlerRootView>\n </SafeAreaView>\n </Modal>\n )\n}\n\nconst useStyles = () => {\n const { width: windowWidth } = useWindowDimensions()\n const backgroundColor = tokens.colorNeutral7\n const transparentBackgroundColor = useMemo(\n () => colorFunction(backgroundColor).alpha(0.8).toString(),\n [backgroundColor]\n )\n\n return StyleSheet.create({\n container: {\n maxWidth: '100%',\n },\n image: {\n borderRadius: 8,\n minWidth: 200,\n },\n modal: {\n flex: 1,\n backgroundColor,\n justifyContent: 'center',\n alignItems: 'center',\n },\n lightboxImage: {\n width: windowWidth,\n height: '100%',\n },\n actionToolbar: {\n width: '100%',\n position: 'absolute',\n top: 0,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 20,\n paddingHorizontal: 16,\n paddingTop: 16,\n paddingBottom: 8,\n backgroundColor: transparentBackgroundColor,\n },\n actionToolbarTextMeta: {\n flex: 1,\n },\n actionToolbarTitle: {\n marginRight: 'auto',\n flexShrink: 1,\n color: tokens.colorNeutral88,\n },\n actionToolbarSubtitle: {\n color: tokens.colorNeutral68,\n },\n actionButton: {\n backgroundColor,\n height: 40,\n width: 40,\n borderRadius: 50,\n borderWidth: 1,\n borderColor: tokens.colorNeutral24,\n },\n actionButtonIcon: {\n color: tokens.colorNeutral88,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"image_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo, useState } from 'react'\nimport {\n StyleSheet,\n Modal,\n Pressable,\n useWindowDimensions,\n SafeAreaView,\n View,\n Linking,\n ImageStyle,\n} from 'react-native'\nimport {\n Gesture,\n GestureDetector,\n GestureHandlerRootView,\n type PanGesture,\n} from 'react-native-gesture-handler'\nimport {\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withTiming,\n type AnimatedStyle,\n} from 'react-native-reanimated'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { IconButton, Image, Heading, Text } from '../../display'\nimport colorFunction from 'color'\nimport { formatDatePreview } from '../../../utils/date'\n\nconst PAN_THRESHOLD_PX = 300\n\nexport type MetaProps = {\n authorName: string\n createdAt: string\n}\n\nexport function ImageAttachment({\n attachment,\n metaProps,\n}: {\n attachment: any\n metaProps: MetaProps\n}) {\n const { attributes } = attachment\n const { url, urlMedium, filename, metadata = {} } = attributes\n\n const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })\n const [visible, setVisible] = useState(false)\n\n // shared values run on the native UI thread and prevents clogging up the JS thread\n const dismissY = useSharedValue(0)\n const opacity = useSharedValue(1)\n\n const resetAnimations = useCallback(() => {\n dismissY.value = withTiming(0)\n opacity.value = withTiming(1)\n }, [dismissY, opacity])\n\n const handleCloseModal = useCallback(() => {\n setVisible(false)\n resetAnimations()\n }, [setVisible, resetAnimations])\n\n const panGesture = Gesture.Pan()\n .onUpdate(e => {\n dismissY.value = e.translationY\n opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX\n })\n .onEnd(() => {\n runOnJS(handleCloseModal)() // Ensures we can call a JS function\n })\n\n const animatedImageStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: dismissY.value }],\n opacity: opacity.value,\n }))\n\n return (\n <>\n <Pressable style={styles.container} onPress={() => setVisible(true)}>\n <Image\n source={{ uri: urlMedium \|\| url }}\n style={{ borderRadius: 8 }}\n wrapperStyle={styles.imageWrapper}\n alt={filename}\n />\n </Pressable>\n <LightboxModal\n visible={visible}\n handleCloseModal={handleCloseModal}\n uri={urlMedium \|\| url}\n metaProps={metaProps}\n panGesture={panGesture}\n animatedImageStyle={animatedImageStyle}\n />\n </>\n )\n}\n\ninterface LightboxModalProps {\n visible: boolean\n handleCloseModal: () => void\n uri: string\n metaProps: MetaProps\n panGesture: PanGesture\n animatedImageStyle: AnimatedStyle<ImageStyle>\n}\n\nconst LightboxModal = ({\n uri,\n visible,\n handleCloseModal,\n metaProps,\n panGesture,\n animatedImageStyle,\n}: LightboxModalProps) => {\n const styles = useStyles()\n\n const { authorName, createdAt } = metaProps\n\n const handleOpenInBrowser = () => {\n Linking.openURL(uri)\n }\n\n return (\n <Modal visible={visible} transparent animationType=\"fade\" onRequestClose={handleCloseModal}>\n <SafeAreaView style={styles.modal}>\n <GestureHandlerRootView>\n <GestureDetector gesture={panGesture}>\n <Image\n source={{ uri }}\n loadingBackgroundStyles={styles.lightboxImageLoading}\n style={styles.lightboxImage}\n animatedImageStyle={animatedImageStyle}\n resizeMode=\"contain\"\n animated={true}\n alt=\"\"\n />\n </GestureDetector>\n <View style={styles.actionToolbar} accessibilityRole=\"toolbar\">\n <View style={styles.actionToolbarTextMeta}>\n <Heading variant=\"h3\" style={styles.actionToolbarTitle} numberOfLines={1}>\n {authorName}\n </Heading>\n <Text variant=\"tertiary\" style={styles.actionToolbarSubtitle}>\n {formatDatePreview(createdAt)}\n </Text>\n </View>\n <IconButton\n onPress={handleOpenInBrowser}\n name=\"general.newWindow\"\n accessibilityRole=\"link\"\n accessibilityLabel=\"Open image in browser\"\n accessibilityHint=\"Image can be downloaded and shared through the browser.\"\n style={styles.actionButton}\n iconStyle={styles.actionButtonIcon}\n size=\"lg\"\n />\n <IconButton\n onPress={handleCloseModal}\n name=\"general.x\"\n accessibilityLabel=\"Close image\"\n style={styles.actionButton}\n iconStyle={styles.actionButtonIcon}\n />\n </View>\n </GestureHandlerRootView>\n </SafeAreaView>\n </Modal>\n )\n}\n\ninterface UseStylesProps {\n imageWidth?: number\n imageHeight?: number\n}\n\nconst useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {}) => {\n const { width: windowWidth } = useWindowDimensions()\n const backgroundColor = tokens.colorNeutral7\n const transparentBackgroundColor = useMemo(\n () => colorFunction(backgroundColor).alpha(0.8).toString(),\n [backgroundColor]\n )\n\n return StyleSheet.create({\n container: {\n maxWidth: '100%',\n },\n imageWrapper: {\n minWidth: 200,\n aspectRatio: imageWidth / imageHeight,\n },\n image: {\n borderRadius: 8,\n },\n modal: {\n flex: 1,\n backgroundColor,\n justifyContent: 'center',\n alignItems: 'center',\n },\n lightboxImage: {\n height: '100%',\n width: windowWidth,\n backgroundColor,\n },\n lightboxImageLoading: {\n backgroundColor,\n },\n actionToolbar: {\n width: '100%',\n position: 'absolute',\n top: 0,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 20,\n paddingHorizontal: 16,\n paddingTop: 16,\n paddingBottom: 8,\n backgroundColor: transparentBackgroundColor,\n },\n actionToolbarTextMeta: {\n flex: 1,\n },\n actionToolbarTitle: {\n marginRight: 'auto',\n flexShrink: 1,\n color: tokens.colorNeutral88,\n },\n actionToolbarSubtitle: {\n color: tokens.colorNeutral68,\n },\n actionButton: {\n backgroundColor,\n height: 40,\n width: 40,\n borderRadius: 50,\n borderWidth: 1,\n borderColor: tokens.colorNeutral24,\n },\n actionButtonIcon: {\n color: tokens.colorNeutral88,\n },\n })\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"message_form.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAC3E,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAYlD,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAA;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,YAAY,EAAE,oBAAoB,CAAA;CACnC;AAwBD,iBAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,qBAkGzE;AAiCD,iBAAS,gBAAgB,~~sBAgCxB~~;AAED,iBAAS,oBAAoB,sBAe5B;AAED,iBAAS,2BAA2B,6BA8EnC;AAED,iBAAS,mBAAmB,6BA6B3B"}
1	+ {"version":3,"file":"message_form.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAC3E,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAYlD,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAA;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,YAAY,EAAE,oBAAoB,CAAA;CACnC;AAwBD,iBAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,qBAkGzE;AAiCD,iBAAS,gBAAgB,sBA+BxB;AAED,iBAAS,oBAAoB,sBAe5B;AAED,iBAAS,2BAA2B,6BA8EnC;AAED,iBAAS,mBAAmB,6BA6B3B"}

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

@@ -136,12 +136,10 @@ function MessageFormInput() {
       <MessageFormAttachments />
       <View style={styles.textInputRow}>
         {usingGiphy ? (<View style={styles.giphyBadge}>
-            <Text>/Giphy</Text>
+            <Text style={styles.giphyBadgeText}>/giphy</Text>
           </View>) : null}
-        <View style={styles.textInput}>
-          <TextInput multiline={true} aria-disabled={true} placeholder="Send a message" onChangeText={setText} value={text} maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH} onSubmitEditing={onSubmit}/>
-        </View>
+        <TextInput style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]} multiline={true} aria-disabled={true} placeholder="Send a message" onChangeText={setText} value={text} maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH} onSubmitEditing={onSubmit}/>
       </View>
       {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}
@@ -229,25 +227,37 @@ const useMessageFormStyles = () => {
         textInputBoundary: {
             borderRadius: 24,
             borderWidth: 1,
-            padding: 12,
-            paddingHorizontal: 20,
             borderColor: theme.colors.fillColorNeutral050Base,
             flex: 1,
             gap: 12,
         },
         textInputRow: {
             flexDirection: 'row',
-            alignItems: 'center',
             gap: 12,
+            alignItems: 'center',
         },
         textInput: {
+            paddingVertical: 8,
+            paddingHorizontal: 20,
+            color: 'white',
+            textAlignVertical: 'center',
+            justifyContent: 'center',
             flex: 1,
+            fontSize: 16,
+        },
+        textInputWithGiphy: {
+            paddingLeft: 0,
         },
         giphyBadge: {
             backgroundColor: theme.colors.fillColorNeutral050Base,
             borderRadius: 24,
-            padding: 8,
             paddingHorizontal: 12,
+            marginLeft: 12,
+            padding: 4,
+        },
+        giphyBadgeText: {
+            fontSize: 14,
+            color: theme.colors.interaction,
         },
         textInputSend: {
             borderRadius: 24,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"message_form.js","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useContext, useEffect, useState } from 'react'\nimport { StyleSheet, TextInput, View, ViewProps } from 'react-native'\nimport { IconButton, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { ConversationResource } from '../../types'\nimport { useMessageCreate } from '../../hooks/use_message_create'\nimport { ConversationScreenProps } from '../../screens/conversation_screen'\nimport { ChatContext } from '../../contexts/chat_context'\nimport { ImagePicker, ImagePickerResult } from '../../utils/native_adapters'\nimport { useAttachmentUploader } from '../../hooks/use_attachment_uploader'\nimport {\n DenormalizedAttachmentResourceForCreate,\n DenormalizedMessageAttachmentResourceForCreate,\n} from '../../types/resources/denormalized_attachment_resource'\nimport { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'\n\nexport const MessageForm = {\n Root: MessageFormRoot,\n TextInput: MessageFormInput,\n SubmitButton: MessageFormSubmitBtn,\n AttachmentPicker: MessageFormAttachmentPicker,\n Commands: MessageFormCommands,\n}\n\ninterface MessagesFormRootProps extends ViewProps {\n conversation: ConversationResource\n}\n\nconst MessageFormContext = React.createContext<{\n text: string\n setText: (text: string) => void\n onSubmit: () => void\n disabled: boolean\n canGiphy: boolean\n usingGiphy: boolean\n setUsingGiphy: (usingGiphy: boolean) => void\n attachmentUploader?: ReturnType<typeof useAttachmentUploader>\n}>({\n text: '',\n setText: (_text: string) => {},\n onSubmit: () => {},\n disabled: false,\n canGiphy: false,\n usingGiphy: false,\n setUsingGiphy: (_usingGiphy: boolean) => {},\n})\n\nconst GIPHY_MAX_LENGTH = 50\nconst MAX_MESSAGE_LENGTH = 5000\n\nfunction MessageFormRoot({ conversation, children }: MessagesFormRootProps) {\n const { giphyApiKey } = useContext(ChatContext)\n const canGiphy = !!giphyApiKey\n const styles = useMessageFormStyles()\n const [text, setText] = React.useState('')\n const [usingGiphy, setUsingGiphy] = useState(false)\n const navigation = useNavigation()\n const route = useRoute() as ConversationScreenProps['route']\n const {\n status,\n isPending,\n reset: resetMutation,\n mutate,\n } = useMessageCreate({\n conversationId: conversation.id,\n })\n const attachmentUploader = useAttachmentUploader({\n conversationId: conversation.id,\n })\n const resetAttachmentUploader = attachmentUploader.reset\n\n const reset = useCallback(() => {\n resetAttachmentUploader()\n resetMutation()\n setText('')\n setUsingGiphy(false)\n }, [resetAttachmentUploader, resetMutation])\n\n useEffect(() => {\n if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {\n setUsingGiphy(true)\n setText('')\n }\n }, [canGiphy, text, usingGiphy])\n\n useEffect(() => {\n switch (status) {\n case 'success':\n reset()\n break\n }\n }, [reset, status])\n\n useEffect(() => {\n if (route.params.clear_input) {\n reset()\n navigation.setParams({ ...route.params, clear_input: false })\n }\n }, [reset, navigation, route.params])\n\n const canSubmit = (() => {\n if (isPending) return false\n if (attachmentUploader?.pendingUploads) return false\n if (text.length > 0) return true\n if (attachmentUploader?.attachments?.length) return true\n return false\n })()\n const disabled = !canSubmit\n\n const handleSubmit = () => {\n if (!canSubmit) return\n\n if (canGiphy && usingGiphy) {\n TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())\n navigation.navigate('SendGiphy', {\n conversation_id: conversation.id,\n search_term: text,\n })\n } else {\n let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] = []\n if (attachmentUploader?.attachmentIds) {\n attachmentsForSubmit = attachmentUploader.attachmentIds.map(\n (id: string): DenormalizedMessageAttachmentResourceForCreate => ({\n type: 'MessageAttachment',\n id,\n })\n )\n }\n mutate({ text, attachments: attachmentsForSubmit })\n }\n }\n\n return (\n <MessageFormContext.Provider\n value={{\n text,\n setText,\n onSubmit: handleSubmit,\n disabled,\n canGiphy,\n usingGiphy,\n setUsingGiphy,\n attachmentUploader,\n }}\n >\n <View style={styles.textInputContainer}>{children}</View>\n </MessageFormContext.Provider>\n )\n}\n\nfunction MessageFormAttachments() {\n const styles = useMessageFormStyles()\n const { attachmentUploader } = React.useContext(MessageFormContext)\n const numberOfAttachments = attachmentUploader?.attachments?.length \|\| 0\n const attachments = attachmentUploader?.attachments \|\| []\n\n if (numberOfAttachments === 0) {\n return null\n }\n\n return (\n <View style={styles.messageFormAttachments}>\n {attachments.map(attachment => {\n return (\n <MessageFormAttachmentImage\n key={attachment.file.uri}\n uri={attachment.file.uri}\n alt={attachment.file.name}\n status={attachment.status}\n width={attachment.file.width}\n height={attachment.file.height}\n removeAttachment={() => {\n attachmentUploader?.removeAttachment(attachment)\n }}\n />\n )\n })}\n </View>\n )\n}\n\nfunction MessageFormInput() {\n const styles = useMessageFormStyles()\n const { text, setText, onSubmit, usingGiphy, attachmentUploader } =\n React.useContext(MessageFormContext)\n const attachmentError = attachmentUploader?.errorMessage\n\n return (\n <View style={styles.textInputBoundary}>\n <MessageFormAttachments />\n <View style={styles.textInputRow}>\n {usingGiphy ? (\n <View style={styles.giphyBadge}>\n <Text>/Giphy</Text>\n </View>\n ) : null}\n\n <View style={styles.textInput}>\n <TextInput\n multiline={true}\n aria-disabled={true}\n placeholder=\"Send a message\"\n onChangeText={setText}\n value={text}\n maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}\n onSubmitEditing={onSubmit}\n />\n </View>\n </View>\n\n {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}\n </View>\n )\n}\n\nfunction MessageFormSubmitBtn() {\n const styles = useMessageFormStyles()\n const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)\n\n return (\n <IconButton\n disabled={disabled}\n accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}\n size=\"md\"\n appearance=\"neutral\"\n style={styles.textInputSend}\n name={usingGiphy ? 'general.search' : 'general.upArrow'}\n onPress={onSubmit}\n />\n )\n}\n\nfunction MessageFormAttachmentPicker() {\n const styles = useMessageFormStyles()\n const { usingGiphy, attachmentUploader } = React.useContext(MessageFormContext)\n const [isOpen, setIsOpen] = useState(false)\n\n function uploadImagePickerResult(result: ImagePickerResult) {\n if (result.canceled) {\n return\n }\n\n const filteredAssets = result.assets\n .filter(asset => {\n return asset.fileSize && asset.fileName && asset.mimeType\n })\n .map(asset => {\n return {\n uri: asset.uri,\n name: asset.fileName as string,\n type: asset.mimeType as string,\n size: asset.fileSize as number,\n height: asset.height,\n width: asset.width,\n }\n })\n\n attachmentUploader?.handleFilesAttached(filteredAssets)\n }\n\n const openCamera = async () => {\n setIsOpen(false)\n let result = await ImagePicker.openCameraAsync()\n if (!result.canceled) {\n uploadImagePickerResult(result)\n }\n }\n\n const pickImage = async () => {\n setIsOpen(false)\n let result = await ImagePicker.openImageLibraryAsync()\n if (!result.canceled) {\n uploadImagePickerResult(result)\n }\n }\n\n if (usingGiphy) {\n return null\n }\n\n return (\n // TODO: Design Pass\n <View style={styles.attachmentPicker}>\n {isOpen && (\n <View style={styles.attachmentPickerButtons}>\n <IconButton\n accessibilityLabel=\"Take a photo\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.videoCamera'}\n onPress={openCamera}\n />\n <IconButton\n accessibilityLabel=\"Choose a photo\"\n size=\"md\"\n appearance=\"neutral\"\n name={'churchCenter.photosIos'}\n onPress={pickImage}\n />\n </View>\n )}\n <IconButton\n accessibilityLabel=\"File Menu\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.outlinedPlusCircle'}\n onPress={() => setIsOpen(!isOpen)}\n />\n </View>\n )\n}\n\nfunction MessageFormCommands() {\n const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)\n\n if (!canGiphy) {\n return null\n }\n\n if (usingGiphy) {\n return (\n <IconButton\n accessibilityLabel=\"Exit Giphy Search\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.x'}\n onPress={() => setUsingGiphy(false)}\n />\n )\n }\n\n return (\n <IconButton\n accessibilityLabel=\"Search Giphy\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.bolt'}\n onPress={() => setUsingGiphy(true)}\n disabled={text.length > GIPHY_MAX_LENGTH}\n />\n )\n}\n\nconst useMessageFormStyles = () => {\n const theme = useTheme()\n const navigationTheme = useNavigationTheme()\n\n return StyleSheet.create({\n textInputContainer: {\n borderColor: theme.colors.fillColorNeutral050Base,\n borderTopWidth: 1,\n padding: 12,\n backgroundColor: navigationTheme.colors.card,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 12,\n },\n textInputBoundary: {\n borderRadius: 24,\n borderWidth: 1,\n padding: 12,\n paddingHorizontal: 20,\n borderColor: theme.colors.fillColorNeutral050Base,\n flex: 1,\n gap: 12,\n },\n textInputRow: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 12,\n },\n textInput: {\n flex: 1,\n },\n giphyBadge: {\n backgroundColor: theme.colors.fillColorNeutral050Base,\n borderRadius: 24,\n padding: 8,\n paddingHorizontal: 12,\n },\n textInputSend: {\n borderRadius: 24,\n height: 36,\n width: 36,\n },\n attachmentPicker: {\n position: 'relative',\n },\n attachmentPickerButtons: {\n position: 'absolute',\n left: 0,\n bottom: 40,\n zIndex: 10,\n gap: 16,\n },\n messageFormAttachments: {\n flexDirection: 'row',\n gap: 8,\n },\n inputErrorMessage: {\n color: theme.colors.statusErrorText,\n fontSize: 14,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"message_form.js","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useContext, useEffect, useState } from 'react'\nimport { StyleSheet, TextInput, View, ViewProps } from 'react-native'\nimport { IconButton, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { ConversationResource } from '../../types'\nimport { useMessageCreate } from '../../hooks/use_message_create'\nimport { ConversationScreenProps } from '../../screens/conversation_screen'\nimport { ChatContext } from '../../contexts/chat_context'\nimport { ImagePicker, ImagePickerResult } from '../../utils/native_adapters'\nimport { useAttachmentUploader } from '../../hooks/use_attachment_uploader'\nimport {\n DenormalizedAttachmentResourceForCreate,\n DenormalizedMessageAttachmentResourceForCreate,\n} from '../../types/resources/denormalized_attachment_resource'\nimport { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'\n\nexport const MessageForm = {\n Root: MessageFormRoot,\n TextInput: MessageFormInput,\n SubmitButton: MessageFormSubmitBtn,\n AttachmentPicker: MessageFormAttachmentPicker,\n Commands: MessageFormCommands,\n}\n\ninterface MessagesFormRootProps extends ViewProps {\n conversation: ConversationResource\n}\n\nconst MessageFormContext = React.createContext<{\n text: string\n setText: (text: string) => void\n onSubmit: () => void\n disabled: boolean\n canGiphy: boolean\n usingGiphy: boolean\n setUsingGiphy: (usingGiphy: boolean) => void\n attachmentUploader?: ReturnType<typeof useAttachmentUploader>\n}>({\n text: '',\n setText: (_text: string) => {},\n onSubmit: () => {},\n disabled: false,\n canGiphy: false,\n usingGiphy: false,\n setUsingGiphy: (_usingGiphy: boolean) => {},\n})\n\nconst GIPHY_MAX_LENGTH = 50\nconst MAX_MESSAGE_LENGTH = 5000\n\nfunction MessageFormRoot({ conversation, children }: MessagesFormRootProps) {\n const { giphyApiKey } = useContext(ChatContext)\n const canGiphy = !!giphyApiKey\n const styles = useMessageFormStyles()\n const [text, setText] = React.useState('')\n const [usingGiphy, setUsingGiphy] = useState(false)\n const navigation = useNavigation()\n const route = useRoute() as ConversationScreenProps['route']\n const {\n status,\n isPending,\n reset: resetMutation,\n mutate,\n } = useMessageCreate({\n conversationId: conversation.id,\n })\n const attachmentUploader = useAttachmentUploader({\n conversationId: conversation.id,\n })\n const resetAttachmentUploader = attachmentUploader.reset\n\n const reset = useCallback(() => {\n resetAttachmentUploader()\n resetMutation()\n setText('')\n setUsingGiphy(false)\n }, [resetAttachmentUploader, resetMutation])\n\n useEffect(() => {\n if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {\n setUsingGiphy(true)\n setText('')\n }\n }, [canGiphy, text, usingGiphy])\n\n useEffect(() => {\n switch (status) {\n case 'success':\n reset()\n break\n }\n }, [reset, status])\n\n useEffect(() => {\n if (route.params.clear_input) {\n reset()\n navigation.setParams({ ...route.params, clear_input: false })\n }\n }, [reset, navigation, route.params])\n\n const canSubmit = (() => {\n if (isPending) return false\n if (attachmentUploader?.pendingUploads) return false\n if (text.length > 0) return true\n if (attachmentUploader?.attachments?.length) return true\n return false\n })()\n const disabled = !canSubmit\n\n const handleSubmit = () => {\n if (!canSubmit) return\n\n if (canGiphy && usingGiphy) {\n TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())\n navigation.navigate('SendGiphy', {\n conversation_id: conversation.id,\n search_term: text,\n })\n } else {\n let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] = []\n if (attachmentUploader?.attachmentIds) {\n attachmentsForSubmit = attachmentUploader.attachmentIds.map(\n (id: string): DenormalizedMessageAttachmentResourceForCreate => ({\n type: 'MessageAttachment',\n id,\n })\n )\n }\n mutate({ text, attachments: attachmentsForSubmit })\n }\n }\n\n return (\n <MessageFormContext.Provider\n value={{\n text,\n setText,\n onSubmit: handleSubmit,\n disabled,\n canGiphy,\n usingGiphy,\n setUsingGiphy,\n attachmentUploader,\n }}\n >\n <View style={styles.textInputContainer}>{children}</View>\n </MessageFormContext.Provider>\n )\n}\n\nfunction MessageFormAttachments() {\n const styles = useMessageFormStyles()\n const { attachmentUploader } = React.useContext(MessageFormContext)\n const numberOfAttachments = attachmentUploader?.attachments?.length \|\| 0\n const attachments = attachmentUploader?.attachments \|\| []\n\n if (numberOfAttachments === 0) {\n return null\n }\n\n return (\n <View style={styles.messageFormAttachments}>\n {attachments.map(attachment => {\n return (\n <MessageFormAttachmentImage\n key={attachment.file.uri}\n uri={attachment.file.uri}\n alt={attachment.file.name}\n status={attachment.status}\n width={attachment.file.width}\n height={attachment.file.height}\n removeAttachment={() => {\n attachmentUploader?.removeAttachment(attachment)\n }}\n />\n )\n })}\n </View>\n )\n}\n\nfunction MessageFormInput() {\n const styles = useMessageFormStyles()\n const { text, setText, onSubmit, usingGiphy, attachmentUploader } =\n React.useContext(MessageFormContext)\n const attachmentError = attachmentUploader?.errorMessage\n\n return (\n <View style={styles.textInputBoundary}>\n <MessageFormAttachments />\n <View style={styles.textInputRow}>\n {usingGiphy ? (\n <View style={styles.giphyBadge}>\n <Text style={styles.giphyBadgeText}>/giphy</Text>\n </View>\n ) : null}\n\n <TextInput\n style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]}\n multiline={true}\n aria-disabled={true}\n placeholder=\"Send a message\"\n onChangeText={setText}\n value={text}\n maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}\n onSubmitEditing={onSubmit}\n />\n </View>\n\n {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}\n </View>\n )\n}\n\nfunction MessageFormSubmitBtn() {\n const styles = useMessageFormStyles()\n const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)\n\n return (\n <IconButton\n disabled={disabled}\n accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}\n size=\"md\"\n appearance=\"neutral\"\n style={styles.textInputSend}\n name={usingGiphy ? 'general.search' : 'general.upArrow'}\n onPress={onSubmit}\n />\n )\n}\n\nfunction MessageFormAttachmentPicker() {\n const styles = useMessageFormStyles()\n const { usingGiphy, attachmentUploader } = React.useContext(MessageFormContext)\n const [isOpen, setIsOpen] = useState(false)\n\n function uploadImagePickerResult(result: ImagePickerResult) {\n if (result.canceled) {\n return\n }\n\n const filteredAssets = result.assets\n .filter(asset => {\n return asset.fileSize && asset.fileName && asset.mimeType\n })\n .map(asset => {\n return {\n uri: asset.uri,\n name: asset.fileName as string,\n type: asset.mimeType as string,\n size: asset.fileSize as number,\n height: asset.height,\n width: asset.width,\n }\n })\n\n attachmentUploader?.handleFilesAttached(filteredAssets)\n }\n\n const openCamera = async () => {\n setIsOpen(false)\n let result = await ImagePicker.openCameraAsync()\n if (!result.canceled) {\n uploadImagePickerResult(result)\n }\n }\n\n const pickImage = async () => {\n setIsOpen(false)\n let result = await ImagePicker.openImageLibraryAsync()\n if (!result.canceled) {\n uploadImagePickerResult(result)\n }\n }\n\n if (usingGiphy) {\n return null\n }\n\n return (\n // TODO: Design Pass\n <View style={styles.attachmentPicker}>\n {isOpen && (\n <View style={styles.attachmentPickerButtons}>\n <IconButton\n accessibilityLabel=\"Take a photo\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.videoCamera'}\n onPress={openCamera}\n />\n <IconButton\n accessibilityLabel=\"Choose a photo\"\n size=\"md\"\n appearance=\"neutral\"\n name={'churchCenter.photosIos'}\n onPress={pickImage}\n />\n </View>\n )}\n <IconButton\n accessibilityLabel=\"File Menu\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.outlinedPlusCircle'}\n onPress={() => setIsOpen(!isOpen)}\n />\n </View>\n )\n}\n\nfunction MessageFormCommands() {\n const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)\n\n if (!canGiphy) {\n return null\n }\n\n if (usingGiphy) {\n return (\n <IconButton\n accessibilityLabel=\"Exit Giphy Search\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.x'}\n onPress={() => setUsingGiphy(false)}\n />\n )\n }\n\n return (\n <IconButton\n accessibilityLabel=\"Search Giphy\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.bolt'}\n onPress={() => setUsingGiphy(true)}\n disabled={text.length > GIPHY_MAX_LENGTH}\n />\n )\n}\n\nconst useMessageFormStyles = () => {\n const theme = useTheme()\n const navigationTheme = useNavigationTheme()\n\n return StyleSheet.create({\n textInputContainer: {\n borderColor: theme.colors.fillColorNeutral050Base,\n borderTopWidth: 1,\n padding: 12,\n backgroundColor: navigationTheme.colors.card,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 12,\n },\n textInputBoundary: {\n borderRadius: 24,\n borderWidth: 1,\n borderColor: theme.colors.fillColorNeutral050Base,\n flex: 1,\n gap: 12,\n },\n textInputRow: {\n flexDirection: 'row',\n gap: 12,\n alignItems: 'center',\n },\n textInput: {\n paddingVertical: 8,\n paddingHorizontal: 20,\n color: 'white',\n textAlignVertical: 'center',\n justifyContent: 'center',\n flex: 1,\n fontSize: 16,\n },\n textInputWithGiphy: {\n paddingLeft: 0,\n },\n giphyBadge: {\n backgroundColor: theme.colors.fillColorNeutral050Base,\n borderRadius: 24,\n paddingHorizontal: 12,\n marginLeft: 12,\n padding: 4,\n },\n giphyBadgeText: {\n fontSize: 14,\n color: theme.colors.interaction,\n },\n textInputSend: {\n borderRadius: 24,\n height: 36,\n width: 36,\n },\n attachmentPicker: {\n position: 'relative',\n },\n attachmentPickerButtons: {\n position: 'absolute',\n left: 0,\n bottom: 40,\n zIndex: 10,\n gap: 16,\n },\n messageFormAttachments: {\n flexDirection: 'row',\n gap: 8,\n },\n inputErrorMessage: {\n color: theme.colors.statusErrorText,\n fontSize: 14,\n },\n })\n}\n"]}

package/build/components/display/image.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ImageProps as ReactNativeImageProps, ViewStyle } from 'react-native';
+import { ImageStyle, ImageProps as ReactNativeImageProps, ViewStyle } from 'react-native';
+import { AnimatedStyle } from 'react-native-reanimated';
 export interface ImageProps extends ReactNativeImageProps {
     /**
      * Describes the image to screen-readers and marks the image as `accessible`.
@@ -26,6 +27,14 @@ export interface ImageProps extends ReactNativeImageProps {
      * Style the outer View of the image.
      */
     wrapperStyle?: ViewStyle;
+    /**
+     * Changes the underlying image component to Animated.Image.
+     */
+    animated?: boolean;
+    /**
+     * Style the image if animated.
+     */
+    animatedImageStyle?: AnimatedStyle<ImageStyle>;
 }
-export declare function Image({ source, onLoad, defaultLoading, loadingEnabled, loaderSize, loadingBackgroundStyles, style, wrapperStyle, alt, ...props }: ImageProps): React.JSX.Element;
+export declare function Image({ source, onLoad, defaultLoading, loadingEnabled, loaderSize, loadingBackgroundStyles, style, wrapperStyle, alt, animated, animatedImageStyle, ...props }: ImageProps): React.JSX.Element;
 //# sourceMappingURL=image.d.ts.map

package/build/components/display/image.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,~~EAIL~~,UAAU,IAAI,qBAAqB,EAGnC,SAAS,EACV,MAAM,cAAc,CAAA;~~AAQrB~~,MAAM,WAAW,UAAW,SAAQ,qBAAqB;IACvD;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,uBAAuB,CAAC,EAAE,SAAS,CAAA;IACnC;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;~~CACzB~~;AAED,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,MAAa,EACb,cAAqB,EACrB,cAAqB,EACrB,UAAe,EACf,uBAAuB,EACvB,KAAU,EACV,YAAiB,EACjB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,~~qBAiCZ~~"}
1	+ {"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAGL,UAAU,EAEV,UAAU,IAAI,qBAAqB,EAGnC,SAAS,EACV,MAAM,cAAc,CAAA;AACrB,OAAiB,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAQjE,MAAM,WAAW,UAAW,SAAQ,qBAAqB;IACvD;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,uBAAuB,CAAC,EAAE,SAAS,CAAA;IACnC;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;CAC/C;AAED,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,MAAa,EACb,cAAqB,EACrB,cAAqB,EACrB,UAAe,EACf,uBAAuB,EACvB,KAAU,EACV,YAAiB,EACjB,GAAG,EACH,QAAgB,EAChB,kBAAuB,EACvB,GAAG,KAAK,EACT,EAAE,UAAU,qBAoCZ"}

package/build/components/display/image.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { noop } from 'lodash';
 import React, { useState } from 'react';
 import { Image as ReactNativeImage, StyleSheet, View, } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { useTheme } from '../../hooks';
 import { Spinner } from './spinner';
-export function Image({ source, onLoad = noop, defaultLoading = true, loadingEnabled = true, loaderSize = 24, loadingBackgroundStyles, style = {}, wrapperStyle = {}, alt, ...props }) {
+export function Image({ source, onLoad = noop, defaultLoading = true, loadingEnabled = true, loaderSize = 24, loadingBackgroundStyles, style = {}, wrapperStyle = {}, alt, animated = false, animatedImageStyle = {}, ...props }) {
     const [loading, setLoading] = useState(defaultLoading);
     const imageStyles = StyleSheet.flatten(style);
     const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {};
@@ -12,8 +13,9 @@ export function Image({ source, onLoad = noop, defaultLoading = true, loadingEna
         setLoading(false);
         onLoad?.(event);
     };
-    return (<View style={wrapperStyle} accessible={Boolean(alt)} accessibilityRole="image" accessibilityState={{ busy: loading }}>
-      <ReactNativeImage style={[styles.image, imageStyles]} onLoad={handleOnLoad} source={source} alt={loading ? '' : alt} {...props}/>
+    const ImageComponent = animated || animatedImageStyle ? Animated.Image : ReactNativeImage;
+    return (<View style={wrapperStyle} accessible={Boolean(alt)} accessibilityRole="image" accessibilityState={{ busy: loading }} collapsable={false}>
+      <ImageComponent style={[styles.image, imageStyles, animatedImageStyle]} onLoad={handleOnLoad} source={source} alt={loading ? '' : alt} {...props}/>
       {loading && loadingEnabled && (<View style={[styles.loadingBackground, loadingBackgroundStyles]}>
           <Spinner size={loaderSize}/>
         </View>)}

package/build/components/display/image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,~~EAGL~~,KAAK,IAAI,gBAAgB,EAEzB,UAAU,EACV,IAAI,GAEL,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;~~AAkCnC~~,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,MAAM,GAAG,IAAI,EACb,cAAc,GAAG,IAAI,EACrB,cAAc,GAAG,IAAI,EACrB,UAAU,GAAG,EAAE,EACf,uBAAuB,EACvB,KAAK,GAAG,EAAE,EACV,YAAY,GAAG,EAAE,EACjB,GAAG,EACH,GAAG,KAAK,EACG;IACX,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAA;IAEtD,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,GAAG,WAAW,IAAI,EAAE,CAAA;IAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IAEzD,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE;QAClC,UAAU,CAAC,KAAK,CAAC,CAAA;QACjB,MAAM,EAAE,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,YAAY,CAAC,CACpB,UAAU,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CACzB,iBAAiB,CAAC,OAAO,CACzB,kBAAkB,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,~~CAEtC~~;MAAA,CAAC,~~gBAAgB~~,~~CACf~~,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,~~CACnC~~,MAAM,CAAC,CAAC,YAAY,CAAC,CACrB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CACxB,IAAI,KAAK,CAAC,EAEZ;MAAA,CAAC,OAAO,IAAI,cAAc,IAAI,CAC5B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,uBAAuB,CAAC,CAAC,CAC/D;UAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,EAC5B;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAYD,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAU,EAAE,EAAE;IAC5D,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,iBAAiB,EAAE;YACjB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,YAAY;YACZ,KAAK;YACL,MAAM;SACP;QACD,KAAK,EAAE;YACL,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,KAAK;YACL,MAAM;SACP;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { noop } from 'lodash'\nimport React, { useState } from 'react'\nimport {\n AnimatableNumericValue,\n DimensionValue,\n Image as ReactNativeImage,\n ImageProps as ReactNativeImageProps,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Spinner } from './spinner'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ImageProps extends ReactNativeImageProps {\n /*\n Describes the image to screen-readers and marks the image as `accessible`.\n * Passing an empty string will hide the image from screen-readers.\n /\n alt: string\n /\n Shows the image's loading spinner right away. Enabled by default.\n /\n defaultLoading?: boolean\n /\n Turn on or off loading spinner.\n /\n loadingEnabled?: boolean\n /\n Size of the loading spinner.\n /\n loaderSize?: number\n /\n Style object for the preload background.\n /\n loadingBackgroundStyles?: ViewStyle\n /\n Style the outer View of the image.\n */\n wrapperStyle?: ViewStyle\n}\n\nexport function Image({\n source,\n onLoad = noop,\n defaultLoading = true,\n loadingEnabled = true,\n loaderSize = 24,\n loadingBackgroundStyles,\n style = {},\n wrapperStyle = {},\n alt,\n ...props\n}: ImageProps) {\n const [loading, setLoading] = useState(defaultLoading)\n\n const imageStyles = StyleSheet.flatten(style)\n const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles \|\| {}\n const styles = useStyles({ width, height, borderRadius })\n\n const handleOnLoad = (event: any) => {\n setLoading(false)\n onLoad?.(event)\n }\n\n return (\n <View\n style={wrapperStyle}\n accessible={Boolean(alt)}\n accessibilityRole=\"image\"\n accessibilityState={{ busy: loading }}\n >\n <~~ReactNativeImage~~\n style={[styles.image, imageStyles]}\n onLoad={handleOnLoad}\n source={source}\n alt={loading ? '' : alt}\n {...props}\n />\n {loading && loadingEnabled && (\n <View style={[styles.loadingBackground, loadingBackgroundStyles]}>\n <Spinner size={loaderSize} />\n </View>\n )}\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\ninterface Styles {\n width: DimensionValue\n height: DimensionValue\n borderRadius: AnimatableNumericValue \| string\n}\n\nconst useStyles = ({ width, height, borderRadius }: Styles) => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n loadingBackground: {\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: colors.fillColorNeutral070,\n borderRadius,\n width,\n height,\n },\n image: {\n backgroundColor: colors.fillColorNeutral070,\n width,\n height,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { noop } from 'lodash'\nimport React, { useState } from 'react'\nimport {\n AnimatableNumericValue,\n DimensionValue,\n ImageStyle,\n Image as ReactNativeImage,\n ImageProps as ReactNativeImageProps,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native'\nimport Animated, { AnimatedStyle } from 'react-native-reanimated'\nimport { useTheme } from '../../hooks'\nimport { Spinner } from './spinner'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ImageProps extends ReactNativeImageProps {\n /*\n Describes the image to screen-readers and marks the image as `accessible`.\n * Passing an empty string will hide the image from screen-readers.\n /\n alt: string\n /\n Shows the image's loading spinner right away. Enabled by default.\n /\n defaultLoading?: boolean\n /\n Turn on or off loading spinner.\n /\n loadingEnabled?: boolean\n /\n Size of the loading spinner.\n /\n loaderSize?: number\n /\n Style object for the preload background.\n /\n loadingBackgroundStyles?: ViewStyle\n /\n Style the outer View of the image.\n /\n wrapperStyle?: ViewStyle\n /\n Changes the underlying image component to Animated.Image.\n /\n animated?: boolean\n /\n Style the image if animated.\n */\n animatedImageStyle?: AnimatedStyle<ImageStyle>\n}\n\nexport function Image({\n source,\n onLoad = noop,\n defaultLoading = true,\n loadingEnabled = true,\n loaderSize = 24,\n loadingBackgroundStyles,\n style = {},\n wrapperStyle = {},\n alt,\n animated = false,\n animatedImageStyle = {},\n ...props\n}: ImageProps) {\n const [loading, setLoading] = useState(defaultLoading)\n\n const imageStyles = StyleSheet.flatten(style)\n const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles \|\| {}\n const styles = useStyles({ width, height, borderRadius })\n\n const handleOnLoad = (event: any) => {\n setLoading(false)\n onLoad?.(event)\n }\n\n const ImageComponent = animated \|\| animatedImageStyle ? Animated.Image : ReactNativeImage\n\n return (\n <View\n style={wrapperStyle}\n accessible={Boolean(alt)}\n accessibilityRole=\"image\"\n accessibilityState={{ busy: loading }}\n collapsable={false}\n >\n <ImageComponent\n style={[styles.image, imageStyles, animatedImageStyle]}\n onLoad={handleOnLoad}\n source={source}\n alt={loading ? '' : alt}\n {...props}\n />\n {loading && loadingEnabled && (\n <View style={[styles.loadingBackground, loadingBackgroundStyles]}>\n <Spinner size={loaderSize} />\n </View>\n )}\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\ninterface Styles {\n width: DimensionValue\n height: DimensionValue\n borderRadius: AnimatableNumericValue \| string\n}\n\nconst useStyles = ({ width, height, borderRadius }: Styles) => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n loadingBackground: {\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: colors.fillColorNeutral070,\n borderRadius,\n width,\n height,\n },\n image: {\n backgroundColor: colors.fillColorNeutral070,\n width,\n height,\n },\n })\n}\n"]}

package/build/components/display/keyboard_view.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard_view.d.ts","sourceRoot":"","sources":["../../../src/components/display/keyboard_view.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,~~KAA4B~~,MAAM,OAAO,CAAA;~~AAChD~~,OAAO,~~EAML~~,SAAS,EACV,MAAM,cAAc,CAAA;AAGrB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,~~qBA4BnD~~"}
1	+ {"version":3,"file":"keyboard_view.d.ts","sourceRoot":"","sources":["../../../src/components/display/keyboard_view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAC3D,OAAO,EAOL,SAAS,EACV,MAAM,cAAc,CAAA;AAGrB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,qBAiCnD"}

package/build/components/display/keyboard_view.js CHANGED Viewed

@@ -1,46 +1,47 @@
-import { useTheme as useNavigationTheme } from '@react-navigation/native';
-import React, { useMemo, useState } from 'react';
-import { KeyboardAvoidingView, Platform, StyleSheet, useWindowDimensions, View, } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Keyboard, KeyboardAvoidingView, Platform, StyleSheet, useWindowDimensions, View, } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 export function KeyboardView({ children }) {
     const styles = useStyles();
+    const isKeyboardOpen = useKeyboardOpen();
     const { height } = useWindowDimensions();
     const insets = useSafeAreaInsets();
     const [pageSheetGap, setPageSheetGap] = useState(0);
-    const keyboardVerticalOffset = useMemo(() => pageSheetGap + insets.top - insets.bottom, [pageSheetGap, insets.top, insets.bottom]);
+    const keyboardVerticalOffset = useMemo(() => Platform.select({
+        ios: pageSheetGap - insets.bottom,
+        android: pageSheetGap + insets.bottom,
+    }), [pageSheetGap, insets.bottom]);
     return (<View style={styles.pageGapView} onLayout={event => {
             const { height: viewHeight } = event.nativeEvent.layout;
-            setPageSheetGap(height - viewHeight - insets.top);
+            setPageSheetGap(height - viewHeight);
         }}>
-      <KeyboardAvoidingView keyboardVerticalOffset={keyboardVerticalOffset} behavior={Platform.select({ ios: 'padding' })} style={styles.container}>
+      <KeyboardAvoidingView keyboardVerticalOffset={keyboardVerticalOffset} behavior={'padding'} style={styles.keyboardView} enabled={Platform.select({ android: isKeyboardOpen, ios: true })}>
         {children}
       </KeyboardAvoidingView>
     </View>);
 }
+const useKeyboardOpen = () => {
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        return Keyboard.addListener('keyboardDidShow', () => {
+            setOpen(true);
+        }).remove;
+    }, []);
+    useEffect(() => {
+        return Keyboard.addListener('keyboardDidHide', () => {
+            setOpen(false);
+        }).remove;
+    }, []);
+    return open;
+};
 const useStyles = () => {
-    const navigationTheme = useNavigationTheme();
     return StyleSheet.create({
-        container: {
-            flex: 1,
-            justifyContent: 'center',
-        },
         pageGapView: {
             flex: 1,
         },
         keyboardView: {
             flex: 1,
         },
-        listContainer: {
-            gap: 12,
-            paddingHorizontal: 16,
-            paddingVertical: 12,
-        },
-        textInputContainer: {
-            borderTopWidth: 1,
-            padding: 12,
-            backgroundColor: navigationTheme.colors.card,
-        },
-        textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },
     });
 };
 //# sourceMappingURL=keyboard_view.js.map

package/build/components/display/keyboard_view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard_view.js","sourceRoot":"","sources":["../../../src/components/display/keyboard_view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~QAAQ,IAAI,kBAAkB,~~EAAE,~~MAAM~~,~~0BAA0B,CAAA;AACzE,OAAO,KAAK,~~EAAE,~~EAAE,~~OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;~~AAChD~~,OAAO,EACL,oBAAoB,EACpB,QAAQ,EACR,UAAU,EACV,mBAAmB,EACnB,IAAI,GAEL,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAElE,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAa;IAClD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;~~IAE1B~~,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAA;IACxC,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IAC3D,MAAM,sBAAsB,GAAG,OAAO,CACpC,GAAG,EAAE,~~CAAC~~,~~YAAY~~,~~GAAG~~,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,~~EAC/C~~,~~CAAC~~,YAAY,~~EAAE~~,MAAM,CAAC,~~GAAG~~,EAAE,MAAM,CAAC,MAAM,CAAC,~~CAC1C~~,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC1B,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE;YAChB,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAA;YACvD,eAAe,CAAC,MAAM,GAAG,UAAU,~~GAAG,MAAM,~~CAAC,~~GAAG,CAAC,~~CAAA;~~QACnD~~,CAAC,CAAC,CAEF;MAAA,CAAC,oBAAoB,CACnB,sBAAsB,CAAC,CAAC,sBAAsB,CAAC,CAC/C,QAAQ,CAAC,CAAC,~~QAAQ~~,CAAC,~~MAAM~~,CAAC,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~SAAS~~,~~EAAE,~~CAAC,~~CAAC~~,~~CAC9C~~,~~KAAK~~,CAAC,CAAC,MAAM,CAAC,~~SAAS~~,CAAC,~~CAExB~~;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,oBAAoB,CACxB;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,~~SAAS~~,GAAG,GAAG,EAAE;~~IACrB~~,MAAM,~~eAAe~~,~~GAAG~~,~~kBAAkB,~~EAAE,~~CAAA;IAE5C,~~OAAO,~~UAAU~~,CAAC,~~MAAM~~,CAAC;~~QACvB~~,SAAS,EAAE;~~YACT~~,~~IAAI~~,~~EAAE~~,CAAC~~;YACP~~,~~cAAc~~,EAAE,~~QAAQ;SACzB;QACD~~,~~WAAW,~~EAAE;~~YACX~~,IAAI,~~EAAE~~,~~CAAC~~;~~SACR;QACD~~,~~YAAY~~,~~EAAE~~;~~YACZ~~,~~IAAI~~,EAAE,CAAC;~~SACR;QACD~~,~~aAAa~~,~~EAAE;YACb~~,GAAG,EAAE~~,EAAE~~;~~YACP~~,iBAAiB,EAAE,EAAE;~~YACrB~~,~~eAAe~~,~~EAAE~~,~~EAAE;SACpB;QACD~~,~~kBAAkB~~,~~EAAE~~;~~YAClB~~,~~cAAc~~,~~EAAE~~,CAAC;~~YACjB~~,~~OAAO~~,EAAE,EAAE~~;YACX~~,~~eAAe~~,~~EAAE~~,~~eAAe~~,~~CAAC~~,~~MAAM~~,CAAC,~~IAAI~~;~~SAC7C;QACD~~,SAAS,~~EAAE~~,EAAE,~~YAAY~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,WAAW,EAAE,~~CAAC~~,EAAE,~~OAAO~~,EAAE,EAAE,~~EAAE~~;~~KAC7D~~,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import ~~{ useTheme as useNavigationTheme } from '@react-navigation/native'\nimport~~ React, { useMemo, useState } from 'react'\nimport {\n KeyboardAvoidingView,\n Platform,\n StyleSheet,\n useWindowDimensions,\n View,\n ViewProps,\n} from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\n\nexport function KeyboardView({ children }: ViewProps) {\n const styles = useStyles()\n\n const { height } = useWindowDimensions()\n const insets = useSafeAreaInsets()\n const [pageSheetGap, setPageSheetGap] = useState<number>(0)\n const keyboardVerticalOffset = useMemo(\n () => pageSheetGap + insets.~~top~~ - insets.bottom,\n [pageSheetGap, insets.~~top, insets.~~bottom]\n )\n\n return (\n <View\n style={styles.pageGapView}\n onLayout={event => {\n const { height: viewHeight } = event.nativeEvent.layout\n setPageSheetGap(height - viewHeight ~~- insets.top~~)\n }}\n >\n <KeyboardAvoidingView\n keyboardVerticalOffset={keyboardVerticalOffset}\n behavior={Platform.select({ ios: ~~'padding'~~ })}\n ~~style={styles.container}\n~~ >\n {children}\n </KeyboardAvoidingView>\n </View>\n )\n}\n\nconst ~~useStyles~~ = () => {\n const ~~navigationTheme~~ = ~~useNavigationTheme~~()\n\n return ~~StyleSheet~~.~~create~~({\n ~~container:~~ {\n ~~flex:~~ ~~1,\~~n ~~justifyContent:~~ '~~center~~'~~,\n },\n pageGapView:~~ {\n ~~flex: 1,\~~n },\n ~~keyboardView:~~ {\n ~~flex:~~ ~~1,\~~n },\n ~~listContainer:~~ {\n ~~gap:~~ ~~12,\~~n ~~paddingHorizontal~~: ~~16,\~~n ~~paddingVertical~~: 12,\n },\n ~~textInputContainer~~: {\n ~~borderTopWidth~~: 1,\n ~~padding: 12,\n backgroundColor: navigationTheme.colors.card,\n~~ },\n ~~textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },\n~~ })\n}\n"]}
1	+ {"version":3,"file":"keyboard_view.js","sourceRoot":"","sources":["../../../src/components/display/keyboard_view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,QAAQ,EACR,oBAAoB,EACpB,QAAQ,EACR,UAAU,EACV,mBAAmB,EACnB,IAAI,GAEL,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAElE,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAa;IAClD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,cAAc,GAAG,eAAe,EAAE,CAAA;IACxC,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAA;IACxC,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IAC3D,MAAM,sBAAsB,GAAG,OAAO,CACpC,GAAG,EAAE,CACH,QAAQ,CAAC,MAAM,CAAC;QACd,GAAG,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM;QACjC,OAAO,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM;KACtC,CAAC,EACJ,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,CAC9B,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC1B,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE;YAChB,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAA;YACvD,eAAe,CAAC,MAAM,GAAG,UAAU,CAAC,CAAA;QACtC,CAAC,CAAC,CAEF;MAAA,CAAC,oBAAoB,CACnB,sBAAsB,CAAC,CAAC,sBAAsB,CAAC,CAC/C,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,CAEjE;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,oBAAoB,CACxB;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,QAAQ,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,EAAE;YAClD,OAAO,CAAC,IAAI,CAAC,CAAA;QACf,CAAC,CAAC,CAAC,MAAM,CAAA;IACX,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,QAAQ,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,EAAE;YAClD,OAAO,CAAC,KAAK,CAAC,CAAA;QAChB,CAAC,CAAC,CAAC,MAAM,CAAA;IACX,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,WAAW,EAAE;YACX,IAAI,EAAE,CAAC;SACR;QACD,YAAY,EAAE;YACZ,IAAI,EAAE,CAAC;SACR;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { useEffect, useMemo, useState } from 'react'\nimport {\n Keyboard,\n KeyboardAvoidingView,\n Platform,\n StyleSheet,\n useWindowDimensions,\n View,\n ViewProps,\n} from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\n\nexport function KeyboardView({ children }: ViewProps) {\n const styles = useStyles()\n const isKeyboardOpen = useKeyboardOpen()\n const { height } = useWindowDimensions()\n const insets = useSafeAreaInsets()\n const [pageSheetGap, setPageSheetGap] = useState<number>(0)\n const keyboardVerticalOffset = useMemo(\n () =>\n Platform.select({\n ios: pageSheetGap - insets.bottom,\n android: pageSheetGap + insets.bottom,\n }),\n [pageSheetGap, insets.bottom]\n )\n\n return (\n <View\n style={styles.pageGapView}\n onLayout={event => {\n const { height: viewHeight } = event.nativeEvent.layout\n setPageSheetGap(height - viewHeight)\n }}\n >\n <KeyboardAvoidingView\n keyboardVerticalOffset={keyboardVerticalOffset}\n behavior={'padding'}\n style={styles.keyboardView}\n enabled={Platform.select({ android: isKeyboardOpen, ios: true })}\n >\n {children}\n </KeyboardAvoidingView>\n </View>\n )\n}\n\nconst useKeyboardOpen = () => {\n const [open, setOpen] = useState(false)\n\n useEffect(() => {\n return Keyboard.addListener('keyboardDidShow', () => {\n setOpen(true)\n }).remove\n }, [])\n\n useEffect(() => {\n return Keyboard.addListener('keyboardDidHide', () => {\n setOpen(false)\n }).remove\n }, [])\n\n return open\n}\n\nconst useStyles = () => {\n return StyleSheet.create({\n pageGapView: {\n flex: 1,\n },\n keyboardView: {\n flex: 1,\n },\n })\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.4.1-rc.3",
+  "version": "3.4.1-rc.5",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -54,5 +54,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "87af5eb8d7ed61a83ef9b44daaf3a10a06edbd2e"
+  "gitHead": "02b089f3e6e553fe5d3b5ce141615f8a6d834676"
 }

package/src/components/conversation/attachments/image_attachment.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import {
-  Image,
   StyleSheet,
   Modal,
   Pressable,
@@ -16,7 +15,7 @@ import {
   GestureHandlerRootView,
   type PanGesture,
 } from 'react-native-gesture-handler'
-import Animated, {
+import {
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
@@ -24,7 +23,7 @@ import Animated, {
   type AnimatedStyle,
 } from 'react-native-reanimated'
 import { tokens } from '../../../vendor/tapestry/tokens'
-import { IconButton, Heading, Text } from '../../display'
+import { IconButton, Image, Heading, Text } from '../../display'
 import colorFunction from 'color'
 import { formatDatePreview } from '../../../utils/date'
@@ -42,7 +41,10 @@ export function ImageAttachment({
   attachment: any
   metaProps: MetaProps
 }) {
-  const styles = useStyles()
+  const { attributes } = attachment
+  const { url, urlMedium, filename, metadata = {} } = attributes
+  const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })
   const [visible, setVisible] = useState(false)
   // shared values run on the native UI thread and prevents clogging up the JS thread
@@ -73,18 +75,14 @@ export function ImageAttachment({
     opacity: opacity.value,
   }))
-  const { attributes } = attachment
-  const { url, urlMedium, filename, metadata = {} } = attributes
-  const width = metadata.width || 100
-  const height = metadata.height || 100
   return (
     <>
       <Pressable style={styles.container} onPress={() => setVisible(true)}>
         <Image
           source={{ uri: urlMedium || url }}
-          style={[styles.image, { aspectRatio: width / height }]}
-          accessibilityLabel={filename}
+          style={{ borderRadius: 8 }}
+          wrapperStyle={styles.imageWrapper}
+          alt={filename}
         />
       </Pressable>
       <LightboxModal
@@ -129,10 +127,14 @@ const LightboxModal = ({
       <SafeAreaView style={styles.modal}>
         <GestureHandlerRootView>
           <GestureDetector gesture={panGesture}>
-            <Animated.Image
+            <Image
               source={{ uri }}
-              style={[styles.lightboxImage, animatedImageStyle]}
+              loadingBackgroundStyles={styles.lightboxImageLoading}
+              style={styles.lightboxImage}
+              animatedImageStyle={animatedImageStyle}
               resizeMode="contain"
+              animated={true}
+              alt=""
             />
           </GestureDetector>
           <View style={styles.actionToolbar} accessibilityRole="toolbar">
@@ -168,7 +170,12 @@ const LightboxModal = ({
   )
 }
-const useStyles = () => {
+interface UseStylesProps {
+  imageWidth?: number
+  imageHeight?: number
+}
+const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {}) => {
   const { width: windowWidth } = useWindowDimensions()
   const backgroundColor = tokens.colorNeutral7
   const transparentBackgroundColor = useMemo(
@@ -180,9 +187,12 @@ const useStyles = () => {
     container: {
       maxWidth: '100%',
     },
+    imageWrapper: {
+      minWidth: 200,
+      aspectRatio: imageWidth / imageHeight,
+    },
     image: {
       borderRadius: 8,
-      minWidth: 200,
     },
     modal: {
       flex: 1,
@@ -191,8 +201,12 @@ const useStyles = () => {
       alignItems: 'center',
     },
     lightboxImage: {
-      width: windowWidth,
       height: '100%',
+      width: windowWidth,
+      backgroundColor,
+    },
+    lightboxImageLoading: {
+      backgroundColor,
     },
     actionToolbar: {
       width: '100%',

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

@@ -192,21 +192,20 @@ function MessageFormInput() {
       <View style={styles.textInputRow}>
         {usingGiphy ? (
           <View style={styles.giphyBadge}>
-            <Text>/Giphy</Text>
+            <Text style={styles.giphyBadgeText}>/giphy</Text>
           </View>
         ) : null}
-        <View style={styles.textInput}>
-          <TextInput
-            multiline={true}
-            aria-disabled={true}
-            placeholder="Send a message"
-            onChangeText={setText}
-            value={text}
-            maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}
-            onSubmitEditing={onSubmit}
-          />
-        </View>
+        <TextInput
+          style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]}
+          multiline={true}
+          aria-disabled={true}
+          placeholder="Send a message"
+          onChangeText={setText}
+          value={text}
+          maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}
+          onSubmitEditing={onSubmit}
+        />
       </View>
       {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}
@@ -359,25 +358,37 @@ const useMessageFormStyles = () => {
     textInputBoundary: {
       borderRadius: 24,
       borderWidth: 1,
-      padding: 12,
-      paddingHorizontal: 20,
       borderColor: theme.colors.fillColorNeutral050Base,
       flex: 1,
       gap: 12,
     },
     textInputRow: {
       flexDirection: 'row',
-      alignItems: 'center',
       gap: 12,
+      alignItems: 'center',
     },
     textInput: {
+      paddingVertical: 8,
+      paddingHorizontal: 20,
+      color: 'white',
+      textAlignVertical: 'center',
+      justifyContent: 'center',
       flex: 1,
+      fontSize: 16,
+    },
+    textInputWithGiphy: {
+      paddingLeft: 0,
     },
     giphyBadge: {
       backgroundColor: theme.colors.fillColorNeutral050Base,
       borderRadius: 24,
-      padding: 8,
       paddingHorizontal: 12,
+      marginLeft: 12,
+      padding: 4,
+    },
+    giphyBadgeText: {
+      fontSize: 14,
+      color: theme.colors.interaction,
     },
     textInputSend: {
       borderRadius: 24,

package/src/components/display/image.tsx CHANGED Viewed

@@ -3,12 +3,14 @@ import React, { useState } from 'react'
 import {
   AnimatableNumericValue,
   DimensionValue,
+  ImageStyle,
   Image as ReactNativeImage,
   ImageProps as ReactNativeImageProps,
   StyleSheet,
   View,
   ViewStyle,
 } from 'react-native'
+import Animated, { AnimatedStyle } from 'react-native-reanimated'
 import { useTheme } from '../../hooks'
 import { Spinner } from './spinner'
@@ -42,6 +44,14 @@ export interface ImageProps extends ReactNativeImageProps {
    * Style the outer View of the image.
    */
   wrapperStyle?: ViewStyle
+  /**
+   * Changes the underlying image component to Animated.Image.
+   */
+  animated?: boolean
+  /**
+   * Style the image if animated.
+   */
+  animatedImageStyle?: AnimatedStyle<ImageStyle>
 }
 export function Image({
@@ -54,6 +64,8 @@ export function Image({
   style = {},
   wrapperStyle = {},
   alt,
+  animated = false,
+  animatedImageStyle = {},
   ...props
 }: ImageProps) {
   const [loading, setLoading] = useState(defaultLoading)
@@ -67,15 +79,18 @@ export function Image({
     onLoad?.(event)
   }
+  const ImageComponent = animated || animatedImageStyle ? Animated.Image : ReactNativeImage
   return (
     <View
       style={wrapperStyle}
       accessible={Boolean(alt)}
       accessibilityRole="image"
       accessibilityState={{ busy: loading }}
+      collapsable={false}
     >
-      <ReactNativeImage
-        style={[styles.image, imageStyles]}
+      <ImageComponent
+        style={[styles.image, imageStyles, animatedImageStyle]}
         onLoad={handleOnLoad}
         source={source}
         alt={loading ? '' : alt}

package/src/components/display/keyboard_view.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
-import { useTheme as useNavigationTheme } from '@react-navigation/native'
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import {
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
@@ -12,13 +12,17 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 export function KeyboardView({ children }: ViewProps) {
   const styles = useStyles()
+  const isKeyboardOpen = useKeyboardOpen()
   const { height } = useWindowDimensions()
   const insets = useSafeAreaInsets()
   const [pageSheetGap, setPageSheetGap] = useState<number>(0)
   const keyboardVerticalOffset = useMemo(
-    () => pageSheetGap + insets.top - insets.bottom,
-    [pageSheetGap, insets.top, insets.bottom]
+    () =>
+      Platform.select({
+        ios: pageSheetGap - insets.bottom,
+        android: pageSheetGap + insets.bottom,
+      }),
+    [pageSheetGap, insets.bottom]
   )
   return (
@@ -26,13 +30,14 @@ export function KeyboardView({ children }: ViewProps) {
       style={styles.pageGapView}
       onLayout={event => {
         const { height: viewHeight } = event.nativeEvent.layout
-        setPageSheetGap(height - viewHeight - insets.top)
+        setPageSheetGap(height - viewHeight)
       }}
     >
       <KeyboardAvoidingView
         keyboardVerticalOffset={keyboardVerticalOffset}
-        behavior={Platform.select({ ios: 'padding' })}
-        style={styles.container}
+        behavior={'padding'}
+        style={styles.keyboardView}
+        enabled={Platform.select({ android: isKeyboardOpen, ios: true })}
       >
         {children}
       </KeyboardAvoidingView>
@@ -40,30 +45,31 @@ export function KeyboardView({ children }: ViewProps) {
   )
 }
-const useStyles = () => {
-  const navigationTheme = useNavigationTheme()
+const useKeyboardOpen = () => {
+  const [open, setOpen] = useState(false)
+  useEffect(() => {
+    return Keyboard.addListener('keyboardDidShow', () => {
+      setOpen(true)
+    }).remove
+  }, [])
+  useEffect(() => {
+    return Keyboard.addListener('keyboardDidHide', () => {
+      setOpen(false)
+    }).remove
+  }, [])
+  return open
+}
+const useStyles = () => {
   return StyleSheet.create({
-    container: {
-      flex: 1,
-      justifyContent: 'center',
-    },
     pageGapView: {
       flex: 1,
     },
     keyboardView: {
       flex: 1,
     },
-    listContainer: {
-      gap: 12,
-      paddingHorizontal: 16,
-      paddingVertical: 12,
-    },
-    textInputContainer: {
-      borderTopWidth: 1,
-      padding: 12,
-      backgroundColor: navigationTheme.colors.card,
-    },
-    textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },
   })
 }