From 828d539c33d02eb47634f6ba5b3930753af1c0ba Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 11 Jun 2026 22:58:23 +0200
Subject: [PATCH 1/6] fix: update all poll modals to be page sheets

---
 .../MessageInput/MessageComposer.tsx          | 39 ++++++++-----------
 .../Poll/components/CreatePollHeader.tsx      |  6 +--
 .../Poll/components/PollButtons.tsx           | 21 ++++++++--
 .../Poll/components/PollModalHeader.tsx       |  6 +--
 .../components/PollResults/PollResultItem.tsx |  1 +
 5 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/package/src/components/MessageInput/MessageComposer.tsx b/package/src/components/MessageInput/MessageComposer.tsx
index 4e74adab7f..c0f9ce9614 100644
--- a/package/src/components/MessageInput/MessageComposer.tsx
+++ b/package/src/components/MessageInput/MessageComposer.tsx
@@ -67,12 +67,6 @@ const useStyles = () => {
         flexShrink: 1,
         minWidth: 0,
       },
-      pollModalWrapper: {
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-        backgroundColor: semantics.backgroundCoreElevation1,
-      },
       pollSafeArea: {
         flex: 1,
         backgroundColor: semantics.backgroundCoreElevation1,
@@ -457,23 +451,22 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
       </Animated.View>
 
       {showPollCreationDialog ? (
-        <View style={styles.pollModalWrapper}>
-          <Modal
-            animationType='slide'
-            onRequestClose={closePollCreationDialog}
-            visible={showPollCreationDialog}
-          >
-            <GestureHandlerRootView style={styles.pollSafeArea}>
-              <SafeAreaViewWrapper style={styles.pollSafeArea}>
-                <CreatePoll
-                  closePollCreationDialog={closePollCreationDialog}
-                  createPollOptionGap={createPollOptionGap}
-                  sendMessage={sendMessage}
-                />
-              </SafeAreaViewWrapper>
-            </GestureHandlerRootView>
-          </Modal>
-        </View>
+        <Modal
+          animationType='slide'
+          onRequestClose={closePollCreationDialog}
+          presentationStyle='pageSheet'
+          visible={showPollCreationDialog}
+        >
+          <GestureHandlerRootView style={styles.pollSafeArea}>
+            <SafeAreaViewWrapper style={styles.pollSafeArea}>
+              <CreatePoll
+                closePollCreationDialog={closePollCreationDialog}
+                createPollOptionGap={createPollOptionGap}
+                sendMessage={sendMessage}
+              />
+            </SafeAreaViewWrapper>
+          </GestureHandlerRootView>
+        </Modal>
       ) : null}
     </MicPositionProvider>
   );
diff --git a/package/src/components/Poll/components/CreatePollHeader.tsx b/package/src/components/Poll/components/CreatePollHeader.tsx
index 33c91a4e5e..f06220976b 100644
--- a/package/src/components/Poll/components/CreatePollHeader.tsx
+++ b/package/src/components/Poll/components/CreatePollHeader.tsx
@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Check, IconProps } from '../../../icons';
-import { ArrowLeft } from '../../../icons/arrow-left';
+import { Cross } from '../../../icons/xmark-1';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 import { useCanCreatePoll } from '../hooks/useCanCreatePoll';
@@ -54,9 +54,9 @@ export const CreatePollHeader = ({
         accessibilityLabelKey='a11y/Close poll creation'
         variant='secondary'
         onPress={onBackPressHandler}
-        type='ghost'
+        type='outline'
         size='md'
-        LeadingIcon={ArrowLeft}
+        LeadingIcon={Cross}
         iconOnly
       />
 
diff --git a/package/src/components/Poll/components/PollButtons.tsx b/package/src/components/Poll/components/PollButtons.tsx
index 2fbb4298f1..a7b8dbcb05 100644
--- a/package/src/components/Poll/components/PollButtons.tsx
+++ b/package/src/components/Poll/components/PollButtons.tsx
@@ -51,7 +51,12 @@ export const ViewResultsButton = (props: PollButtonProps) => {
         type='outline'
       />
       {showResults ? (
-        <Modal animationType='slide' onRequestClose={closeViewResults} visible={showResults}>
+        <Modal
+          animationType='slide'
+          onRequestClose={closeViewResults}
+          presentationStyle='pageSheet'
+          visible={showResults}
+        >
           <GestureHandlerRootView style={styles.modalRoot}>
             <SafeAreaViewWrapper style={styles.safeArea}>
               <PollModalHeader onPress={closeViewResults} title={t('Poll Results')} />
@@ -92,7 +97,12 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAllOptions ? (
-        <Modal animationType='slide' onRequestClose={closeAllOptions} visible={showAllOptions}>
+        <Modal
+          animationType='slide'
+          onRequestClose={closeAllOptions}
+          presentationStyle='pageSheet'
+          visible={showAllOptions}
+        >
           <GestureHandlerRootView style={styles.modalRoot}>
             <SafeAreaViewWrapper style={styles.safeArea}>
               <PollModalHeader onPress={closeAllOptions} title={t('Poll Options')} />
@@ -133,7 +143,12 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAnswers ? (
-        <Modal animationType='slide' onRequestClose={closeAllComments} visible={showAnswers}>
+        <Modal
+          animationType='slide'
+          onRequestClose={closeAllComments}
+          presentationStyle='pageSheet'
+          visible={showAnswers}
+        >
           <GestureHandlerRootView style={styles.modalRoot}>
             <SafeAreaViewWrapper style={styles.safeArea}>
               <PollModalHeader onPress={closeAllComments} title={t('Poll Comments')} />
diff --git a/package/src/components/Poll/components/PollModalHeader.tsx b/package/src/components/Poll/components/PollModalHeader.tsx
index ed4d57e54a..312be77ebf 100644
--- a/package/src/components/Poll/components/PollModalHeader.tsx
+++ b/package/src/components/Poll/components/PollModalHeader.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { ArrowLeft } from '../../../icons/arrow-left';
+import { Cross } from '../../../icons/xmark-1';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 
@@ -27,10 +27,10 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
         <Button
           accessibilityLabelKey='a11y/Close poll'
           variant='secondary'
-          type='ghost'
+          type='outline'
           size='md'
           iconOnly
-          LeadingIcon={ArrowLeft}
+          LeadingIcon={Cross}
           onPress={onPress}
           testID='poll-results-close-button'
         />
diff --git a/package/src/components/Poll/components/PollResults/PollResultItem.tsx b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
index 5c8e02570f..393ce59cf2 100644
--- a/package/src/components/Poll/components/PollResults/PollResultItem.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
@@ -65,6 +65,7 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
         <Modal
           animationType='fade'
           onRequestClose={() => setShowAllVotes(false)}
+          presentationStyle='pageSheet'
           visible={showAllVotes}
         >
           <GestureHandlerRootView style={styles.modalRoot}>

From 60c2c22b096db637db06f52be347c8eec5350b0f Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 11 Jun 2026 23:13:24 +0200
Subject: [PATCH 2/6] fix: android translucency

---
 package/src/components/MessageInput/MessageComposer.tsx     | 2 ++
 package/src/components/Poll/components/PollButtons.tsx      | 6 ++++++
 .../Poll/components/PollResults/PollResultItem.tsx          | 2 ++
 3 files changed, 10 insertions(+)

diff --git a/package/src/components/MessageInput/MessageComposer.tsx b/package/src/components/MessageInput/MessageComposer.tsx
index c0f9ce9614..37207088cb 100644
--- a/package/src/components/MessageInput/MessageComposer.tsx
+++ b/package/src/components/MessageInput/MessageComposer.tsx
@@ -453,8 +453,10 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
       {showPollCreationDialog ? (
         <Modal
           animationType='slide'
+          navigationBarTranslucent
           onRequestClose={closePollCreationDialog}
           presentationStyle='pageSheet'
+          statusBarTranslucent
           visible={showPollCreationDialog}
         >
           <GestureHandlerRootView style={styles.pollSafeArea}>
diff --git a/package/src/components/Poll/components/PollButtons.tsx b/package/src/components/Poll/components/PollButtons.tsx
index a7b8dbcb05..e138bd6cb1 100644
--- a/package/src/components/Poll/components/PollButtons.tsx
+++ b/package/src/components/Poll/components/PollButtons.tsx
@@ -53,8 +53,10 @@ export const ViewResultsButton = (props: PollButtonProps) => {
       {showResults ? (
         <Modal
           animationType='slide'
+          navigationBarTranslucent
           onRequestClose={closeViewResults}
           presentationStyle='pageSheet'
+          statusBarTranslucent
           visible={showResults}
         >
           <GestureHandlerRootView style={styles.modalRoot}>
@@ -99,8 +101,10 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
       {showAllOptions ? (
         <Modal
           animationType='slide'
+          navigationBarTranslucent
           onRequestClose={closeAllOptions}
           presentationStyle='pageSheet'
+          statusBarTranslucent
           visible={showAllOptions}
         >
           <GestureHandlerRootView style={styles.modalRoot}>
@@ -145,8 +149,10 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
       {showAnswers ? (
         <Modal
           animationType='slide'
+          navigationBarTranslucent
           onRequestClose={closeAllComments}
           presentationStyle='pageSheet'
+          statusBarTranslucent
           visible={showAnswers}
         >
           <GestureHandlerRootView style={styles.modalRoot}>
diff --git a/package/src/components/Poll/components/PollResults/PollResultItem.tsx b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
index 393ce59cf2..0ca45a31b2 100644
--- a/package/src/components/Poll/components/PollResults/PollResultItem.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
@@ -64,8 +64,10 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
       {showAllVotes ? (
         <Modal
           animationType='fade'
+          navigationBarTranslucent
           onRequestClose={() => setShowAllVotes(false)}
           presentationStyle='pageSheet'
+          statusBarTranslucent
           visible={showAllVotes}
         >
           <GestureHandlerRootView style={styles.modalRoot}>

From ad03b1e7f0b0f2be7d3887d0bc119aaab3f896ea Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 11 Jun 2026 23:36:52 +0200
Subject: [PATCH 3/6] chore: unify poll modals into shared component

---
 .../MessageInput/MessageComposer.tsx          | 34 +++------
 .../Poll/components/PollButtons.tsx           | 73 ++++---------------
 .../components/Poll/components/PollModal.tsx  | 55 ++++++++++++++
 .../components/PollResults/PollResultItem.tsx | 27 ++-----
 .../src/components/Poll/components/index.ts   |  1 +
 5 files changed, 85 insertions(+), 105 deletions(-)
 create mode 100644 package/src/components/Poll/components/PollModal.tsx

diff --git a/package/src/components/MessageInput/MessageComposer.tsx b/package/src/components/MessageInput/MessageComposer.tsx
index 37207088cb..fb96e4895a 100644
--- a/package/src/components/MessageInput/MessageComposer.tsx
+++ b/package/src/components/MessageInput/MessageComposer.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
-import { Modal, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -52,9 +51,9 @@ import { MessageInputHeightState } from '../../state-store/message-input-height-
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput';
+import { PollModal } from '../Poll/components/PollModal';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
-import { SafeAreaViewWrapper } from '../UIComponents/SafeAreaViewWrapper';
 
 const useStyles = () => {
   const {
@@ -67,10 +66,6 @@ const useStyles = () => {
         flexShrink: 1,
         minWidth: 0,
       },
-      pollSafeArea: {
-        flex: 1,
-        backgroundColor: semantics.backgroundCoreElevation1,
-      },
       container: {
         alignItems: 'center',
         flexDirection: 'row',
@@ -451,24 +446,13 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
       </Animated.View>
 
       {showPollCreationDialog ? (
-        <Modal
-          animationType='slide'
-          navigationBarTranslucent
-          onRequestClose={closePollCreationDialog}
-          presentationStyle='pageSheet'
-          statusBarTranslucent
-          visible={showPollCreationDialog}
-        >
-          <GestureHandlerRootView style={styles.pollSafeArea}>
-            <SafeAreaViewWrapper style={styles.pollSafeArea}>
-              <CreatePoll
-                closePollCreationDialog={closePollCreationDialog}
-                createPollOptionGap={createPollOptionGap}
-                sendMessage={sendMessage}
-              />
-            </SafeAreaViewWrapper>
-          </GestureHandlerRootView>
-        </Modal>
+        <PollModal onRequestClose={closePollCreationDialog} visible={showPollCreationDialog}>
+          <CreatePoll
+            closePollCreationDialog={closePollCreationDialog}
+            createPollOptionGap={createPollOptionGap}
+            sendMessage={sendMessage}
+          />
+        </PollModal>
       ) : null}
     </MicPositionProvider>
   );
diff --git a/package/src/components/Poll/components/PollButtons.tsx b/package/src/components/Poll/components/PollButtons.tsx
index e138bd6cb1..cde38d1ffc 100644
--- a/package/src/components/Poll/components/PollButtons.tsx
+++ b/package/src/components/Poll/components/PollButtons.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
-import { Modal, StyleSheet, View } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { StyleSheet, View } from 'react-native';
 
 import { GenericPollButton, PollButtonProps } from './Button';
 import { PollAnswersList } from './PollAnswersList';
 import { PollInputDialog } from './PollInputDialog';
+import { PollModal } from './PollModal';
 import { PollModalHeader } from './PollModalHeader';
 import { PollAllOptions } from './PollOption';
 import { PollResults } from './PollResults';
@@ -12,7 +12,6 @@ import { PollResults } from './PollResults';
 import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts';
 import { primitives } from '../../../theme';
 import { defaultPollOptionCount } from '../../../utils/constants';
-import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
 import {
   useAddCommentOpen,
   useAllCommentsOpen,
@@ -51,21 +50,10 @@ export const ViewResultsButton = (props: PollButtonProps) => {
         type='outline'
       />
       {showResults ? (
-        <Modal
-          animationType='slide'
-          navigationBarTranslucent
-          onRequestClose={closeViewResults}
-          presentationStyle='pageSheet'
-          statusBarTranslucent
-          visible={showResults}
-        >
-          <GestureHandlerRootView style={styles.modalRoot}>
-            <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={closeViewResults} title={t('Poll Results')} />
-              <PollResults message={message} poll={poll} />
-            </SafeAreaViewWrapper>
-          </GestureHandlerRootView>
-        </Modal>
+        <PollModal onRequestClose={closeViewResults} visible={showResults}>
+          <PollModalHeader onPress={closeViewResults} title={t('Poll Results')} />
+          <PollResults message={message} poll={poll} />
+        </PollModal>
       ) : null}
     </>
   );
@@ -88,8 +76,6 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
     openAllOptions();
   }, [message, onPress, openAllOptions, poll]);
 
-  const styles = useStyles();
-
   return (
     <>
       {options && options.length > defaultPollOptionCount ? (
@@ -99,21 +85,10 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAllOptions ? (
-        <Modal
-          animationType='slide'
-          navigationBarTranslucent
-          onRequestClose={closeAllOptions}
-          presentationStyle='pageSheet'
-          statusBarTranslucent
-          visible={showAllOptions}
-        >
-          <GestureHandlerRootView style={styles.modalRoot}>
-            <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={closeAllOptions} title={t('Poll Options')} />
-              <PollAllOptions message={message} poll={poll} />
-            </SafeAreaViewWrapper>
-          </GestureHandlerRootView>
-        </Modal>
+        <PollModal onRequestClose={closeAllOptions} visible={showAllOptions}>
+          <PollModalHeader onPress={closeAllOptions} title={t('Poll Options')} />
+          <PollAllOptions message={message} poll={poll} />
+        </PollModal>
       ) : null}
     </>
   );
@@ -136,8 +111,6 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
     openAllComments();
   }, [message, onPress, openAllComments, poll]);
 
-  const styles = useStyles();
-
   return (
     <>
       {answersCount && answersCount > 0 ? (
@@ -147,21 +120,10 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAnswers ? (
-        <Modal
-          animationType='slide'
-          navigationBarTranslucent
-          onRequestClose={closeAllComments}
-          presentationStyle='pageSheet'
-          statusBarTranslucent
-          visible={showAnswers}
-        >
-          <GestureHandlerRootView style={styles.modalRoot}>
-            <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={closeAllComments} title={t('Poll Comments')} />
-              <PollAnswersList message={message} poll={poll} />
-            </SafeAreaViewWrapper>
-          </GestureHandlerRootView>
-        </Modal>
+        <PollModal onRequestClose={closeAllComments} visible={showAnswers}>
+          <PollModalHeader onPress={closeAllComments} title={t('Poll Comments')} />
+          <PollAnswersList message={message} poll={poll} />
+        </PollModal>
       ) : null}
     </>
   );
@@ -275,9 +237,6 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       buttonsContainer: { gap: primitives.spacingXs },
-      modalRoot: {
-        flex: 1,
-      },
       endVoteButton: {
         borderColor: isPollCreatedByClient
           ? semantics.chatBorderOnChatOutgoing
@@ -288,10 +247,6 @@ const useStyles = () => {
           ? semantics.chatBorderOnChatOutgoing
           : semantics.chatBorderOnChatIncoming,
       },
-      safeArea: {
-        backgroundColor: semantics.backgroundCoreElevation1,
-        flex: 1,
-      },
     });
   }, [semantics, isPollCreatedByClient]);
 };
diff --git a/package/src/components/Poll/components/PollModal.tsx b/package/src/components/Poll/components/PollModal.tsx
new file mode 100644
index 0000000000..4d995fce0f
--- /dev/null
+++ b/package/src/components/Poll/components/PollModal.tsx
@@ -0,0 +1,55 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { Modal, ModalProps, StyleSheet } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+import { useTheme } from '../../../contexts';
+import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
+
+export type PollModalProps = PropsWithChildren<{
+  animationType?: ModalProps['animationType'];
+  onRequestClose?: () => void;
+  visible?: boolean;
+}>;
+
+export const PollModal = ({
+  animationType = 'slide',
+  children,
+  onRequestClose,
+  visible,
+}: PollModalProps) => {
+  const styles = useStyles();
+
+  return (
+    <Modal
+      animationType={animationType}
+      navigationBarTranslucent
+      onRequestClose={onRequestClose}
+      presentationStyle='pageSheet'
+      statusBarTranslucent
+      visible={visible}
+    >
+      <GestureHandlerRootView style={styles.root}>
+        <SafeAreaViewWrapper style={styles.safeArea}>{children}</SafeAreaViewWrapper>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        root: {
+          flex: 1,
+        },
+        safeArea: {
+          flex: 1,
+          backgroundColor: semantics.backgroundCoreElevation1,
+        },
+      }),
+    [semantics],
+  );
+};
diff --git a/package/src/components/Poll/components/PollResults/PollResultItem.tsx b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
index 0ca45a31b2..ddddfd2dbb 100644
--- a/package/src/components/Poll/components/PollResults/PollResultItem.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Modal, StyleSheet, Text, View } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { LocalMessage, Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
 
@@ -15,9 +14,9 @@ import {
 } from '../../../../contexts';
 
 import { primitives } from '../../../../theme';
-import { SafeAreaViewWrapper } from '../../../UIComponents/SafeAreaViewWrapper';
 import { usePollState } from '../../hooks/usePollState';
 import { GenericPollButton } from '../Button';
+import { PollModal } from '../PollModal';
 import { PollModalHeader } from '../PollModalHeader';
 
 export type ShowAllVotesButtonProps = {
@@ -62,21 +61,14 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
         </View>
       ) : null}
       {showAllVotes ? (
-        <Modal
+        <PollModal
           animationType='fade'
-          navigationBarTranslucent
           onRequestClose={() => setShowAllVotes(false)}
-          presentationStyle='pageSheet'
-          statusBarTranslucent
           visible={showAllVotes}
         >
-          <GestureHandlerRootView style={styles.modalRoot}>
-            <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={() => setShowAllVotes(false)} title={t('Votes')} />
-              <PollOptionFullResults message={message} option={option} poll={poll} />
-            </SafeAreaViewWrapper>
-          </GestureHandlerRootView>
-        </Modal>
+          <PollModalHeader onPress={() => setShowAllVotes(false)} title={t('Votes')} />
+          <PollOptionFullResults message={message} option={option} poll={poll} />
+        </PollModal>
       ) : null}
     </>
   );
@@ -159,9 +151,6 @@ const useStyles = () => {
         alignItems: 'center',
         paddingBottom: primitives.spacingXs,
       },
-      modalRoot: {
-        flex: 1,
-      },
       title: {
         flex: 1,
         fontSize: primitives.typographyFontSizeLg,
@@ -186,10 +175,6 @@ const useStyles = () => {
         marginStart: primitives.spacingMd,
         textAlign: 'left',
       },
-      safeArea: {
-        backgroundColor: semantics.backgroundCoreElevation1,
-        flex: 1,
-      },
       inlineButton: {
         borderColor: semantics.borderCoreDefault,
         borderTopWidth: 1,
diff --git a/package/src/components/Poll/components/index.ts b/package/src/components/Poll/components/index.ts
index 5cfc99b017..b64e450952 100644
--- a/package/src/components/Poll/components/index.ts
+++ b/package/src/components/Poll/components/index.ts
@@ -6,4 +6,5 @@ export * from './PollInputDialog';
 export * from './MultipleVotesSettings';
 export * from './PollOption';
 export * from './PollResults';
+export * from './PollModal';
 export * from './PollModalHeader';

From f0af6119ec46244455bea6733798a8e57fbe0b26 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 11 Jun 2026 23:41:41 +0200
Subject: [PATCH 4/6] fix: use proper disabled color

---
 .../components/Poll/components/CreatePollHeader.tsx   | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/package/src/components/Poll/components/CreatePollHeader.tsx b/package/src/components/Poll/components/CreatePollHeader.tsx
index f06220976b..fe5d31086b 100644
--- a/package/src/components/Poll/components/CreatePollHeader.tsx
+++ b/package/src/components/Poll/components/CreatePollHeader.tsx
@@ -43,9 +43,16 @@ export const CreatePollHeader = ({
 
   const renderSendPollIcon = useCallback(
     (props: IconProps) => {
-      return <Check {...props} height={18} stroke={semantics.textOnAccent} width={18} />;
+      return (
+        <Check
+          {...props}
+          height={18}
+          stroke={canCreatePoll ? semantics.textOnAccent : semantics.textDisabled}
+          width={18}
+        />
+      );
     },
-    [semantics.textOnAccent],
+    [canCreatePoll, semantics.textOnAccent, semantics.textDisabled],
   );
 
   return (

From 64b70795bda3be32c70219ac21e028b16b865861 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Fri, 12 Jun 2026 00:01:16 +0200
Subject: [PATCH 5/6] fix: poll input dialog design tweaks

---
 .../Poll/components/PollInputDialog.tsx       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/package/src/components/Poll/components/PollInputDialog.tsx b/package/src/components/Poll/components/PollInputDialog.tsx
index 2099aed082..dd74ebe8ce 100644
--- a/package/src/components/Poll/components/PollInputDialog.tsx
+++ b/package/src/components/Poll/components/PollInputDialog.tsx
@@ -72,19 +72,11 @@ export const PollInputDialog = ({
               />
             </View>
             <View style={[styles.buttonContainer, buttonContainer]}>
-              <Button
-                variant={'secondary'}
-                type={'ghost'}
-                label={t('Cancel')}
-                size='md'
-                onPress={closeDialog}
-                style={styles.button}
-              />
               <Button
                 variant={'primary'}
                 type={'solid'}
                 label={t('Send')}
-                size='md'
+                size='lg'
                 onPress={() => {
                   onSubmit(dialogInput);
                   closeDialog();
@@ -92,6 +84,14 @@ export const PollInputDialog = ({
                 style={styles.button}
                 disabled={!dialogInput}
               />
+              <Button
+                variant={'secondary'}
+                type={'outline'}
+                label={t('Cancel')}
+                size='lg'
+                onPress={closeDialog}
+                style={styles.button}
+              />
             </View>
           </Animated.View>
         </KeyboardAvoidingView>
@@ -112,8 +112,8 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
-        button: { flex: 1, width: undefined, ...button },
-        buttonContainer: { flexDirection: 'row', gap: primitives.spacingXs },
+        button: { width: undefined, ...button },
+        buttonContainer: { gap: primitives.spacingXs },
         container: {
           backgroundColor: semantics.backgroundCoreElevation1,
           borderRadius: primitives.radiusXl,
@@ -132,7 +132,7 @@ const useStyles = () => {
         input: {
           alignItems: 'center',
           borderColor: semantics.borderUtilityActive,
-          borderRadius: primitives.radiusMd,
+          borderRadius: primitives.radiusLg,
           borderWidth: 1,
           fontSize: primitives.typographyFontSizeMd,
           padding: primitives.spacingSm,

From fdb857a8876e7460b5d13fdff97bf9fa0e77914a Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Fri, 12 Jun 2026 00:31:38 +0200
Subject: [PATCH 6/6] fix: tests

---
 .../__tests__/CreatePollHeader.test.tsx       | 40 ++------------
 .../__tests__/PollModalHeader.test.tsx        | 53 +++----------------
 2 files changed, 12 insertions(+), 81 deletions(-)

diff --git a/package/src/components/Poll/components/__tests__/CreatePollHeader.test.tsx b/package/src/components/Poll/components/__tests__/CreatePollHeader.test.tsx
index ebb8459fa6..44f78eb8ec 100644
--- a/package/src/components/Poll/components/__tests__/CreatePollHeader.test.tsx
+++ b/package/src/components/Poll/components/__tests__/CreatePollHeader.test.tsx
@@ -43,39 +43,8 @@ const collectPathData = (node: unknown): string[] => {
   return [...(typeof props?.d === 'string' ? [props.d] : []), ...collectPathData(children)];
 };
 
-const collectTransforms = (node: unknown): string[] => {
-  if (!node || typeof node !== 'object') {
-    return [];
-  }
-
-  if (Array.isArray(node)) {
-    return node.reduce<string[]>((acc, child) => [...acc, ...collectTransforms(child)], []);
-  }
-
-  const { children, props } = node as {
-    children?: unknown;
-    props?: { style?: StyleProp<ViewStyle> };
-  };
-  const style = StyleSheet.flatten(props?.style);
-  const styleTransforms = Array.isArray(style?.transform)
-    ? style.transform.flatMap((transform) => {
-        if (
-          transform &&
-          typeof transform === 'object' &&
-          'rotate' in transform &&
-          typeof transform.rotate === 'string'
-        ) {
-          return [transform.rotate];
-        }
-        return [];
-      })
-    : [];
-
-  return [...styleTransforms, ...collectTransforms(children)];
-};
-
 describe('CreatePollHeader', () => {
-  it('renders a secondary ghost arrow-left close button', () => {
+  it('renders a secondary outline cross close button', () => {
     render(
       <ThemeProvider>
         <CreatePollHeader onBackPressHandler={jest.fn()} onCreatePollPressHandler={jest.fn()} />
@@ -84,11 +53,10 @@ describe('CreatePollHeader', () => {
 
     const style = getCloseButtonWrapperStyle();
     expect(style.backgroundColor).toBeUndefined();
-    expect(style.borderWidth).toBeUndefined();
-    expect(style.borderColor).toBeUndefined();
+    expect(style.borderWidth).toBe(1);
+    expect(style.borderColor).toBeDefined();
     expect(collectPathData(screen.toJSON())).toContain(
-      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+      'M15.625 4.375L4.375 15.625M15.625 15.625L4.375 4.375',
     );
-    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
   });
 });
diff --git a/package/src/components/Poll/components/__tests__/PollModalHeader.test.tsx b/package/src/components/Poll/components/__tests__/PollModalHeader.test.tsx
index 3f0a6d3178..8f29d12377 100644
--- a/package/src/components/Poll/components/__tests__/PollModalHeader.test.tsx
+++ b/package/src/components/Poll/components/__tests__/PollModalHeader.test.tsx
@@ -47,41 +47,6 @@ const collectPathData = (node: unknown): string[] => {
   return [...(typeof props?.d === 'string' ? [props.d] : []), ...collectPathData(children)];
 };
 
-const collectTransforms = (node: unknown): string[] => {
-  if (!node || typeof node !== 'object') {
-    return [];
-  }
-
-  if (Array.isArray(node)) {
-    return node.reduce<string[]>((acc, child) => [...acc, ...collectTransforms(child)], []);
-  }
-
-  const { children, props } = node as {
-    children?: unknown;
-    props?: { style?: StyleProp<ViewStyle>; transform?: unknown };
-  };
-  const style = StyleSheet.flatten(props?.style);
-  const styleTransforms = Array.isArray(style?.transform)
-    ? style.transform.flatMap((transform) => {
-        if (
-          transform &&
-          typeof transform === 'object' &&
-          'rotate' in transform &&
-          typeof transform.rotate === 'string'
-        ) {
-          return [transform.rotate];
-        }
-        return [];
-      })
-    : [];
-
-  return [
-    ...(typeof props?.transform === 'string' ? [props.transform] : []),
-    ...styleTransforms,
-    ...collectTransforms(children),
-  ];
-};
-
 const renderPollModalHeader = () =>
   render(
     <ThemeProvider>
@@ -94,33 +59,31 @@ describe('PollModalHeader', () => {
     setPlatform(originalPlatform);
   });
 
-  it('renders a secondary ghost arrow-left button outside Android', () => {
+  it('renders a secondary outline cross button outside Android', () => {
     setPlatform('ios');
 
     renderPollModalHeader();
 
     const style = getCloseButtonWrapperStyle();
     expect(style.backgroundColor).toBeUndefined();
-    expect(style.borderWidth).toBeUndefined();
-    expect(style.borderColor).toBeUndefined();
+    expect(style.borderWidth).toBe(1);
+    expect(style.borderColor).toBeDefined();
     expect(collectPathData(screen.toJSON())).toContain(
-      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+      'M15.625 4.375L4.375 15.625M15.625 15.625L4.375 4.375',
     );
-    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
   });
 
-  it('renders a secondary ghost arrow-left button on Android', () => {
+  it('renders a secondary outline cross button on Android', () => {
     setPlatform('android');
 
     renderPollModalHeader();
 
     const style = getCloseButtonWrapperStyle();
     expect(style.backgroundColor).toBeUndefined();
-    expect(style.borderWidth).toBeUndefined();
-    expect(style.borderColor).toBeUndefined();
+    expect(style.borderWidth).toBe(1);
+    expect(style.borderColor).toBeDefined();
     expect(collectPathData(screen.toJSON())).toContain(
-      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+      'M15.625 4.375L4.375 15.625M15.625 15.625L4.375 4.375',
     );
-    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
   });
 });