fix: poll input dialog redesign (#3495)

isekovanic · web-flow · commit 19a30772e96b · 2026-03-18T15:24:35.000+01:00
## 🎯 Goal  ## 🛠 Implementation details  ## 🎨 UI Changes  <details> <summary>iOS</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td>  </td> <td>  </td> </tr> </tbody> </table> </details> <details> <summary>Android</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td>  </td> <td>  </td> </tr> </tbody> </table> </details> ## 🧪 Testing  ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android
diff --git a/package/src/components/Poll/CreatePollContent.tsx b/package/src/components/Poll/CreatePollContent.tsx
@@ -4,7 +4,7 @@ import { StyleSheet, Switch, Text, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import Animated, { LinearTransition, useSharedValue } from 'react-native-reanimated';
 
-import { PollComposerState, VotingVisibility } from 'stream-chat';
+import { PollComposerState, StateStore, VotingVisibility } from 'stream-chat';
 
 import { CreatePollOptions, CurrentOptionPositionsCache } from './components';
 
@@ -13,6 +13,7 @@ import { MultipleAnswersField } from './components/MultipleAnswersField';
 import { NameField } from './components/NameField';
 
 import {
+  CreatePollModalState,
   CreatePollContentContextValue,
   CreatePollContentProvider,
   InputMessageInputContextValue,
@@ -107,9 +108,8 @@ export const CreatePollContent = () => {
   }, [currentOptionPositions, normalizedCreatePollOptionGap, optionIdsKey]);
 
   const onBackPressHandler = useCallback(() => {
-    pollComposer.initState();
     closePollCreationDialog?.();
-  }, [pollComposer, closePollCreationDialog]);
+  }, [closePollCreationDialog]);
 
   const onCreatePollPressHandler = useCallback(async () => {
     await createAndSendPoll();
@@ -220,27 +220,51 @@ export const CreatePoll = ({
 > &
   Pick<InputMessageInputContextValue, 'CreatePollContent'>) => {
   const messageComposer = useMessageComposer();
+  const [modalStateStore] = useState(
+    () => new StateStore<CreatePollModalState>({ isClosing: false }),
+  );
+  const closeFrameRef = useRef<number | null>(null);
+
+  const closeCreatePollDialog = useCallback(() => {
+    if (closeFrameRef.current !== null || modalStateStore.getLatestValue().isClosing) {
+      return;
+    }
+
+    // Let the modal render once with exit animations disabled before we dismiss it.
+    modalStateStore.partialNext({ isClosing: true });
+    closeFrameRef.current = requestAnimationFrame(() => {
+      closeFrameRef.current = null;
+      closePollCreationDialog?.();
+    });
+  }, [closePollCreationDialog, modalStateStore]);
+
+  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,
+        modalStateStore,
         sendMessage,
       }}
     >
diff --git a/package/src/components/Poll/components/MultipleVotesSettings.tsx b/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';
@@ -17,6 +17,10 @@ const pollComposerStateSelector = (state: PollComposerState) => ({
   max_votes_allowed: state.data.max_votes_allowed,
 });
 
+const modalStateSelector = (state: { isClosing: boolean }) => ({
+  isClosing: state.isClosing,
+});
+
 const MaxVotesTextInput = () => {
   const messageComposer = useMessageComposer();
   const { pollComposer } = messageComposer;
@@ -91,6 +95,8 @@ const MaxVotesTextInput = () => {
 export const MultipleVotesSettings = () => {
   const [allowMaxVotesPerPerson, setAllowMaxVotesPerPerson] = useState<boolean>(false);
   const { t } = useTranslationContext();
+  const { modalStateStore } = useCreatePollContentContext();
+  const { isClosing = false } = useStateStore(modalStateStore, modalStateSelector) ?? {};
   const messageComposer = useMessageComposer();
   const { pollComposer } = messageComposer;
   const { updateFields } = pollComposer;
@@ -133,7 +139,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 +158,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
diff --git a/package/src/components/Poll/components/PollInputDialog.tsx b/package/src/components/Poll/components/PollInputDialog.tsx
@@ -1,9 +1,8 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   KeyboardAvoidingView,
   Modal,
   Platform,
-  Pressable,
   StyleSheet,
   Text,
   TextInput,
@@ -14,6 +13,8 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, { LinearTransition, ZoomIn } from 'react-native-reanimated';
 
 import { useTheme, useTranslationContext } from '../../../contexts';
+import { primitives } from '../../../theme';
+import { Button } from '../../ui';
 
 export type PollInputDialogProps = {
   closeDialog: () => void;
@@ -35,20 +36,15 @@ export const PollInputDialog = ({
 
   const {
     theme: {
-      colors: { accent_dark_blue, black, white },
+      semantics,
       poll: {
-        inputDialog: {
-          button,
-          buttonContainer,
-          container,
-          input,
-          title: titleStyle,
-          transparentContainer,
-        },
+        inputDialog: { buttonContainer, container, input, title: titleStyle, transparentContainer },
       },
     },
   } = useTheme();
 
+  const styles = useStyles();
+
   return (
     <Modal animationType='fade' onRequestClose={closeDialog} transparent={true} visible={visible}>
       <GestureHandlerRootView style={styles.modalRoot}>
@@ -59,36 +55,40 @@ export const PollInputDialog = ({
           <Animated.View
             entering={ZoomIn.duration(200)}
             layout={LinearTransition.duration(200)}
-            style={[styles.container, { backgroundColor: white }, container]}
+            style={[styles.container, container]}
           >
-            <Text style={[styles.title, { color: black }, titleStyle]}>{title}</Text>
-            <TextInput
-              autoFocus={true}
-              onChangeText={setDialogInput}
-              placeholder={t('Ask a question')}
-              style={[styles.input, { color: black }, input]}
-              value={dialogInput}
-            />
+            <View style={styles.inputContainer}>
+              <Text style={[styles.title, titleStyle]}>{title}</Text>
+              <TextInput
+                autoFocus={true}
+                onChangeText={setDialogInput}
+                placeholder={t('Ask a question')}
+                placeholderTextColor={semantics.inputTextPlaceholder}
+                style={[styles.input, input]}
+                value={dialogInput}
+              />
+            </View>
             <View style={[styles.buttonContainer, buttonContainer]}>
-              <Pressable
+              <Button
+                variant={'secondary'}
+                type={'ghost'}
+                label={t('Cancel')}
+                size='md'
                 onPress={closeDialog}
-                style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
-              >
-                <Text style={[styles.button, { color: accent_dark_blue }, button]}>
-                  {t('Cancel')}
-                </Text>
-              </Pressable>
-              <Pressable
+                style={styles.button}
+              />
+              <Button
+                variant={'secondary'}
+                type={'solid'}
+                label={t('Send')}
+                size='md'
                 onPress={() => {
                   onSubmit(dialogInput);
                   closeDialog();
                 }}
-                style={({ pressed }) => ({ marginLeft: 32, opacity: pressed ? 0.5 : 1 })}
-              >
-                <Text style={[styles.button, { color: accent_dark_blue }, button]}>
-                  {t('SEND')}
-                </Text>
-              </Pressable>
+                style={styles.button}
+                disabled={!dialogInput}
+              />
             </View>
           </Animated.View>
         </KeyboardAvoidingView>
@@ -97,36 +97,57 @@ export const PollInputDialog = ({
   );
 };
 
-const styles = StyleSheet.create({
-  button: { fontSize: 16, fontWeight: '500' },
-  buttonContainer: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 52 },
-  container: {
-    backgroundColor: 'white',
-    borderRadius: 16,
-    paddingBottom: 20,
-    paddingHorizontal: 16,
-    paddingTop: 32,
-    width: '80%',
-  },
-  modalRoot: {
-    flex: 1,
-  },
-  input: {
-    alignItems: 'center',
-    borderColor: 'gray',
-    borderRadius: 18,
-    borderWidth: 1,
-    fontSize: 16,
-    height: 36,
-    marginTop: 16,
-    padding: 0,
-    paddingHorizontal: 16,
-  },
-  title: { fontSize: 17, fontWeight: '500', lineHeight: 20 },
-  transparentContainer: {
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.4)',
-    flex: 1,
-    justifyContent: 'center',
-  },
-});
+const useStyles = () => {
+  const {
+    theme: {
+      semantics,
+      poll: {
+        inputDialog: { button },
+      },
+    },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        button: { flex: 1, width: undefined, ...button },
+        buttonContainer: { flexDirection: 'row', gap: primitives.spacingXs },
+        container: {
+          backgroundColor: semantics.backgroundCoreElevation1,
+          borderRadius: primitives.radiusXl,
+          paddingBottom: primitives.spacingXl,
+          paddingHorizontal: primitives.spacingXl,
+          paddingTop: primitives.spacing2xl,
+          gap: primitives.spacing2xl,
+          width: 304,
+        },
+        modalRoot: {
+          flex: 1,
+        },
+        inputContainer: {
+          gap: primitives.spacingXs,
+        },
+        input: {
+          alignItems: 'center',
+          borderColor: semantics.borderUtilityActive,
+          borderRadius: primitives.radiusMd,
+          borderWidth: 1,
+          fontSize: primitives.typographyFontSizeMd,
+          padding: primitives.spacingSm,
+          color: semantics.textPrimary,
+        },
+        title: {
+          color: semantics.textPrimary,
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightMedium,
+          lineHeight: primitives.typographyLineHeightNormal,
+        },
+        transparentContainer: {
+          alignItems: 'center',
+          backgroundColor: 'rgba(0, 0, 0, 0.4)',
+          flex: 1,
+          justifyContent: 'center',
+        },
+      }),
+    [button, semantics],
+  );
+};
diff --git a/package/src/contexts/pollContext/createPollContentContext.tsx b/package/src/contexts/pollContext/createPollContentContext.tsx
@@ -1,14 +1,21 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
+import { StateStore } from 'stream-chat';
+
 import { MessageInputContextValue } from '../messageInputContext/MessageInputContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+export type CreatePollModalState = {
+  isClosing: boolean;
+};
+
 export type CreatePollContentContextValue = {
   createAndSendPoll: () => Promise<void>;
   sendMessage: MessageInputContextValue['sendMessage'];
   closePollCreationDialog?: () => void;
+  modalStateStore?: StateStore<CreatePollModalState>;
   /**
    * Vertical gap between poll options in the poll creation screen.
    *
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
@@ -206,7 +206,6 @@ export type Theme = {
     textContainer: ViewStyle;
     timestamp: ViewStyle;
   };
-  colors: typeof Colors;
   channelPreview: {
     container: ViewStyle;
     contentContainer: ViewStyle;
@@ -1172,7 +1171,6 @@ export const defaultTheme: Theme = {
       subtitle: {},
     },
   },
-  colors: Colors,
   dateHeader: {
     container: {},
     text: {},
diff --git a/package/src/icons/utils/base.tsx b/package/src/icons/utils/base.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import Svg, { Path, PathProps, SvgProps } from 'react-native-svg';
 
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-
 export type IconProps = Partial<SvgProps> &
   Omit<RootPathProps, 'd'> & {
     height?: number;
@@ -32,13 +30,7 @@ export type RootPathProps = Pick<PathProps, 'd'> & {
 };
 
 export const RootPath = (props: RootPathProps) => {
-  const {
-    theme: {
-      colors: { black },
-    },
-  } = useTheme();
-
-  const { d, pathFill = black, pathOpacity } = props;
+  const { d, pathFill = 'black', pathOpacity } = props;
   return (
     <Path
       {...{
