fix: switch margin in poll content (#3414)

Co-authored-by: Ivan Sekovanikj <31964049+isekovanic@users.noreply.github.com>

Author: khushal87

examples/SampleApp/yarn.lock

@@ -8354,10 +8354,10 @@ stream-chat-react-native-core@8.1.0:
   version "0.0.0"
   uid ""
 
-stream-chat@^9.30.1:
-  version "9.30.1"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.30.1.tgz#86d152e4d0894854370512d17530854541f7990b"
-  integrity sha512-8f58tCo3QfgzaNhWHpRQzEfglSPPn4lGRn74FFTr/pn53dMJwtcKDSohV6NTHBrkYWTXYObRnHgh2IhGFUKckw==
+stream-chat@^9.33.0:
+  version "9.34.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.34.0.tgz#e92c3262e1b6fbe92b1b1148286ee152849250dc"
+  integrity sha512-b65Z+ufAtygAwT2dCQ8ImgMx01b9zgS1EZ8OK5lRHhSJKYKSsSa1pS3USbbFq6QpuwGZwXM3lovGXLYoWiG84g==
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -27,6 +27,7 @@ import {
 } from '../../../contexts/translationContext/TranslationContext';
 
 import { components, primitives } from '../../../theme';
+import { FileTypes } from '../../../types/types';
 import { checkMessageEquality, checkQuotedMessageEquality } from '../../../utils/utils';
 import { Poll } from '../../Poll/Poll';
 import { useMessageData } from '../hooks/useMessageData';
@@ -570,17 +571,27 @@ export const MessageContent = (props: MessageContentProps) => {
   const messageHasSingleFile =
     messageContentOrder.length === 1 && messageContentOrder[0] === 'files' && isSingleFile;
   const messageHasOnlyText = messageContentOrder.length === 1 && messageContentOrder[0] === 'text';
+  const messageHasGiphyOrImgur =
+    otherAttachments.filter(
+      (file) => file.type === FileTypes.Giphy || file.type === FileTypes.Imgur,
+    ).length > 0;
 
   const hidePaddingTop =
-    messageHasPoll || messageHasSingleImage || messageHasSingleFile || messageHasOnlyText;
+    messageHasPoll ||
+    messageHasSingleImage ||
+    messageHasSingleFile ||
+    messageHasOnlyText ||
+    messageHasGiphyOrImgur;
 
-  const hidePaddingHorizontal = messageHasPoll || messageHasSingleImage || messageHasSingleFile;
+  const hidePaddingHorizontal =
+    messageHasPoll || messageHasSingleImage || messageHasSingleFile || messageHasGiphyOrImgur;
 
   const hidePaddingBottom =
     messageHasPoll ||
     messageHasSingleImage ||
     messageHasSingleFile ||
     messageHasOnlyText ||
+    messageHasGiphyOrImgur ||
     (messageContentOrder.length > 1 &&
       messageContentOrder[messageContentOrder.length - 1] === 'text');
 

package/src/components/MessageList/MessageList.tsx

@@ -65,6 +65,7 @@ import { ThreadContextValue, useThreadContext } from '../../contexts/threadConte
 
 import { useStableCallback } from '../../hooks';
 import { useStateStore } from '../../hooks/useStateStore';
+import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
 import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
@@ -1171,7 +1172,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     if (additionalFlatListProps?.onLayout) {
       additionalFlatListProps.onLayout(event);
     }
-    viewportHeightRef.current = event.nativeEvent.layout.height;
+    const nextViewportHeight = event.nativeEvent.layout.height;
+    if (viewportHeightRef.current !== nextViewportHeight) {
+      const previousViewportHeight = viewportHeightRef.current ?? nextViewportHeight;
+      const closeCorrectionDeltaY = nextViewportHeight - previousViewportHeight;
+      bumpOverlayLayoutRevision(closeCorrectionDeltaY);
+    }
+    viewportHeightRef.current = nextViewportHeight;
   });
 
   if (!ListComponent) {

package/src/components/Poll/CreatePollContent.tsx

@@ -277,9 +277,7 @@ const useStyles = () => {
       optionCardWrapper: {
         gap: primitives.spacingMd,
       },
-      optionCardSwitch: {
-        marginRight: primitives.spacingMd,
-      },
+      optionCardSwitch: {},
     });
   }, [semantics]);
 };

package/src/components/Poll/components/MultipleAnswersField.tsx

@@ -122,9 +122,7 @@ const useStyles = () => {
       optionCardWrapper: {
         gap: primitives.spacingMd,
       },
-      optionCardSwitch: {
-        marginRight: primitives.spacingMd,
-      },
+      optionCardSwitch: {},
     });
   }, [semantics]);
 };

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -31,6 +31,7 @@ export const MessageOverlayHostLayer = () => {
   const messageH = useSharedValue<Rect>(undefined);
   const topH = useSharedValue<Rect>(undefined);
   const bottomH = useSharedValue<Rect>(undefined);
+  const closeCorrectionY = useSharedValue(0);
 
   const topInset = insets.top;
   // Due to edge-to-edge in combination with various libraries, Android sometimes reports
@@ -50,10 +51,17 @@ export const MessageOverlayHostLayer = () => {
   useEffect(
     () =>
       registerOverlaySharedValueController({
+        incrementCloseCorrectionY: (deltaY) => {
+          closeCorrectionY.value += deltaY;
+        },
+        resetCloseCorrectionY: () => {
+          closeCorrectionY.value = 0;
+        },
         reset: () => {
           messageH.value = undefined;
           topH.value = undefined;
           bottomH.value = undefined;
+          closeCorrectionY.value = 0;
         },
         setBottomH: (rect) => {
           bottomH.value = rect;
@@ -65,7 +73,7 @@ export const MessageOverlayHostLayer = () => {
           topH.value = rect;
         },
       }),
-    [bottomH, messageH, topH],
+    [bottomH, closeCorrectionY, messageH, topH],
   );
 
   useEffect(() => {
@@ -163,7 +171,7 @@ export const MessageOverlayHostLayer = () => {
   });
 
   const topItemTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? 0 : shiftY.value) : 0;
+    const target = isActive ? (closing ? closeCorrectionY.value : shiftY.value) : 0;
     return {
       transform: [
         { scale: backdrop.value },
@@ -184,7 +192,7 @@ export const MessageOverlayHostLayer = () => {
   });
 
   const bottomItemTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? 0 : shiftY.value) : 0;
+    const target = isActive ? (closing ? closeCorrectionY.value : shiftY.value) : 0;
     return {
       transform: [
         { scale: backdrop.value },
@@ -205,7 +213,7 @@ export const MessageOverlayHostLayer = () => {
   });
 
   const hostTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? 0 : shiftY.value) : 0;
+    const target = isActive ? (closing ? closeCorrectionY.value : shiftY.value) : 0;
 
     return {
       transform: [

package/src/state-store/message-overlay-store.ts

@@ -17,6 +17,8 @@ const DefaultState = {
 };
 
 type OverlaySharedValueController = {
+  incrementCloseCorrectionY: (deltaY: number) => void;
+  resetCloseCorrectionY: () => void;
   reset: () => void;
   setBottomH: (rect: Rect) => void;
   setMessageH: (rect: Rect) => void;
@@ -46,10 +48,19 @@ export const setOverlayBottomH = (bottomH: Rect) => {
   sharedValueController?.setBottomH(bottomH);
 };
 
-export const openOverlay = (id: string) => overlayStore.partialNext({ closing: false, id });
+export const bumpOverlayLayoutRevision = (closeCorrectionDeltaY = 0) => {
+  sharedValueController?.incrementCloseCorrectionY(closeCorrectionDeltaY);
+};
+
+export const openOverlay = (id: string) => {
+  sharedValueController?.resetCloseCorrectionY();
+  overlayStore.partialNext({ closing: false, id });
+};
 
 export const closeOverlay = () => {
-  requestAnimationFrame(() => overlayStore.partialNext({ closing: true }));
+  requestAnimationFrame(() => {
+    overlayStore.partialNext({ closing: true });
+  });
 };
 
 let actionQueue: Array<() => void | Promise<void>> = [];
@@ -64,8 +75,8 @@ export const scheduleActionOnClose = (action: () => void | Promise<void>) => {
 };
 
 export const finalizeCloseOverlay = () => {
-  sharedValueController?.reset();
   overlayStore.partialNext(DefaultState);
+  sharedValueController?.reset();
 };
 
 export const overlayStore = new StateStore<OverlayState>(DefaultState);