stream-chat-react-native-core 9.4.0-beta.1 → 9.4.0-beta.11

package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.tsx

@@ -223,38 +223,47 @@ describe('MessageItemView', () => {
     });
   });
 
-  it('applies correct styles for when group styles are not single or bottom', async () => {
+  it('keeps message-item-view-wrapper free of group-positional padding', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     renderMessage({ groupStyles: ['top'], message });
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-item-view-wrapper').props.style).toMatchObject({
+      const innerStyle = screen.getByTestId('message-item-view-wrapper').props.style;
+      expect(innerStyle).toMatchObject({
         alignItems: 'flex-end',
         gap: 8,
         flexDirection: 'row',
-        paddingTop: 8,
-        paddingBottom: 4,
       });
+      expect(innerStyle.paddingTop).toBeUndefined();
+      expect(innerStyle.paddingBottom).toBeUndefined();
     });
   });
 
-  it('applies correct styles for when group styles are single/bottom and not last message', async () => {
+  it('hoists the per-group padding delta onto message-wrapper for top messages', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    renderMessage({ message });
+    renderMessage({ groupStyles: ['top'], message });
 
     await waitFor(() => {
-      const data = screen.getByTestId('message-item-view-wrapper').props.style;
+      expect(screen.getByTestId('message-wrapper').props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining({ paddingTop: 8 })]),
+      );
+    });
+  });
 
-      expect(data).toMatchObject({
-        alignItems: 'flex-end',
-        gap: 8,
-        flexDirection: 'row',
-        paddingBottom: 8,
-      });
+  it('hoists the per-group padding delta onto message-wrapper for bottom messages', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-wrapper').props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining({ paddingBottom: 8 })]),
+      );
     });
   });
 

package/src/components/Message/MessageItemView/utils/renderText.tsx

@@ -27,7 +27,7 @@ import {
   State,
 } from 'simple-markdown';
 
-import type { LocalMessage, UserResponse } from 'stream-chat';
+import type { LocalMessage, MentionEntity, UserResponse } from 'stream-chat';
 
 import { generateMarkdownText } from './generateMarkdownText';
 
@@ -152,7 +152,7 @@ const defaultMarkdownStyles: MarkdownStyle = {
     flexDirection: 'row',
   },
   mentions: {
-    fontWeight: '700',
+    fontWeight: primitives.typographyFontWeightRegular,
     fontSize: primitives.typographyFontSizeMd,
     lineHeight: primitives.typographyLineHeightNormal,
   },
@@ -286,7 +286,7 @@ export const renderText = (params: RenderTextParams) => {
     },
     mentions: {
       ...defaultMarkdownStyles.mentions,
-      color: semantics.accentPrimary,
+      color: semantics.chatTextMention,
       ...markdownStyles?.mentions,
     },
     table: {
@@ -404,26 +404,96 @@ export const renderText = (params: RenderTextParams) => {
     );
   };
 
-  // take the @ mentions and turn them into markdown?
-  // translate links
-  const { mentioned_users } = message;
-  const mentionedUsernames = (mentioned_users || [])
-    .map((user) => user.name || user.id)
-    .filter(Boolean)
+  // Collect every mention type the server sent us into a single typed list so
+  // the markdown rule, the lookup, and the press payload all see the same shape.
+  const {
+    mentioned_channel,
+    mentioned_group_ids,
+    mentioned_groups,
+    mentioned_here,
+    mentioned_roles,
+    mentioned_users,
+  } = message;
+
+  const mentionEntities: MentionEntity[] = [
+    ...((mentioned_users ?? []) as UserResponse[]).map(
+      (user) => ({ ...user, mentionType: 'user' }) as MentionEntity,
+    ),
+    ...(mentioned_channel
+      ? ([{ id: 'channel', mentionType: 'channel', name: 'channel' }] as MentionEntity[])
+      : []),
+    ...(mentioned_here
+      ? ([{ id: 'here', mentionType: 'here', name: 'here' }] as MentionEntity[])
+      : []),
+    ...((mentioned_roles ?? []) as string[]).map(
+      (role) => ({ id: role, mentionType: 'role', name: role }) as MentionEntity,
+    ),
+    ...(
+      (mentioned_groups ?? (mentioned_group_ids ?? []).map((id) => ({ id, name: id }))) as Array<{
+        id: string;
+        name?: string;
+      }>
+    ).map(
+      (group) =>
+        ({
+          id: group.id,
+          mentionType: 'user_group',
+          name: group.name ?? group.id,
+        }) as MentionEntity,
+    ),
+  ];
+
+  // Lookup keyed by the rendered mention text (sans `@`), lowercased so we
+  // resolve case-insensitively. First-write-wins: if a user shares a name with
+  // a role/group, the user entity is preferred — same precedence the React SDK
+  // applies via insertion order in its plugin.
+  const mentionLookup = new Map<string, MentionEntity>();
+  for (const entity of mentionEntities) {
+    const key = (entity.name ?? entity.id).toLowerCase();
+    if (!mentionLookup.has(key)) mentionLookup.set(key, entity);
+  }
+
+  const mentionTokens = mentionEntities
+    .map((entity) => entity.name ?? entity.id)
+    .filter((value): value is string => Boolean(value))
     .sort((a, b) => b.length - a.length)
-    .map(escapeRegExp);
-  const mentionedUsers = mentionedUsernames.map((username) => `@${username}`).join('|');
-  const regEx = new RegExp(`^\\B(${mentionedUsers})`, 'g');
+    .map((value) => `@${escapeRegExp(value)}`)
+    .join('|');
+  const regEx = new RegExp(`^\\B(${mentionTokens})`, 'g');
   const mentionsMatchFunction: MatchFunction = (source) => regEx.exec(source);
 
+  const colorForMentionType = (mentionType: MentionEntity['mentionType']) => {
+    switch (mentionType) {
+      case 'user':
+        return semantics.chatTextMentionUser;
+      case 'channel':
+      case 'here':
+        return semantics.chatTextMentionBroadcast;
+      case 'role':
+        return semantics.chatTextMentionRole;
+      case 'user_group':
+        return semantics.chatTextMentionGroup;
+      default:
+        return semantics.chatTextMention;
+    }
+  };
+
   const mentionsReact: ReactNodeOutput = (node, output, { ...state }) => {
-    /**removes the @ prefix of username */
-    const userName = node.content[0]?.content?.substring(1);
+    const matchedText: string | undefined = node.content[0]?.content;
+    const matchedName = matchedText?.substring(1) ?? '';
+    const matchedEntity = mentionLookup.get(matchedName.toLowerCase());
+    const mentionedUser =
+      matchedEntity?.mentionType === 'user' ? (matchedEntity as UserResponse) : undefined;
+    const mentionColor = matchedEntity
+      ? colorForMentionType(matchedEntity.mentionType)
+      : semantics.chatTextMention;
+
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
           additionalInfo: {
-            user: mentioned_users?.find((user: UserResponse) => userName === user.name),
+            mentionedEntity: matchedEntity,
+            user: mentionedUser,
           },
           emitter: 'textMention',
           event,
@@ -434,6 +504,10 @@ export const renderText = (params: RenderTextParams) => {
     const onLongPress = (event: GestureResponderEvent) => {
       if (!preventPress && onLongPressParam) {
         onLongPressParam({
+          additionalInfo: {
+            mentionedEntity: matchedEntity,
+            user: mentionedUser,
+          },
           emitter: 'textMention',
           event,
         });
@@ -441,7 +515,12 @@ export const renderText = (params: RenderTextParams) => {
     };
 
     return (
-      <Text key={state.key} onLongPress={onLongPress} onPress={onPress} style={styles.mentions}>
+      <Text
+        key={state.key}
+        onLongPress={onLongPress}
+        onPress={onPress}
+        style={[styles.mentions, { color: mentionColor }]}
+      >
         {Array.isArray(node.content)
           ? node.content.reduce((acc, current) => acc + current.content, '') || ''
           : output(node.content, state)}
@@ -492,7 +571,7 @@ export const renderText = (params: RenderTextParams) => {
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
     sublist: { react: listReact },
-    ...(mentionedUsers
+    ...(mentionTokens
       ? {
           mentions: {
             match: mentionsMatchFunction,
@@ -507,7 +586,7 @@ export const renderText = (params: RenderTextParams) => {
 
   return (
     <Markdown
-      key={`${JSON.stringify(mentioned_users)}-${onlyEmojis}-${
+      key={`${JSON.stringify(mentionEntities)}-${onlyEmojis}-${
         messageOverlay ? JSON.stringify(markdownStyles) : undefined
       }-${JSON.stringify(semantics)}`}
       onLink={onLink}

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,16 +66,6 @@ const useStyles = () => {
         flexShrink: 1,
         minWidth: 0,
       },
-      pollModalWrapper: {
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-        backgroundColor: semantics.backgroundCoreElevation1,
-      },
-      pollSafeArea: {
-        flex: 1,
-        backgroundColor: semantics.backgroundCoreElevation1,
-      },
       container: {
         alignItems: 'center',
         flexDirection: 'row',
@@ -129,7 +118,7 @@ const useStyles = () => {
         shadowRadius: 12,
       },
       suggestionsListContainer: {
-        backgroundColor: semantics.backgroundCoreElevation1,
+        backgroundColor: 'transparent',
         position: 'absolute',
         width: '100%',
       },
@@ -211,7 +200,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     AudioRecordingInProgress,
     AudioRecordingLockIndicator,
     AudioRecordingPreview,
-    AutoCompleteSuggestionList,
     Input,
     InputView,
     MessageComposerLeadingView,
@@ -238,7 +226,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
         inputBoxWrapper,
         inputContainer,
         inputFloatingContainer,
-        suggestionsListContainer: { container: suggestionListContainer },
         wrapper,
       },
     },
@@ -366,7 +353,12 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
                 layout: { height: newHeight },
               },
             }) => {
-              messageInputHeightStore.setHeight(newHeight);
+              messageInputHeightStore.setHeight(
+                newHeight -
+                  (selectedPicker && !isKeyboardVisible
+                    ? attachmentPickerBottomSheetHeight - bottomInset
+                    : 0),
+              );
             }}
             style={
               messageInputFloating
@@ -448,32 +440,17 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               <MessageComposerTrailingView />
             )}
           </View>
-          <View
-            style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}
-          >
-            <AutoCompleteSuggestionList />
-          </View>
         </PortalWhileClosingView>
       </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>
+        <PollModal onRequestClose={closePollCreationDialog} visible={showPollCreationDialog}>
+          <CreatePoll
+            closePollCreationDialog={closePollCreationDialog}
+            createPollOptionGap={createPollOptionGap}
+            sendMessage={sendMessage}
+          />
+        </PollModal>
       ) : null}
     </MicPositionProvider>
   );

package/src/components/MessageList/MessageFlashList.tsx

@@ -60,6 +60,7 @@ import { MessageInputHeightState } from '../../state-store/message-input-height-
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
 
@@ -297,6 +298,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     threadList = false,
   } = props;
   const {
+    AutoCompleteSuggestionList,
     EmptyStateIndicator,
     MessageListLoadingIndicator: LoadingIndicator,
     NetworkDownIndicator,
@@ -1135,6 +1137,22 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           />
         </View>
       ) : null}
+      <Animated.View
+        layout={transitions.layout200}
+        style={[
+          {
+            bottom: messageInputFloating ? messageInputHeight + 16 : 0,
+          },
+          styles.suggestionsListContainer,
+        ]}
+      >
+        <PortalWhileClosingView
+          portalHostName='overlay-suggestion-list'
+          portalName='autocomplete-suggestion-list'
+        >
+          <AutoCompleteSuggestionList />
+        </PortalWhileClosingView>
+      </Animated.View>
       <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );
@@ -1279,6 +1297,9 @@ const useStyles = () => {
         scrollToBottomButtonContainer,
         unreadMessagesNotificationContainer,
       },
+      messageComposer: {
+        suggestionsListContainer: { container: suggestionListContainer },
+      },
     },
   } = useTheme();
 
@@ -1287,6 +1308,12 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
+        suggestionsListContainer: {
+          backgroundColor: 'transparent',
+          position: 'absolute',
+          width: '100%',
+          ...suggestionListContainer,
+        },
         container: {
           flex: 1,
           width: '100%',
@@ -1338,6 +1365,7 @@ const useStyles = () => {
       scrollToBottomButtonContainer,
       stickyHeaderContainer,
       unreadMessagesNotificationContainer,
+      suggestionListContainer,
     ],
   );
 };

package/src/components/MessageList/MessageList.tsx

@@ -74,6 +74,7 @@ import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { PortalWhileClosingView } from '../UIComponents';
 
 // This is just to make sure that the scrolling happens in a different task queue.
 // TODO: Think if we really need this and strive to remove it if we can.
@@ -92,6 +93,9 @@ const useStyles = () => {
         scrollToBottomButtonContainer,
         unreadMessagesNotificationContainer,
       },
+      messageComposer: {
+        suggestionsListContainer: { container: suggestionListContainer },
+      },
     },
   } = useTheme();
 
@@ -100,6 +104,12 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
+        suggestionsListContainer: {
+          backgroundColor: 'transparent',
+          position: 'absolute',
+          width: '100%',
+          ...suggestionListContainer,
+        },
         container: {
           flex: 1,
           width: '100%',
@@ -151,6 +161,7 @@ const useStyles = () => {
       scrollToBottomButtonContainer,
       stickyHeaderContainer,
       unreadMessagesNotificationContainer,
+      suggestionListContainer,
     ],
   );
 };
@@ -360,6 +371,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     TypingIndicator,
     TypingIndicatorContainer,
     UnreadMessagesNotification,
+    AutoCompleteSuggestionList,
   } = useComponentsContext();
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const { theme } = useTheme();
@@ -1363,6 +1375,22 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           />
         </View>
       ) : null}
+      <Animated.View
+        layout={transitions.layout200}
+        style={[
+          {
+            bottom: messageInputFloating ? messageInputHeight + 16 : 0,
+          },
+          styles.suggestionsListContainer,
+        ]}
+      >
+        <PortalWhileClosingView
+          portalHostName='overlay-suggestion-list'
+          portalName='autocomplete-suggestion-list'
+        >
+          <AutoCompleteSuggestionList />
+        </PortalWhileClosingView>
+      </Animated.View>
       <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );

package/src/components/MessageMenu/MessageActionList.tsx

@@ -78,7 +78,7 @@ const useStyles = () => {
       StyleSheet.create({
         container: {
           borderRadius: primitives.radiusLg,
-          marginTop: 6,
+          marginTop: 8,
           backgroundColor: semantics.backgroundCoreElevation2,
           borderWidth: 1,
           borderColor: semantics.borderCoreDefault,

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';
@@ -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 (
@@ -54,9 +61,9 @@ export const CreatePollHeader = ({
         accessibilityLabelKey='a11y/Close poll creation'
         variant='secondary'
         onPress={onBackPressHandler}
-        type='ghost'
+        type='outline'
         size='md'
-        LeadingIcon={ArrowLeft}
+        LeadingIcon={Cross}
         iconOnly
       />
 

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,14 +50,10 @@ export const ViewResultsButton = (props: PollButtonProps) => {
         type='outline'
       />
       {showResults ? (
-        <Modal animationType='slide' onRequestClose={closeViewResults} 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}
     </>
   );
@@ -81,8 +76,6 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
     openAllOptions();
   }, [message, onPress, openAllOptions, poll]);
 
-  const styles = useStyles();
-
   return (
     <>
       {options && options.length > defaultPollOptionCount ? (
@@ -92,14 +85,10 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAllOptions ? (
-        <Modal animationType='slide' onRequestClose={closeAllOptions} 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}
     </>
   );
@@ -122,8 +111,6 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
     openAllComments();
   }, [message, onPress, openAllComments, poll]);
 
-  const styles = useStyles();
-
   return (
     <>
       {answersCount && answersCount > 0 ? (
@@ -133,14 +120,10 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAnswers ? (
-        <Modal animationType='slide' onRequestClose={closeAllComments} 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}
     </>
   );
@@ -254,9 +237,6 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       buttonsContainer: { gap: primitives.spacingXs },
-      modalRoot: {
-        flex: 1,
-      },
       endVoteButton: {
         borderColor: isPollCreatedByClient
           ? semantics.chatBorderOnChatOutgoing
@@ -267,10 +247,6 @@ const useStyles = () => {
           ? semantics.chatBorderOnChatOutgoing
           : semantics.chatBorderOnChatIncoming,
       },
-      safeArea: {
-        backgroundColor: semantics.backgroundCoreElevation1,
-        flex: 1,
-      },
     });
   }, [semantics, isPollCreatedByClient]);
 };