fix: delayed modal closure on exiting animations

Author: isekovanic

package/src/components/Poll/CreatePollContent.tsx

@@ -107,9 +107,8 @@ export const CreatePollContent = () => {
   }, [currentOptionPositions, normalizedCreatePollOptionGap, optionIdsKey]);
 
   const onBackPressHandler = useCallback(() => {
-    pollComposer.initState();
     closePollCreationDialog?.();
-  }, [pollComposer, closePollCreationDialog]);
+  }, [closePollCreationDialog]);
 
   const onCreatePollPressHandler = useCallback(async () => {
     await createAndSendPoll();
@@ -220,27 +219,49 @@ export const CreatePoll = ({
 > &
   Pick<InputMessageInputContextValue, 'CreatePollContent'>) => {
   const messageComposer = useMessageComposer();
+  const [isClosing, setIsClosing] = useState(false);
+  const closeFrameRef = useRef<number | null>(null);
+
+  const closeCreatePollDialog = useCallback(() => {
+    if (closeFrameRef.current !== null) {
+      return;
+    }
+
+    setIsClosing(true);
+    // Let the modal render once with exit animations disabled before we dismiss it.
+    closeFrameRef.current = requestAnimationFrame(() => {
+      closeFrameRef.current = null;
+      closePollCreationDialog?.();
+    });
+  }, [closePollCreationDialog]);
+
+  useEffect(() => {
+    return () => {
+      if (closeFrameRef.current !== null) {
+        cancelAnimationFrame(closeFrameRef.current);
+      }
+      // Reset after teardown so poll field exit animations do not delay modal dismissal.
+      messageComposer.pollComposer.initState();
+    };
+  }, [messageComposer]);
 
   const createAndSendPoll = useCallback(async () => {
     try {
       await messageComposer.createPoll();
       await sendMessage();
-      closePollCreationDialog?.();
-      // it's important that the reset of the pollComposer state happens
-      // after we've already closed the modal; as otherwise we'd get weird
-      // UI behaviour.
-      messageComposer.pollComposer.initState();
+      closeCreatePollDialog();
     } catch (error) {
       console.log('Error creating a poll and sending a message:', error);
     }
-  }, [messageComposer, sendMessage, closePollCreationDialog]);
+  }, [closeCreatePollDialog, messageComposer, sendMessage]);
 
   return (
     <CreatePollContentProvider
       value={{
-        closePollCreationDialog,
+        closePollCreationDialog: closeCreatePollDialog,
         createAndSendPoll,
         createPollOptionGap,
+        isClosing,
         sendMessage,
       }}
     >

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -5,7 +5,7 @@ import Animated, { LinearTransition, StretchInY, StretchOutY } from 'react-nativ
 
 import { PollComposerState } from 'stream-chat';
 
-import { useTheme, useTranslationContext } from '../../../contexts';
+import { useCreatePollContentContext, useTheme, useTranslationContext } from '../../../contexts';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStableCallback } from '../../../hooks';
 import { useStateStore } from '../../../hooks/useStateStore';
@@ -91,6 +91,7 @@ const MaxVotesTextInput = () => {
 export const MultipleVotesSettings = () => {
   const [allowMaxVotesPerPerson, setAllowMaxVotesPerPerson] = useState<boolean>(false);
   const { t } = useTranslationContext();
+  const { isClosing } = useCreatePollContentContext();
   const messageComposer = useMessageComposer();
   const { pollComposer } = messageComposer;
   const { updateFields } = pollComposer;
@@ -133,7 +134,7 @@ export const MultipleVotesSettings = () => {
     <Animated.View
       layout={LinearTransition.duration(200)}
       entering={StretchInY.duration(200)}
-      exiting={StretchOutY.duration(200)}
+      exiting={isClosing ? undefined : StretchOutY.duration(200)}
       style={[styles.settingsWrapper, multipleAnswers.settingsWrapper]}
     >
       <View style={[styles.optionCard, multipleAnswers.optionCard]}>
@@ -152,7 +153,7 @@ export const MultipleVotesSettings = () => {
       {allowMaxVotesPerPerson ? (
         <Animated.View
           entering={StretchInY.duration(200)}
-          exiting={StretchOutY.duration(200)}
+          exiting={isClosing ? undefined : StretchOutY.duration(200)}
           style={[styles.row, multipleAnswers.row]}
         >
           <Button

package/src/contexts/pollContext/createPollContentContext.tsx

@@ -9,6 +9,7 @@ export type CreatePollContentContextValue = {
   createAndSendPoll: () => Promise<void>;
   sendMessage: MessageInputContextValue['sendMessage'];
   closePollCreationDialog?: () => void;
+  isClosing?: boolean;
   /**
    * Vertical gap between poll options in the poll creation screen.
    *