stream-chat-react-native-core 8.8.1-beta.1 → 8.8.1

package/src/components/Poll/components/PollButtons.tsx

@@ -1,9 +1,5 @@
-import React, { PropsWithChildren, useCallback, useState } from 'react';
-import { Modal, SafeAreaView as RNSafeAreaView, ViewStyle } from 'react-native';
-import {
-  SafeAreaProvider,
-  SafeAreaView as SafeAreaViewOriginal,
-} from 'react-native-safe-area-context';
+import React, { useCallback, useState } from 'react';
+import { Modal } from 'react-native';
 
 import { GenericPollButton, PollButtonProps } from './Button';
 import { PollAnswersList } from './PollAnswersList';
@@ -13,22 +9,9 @@ import { PollAllOptions } from './PollOption';
 import { PollResults } from './PollResults';
 
 import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts';
+import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
 import { usePollState } from '../hooks/usePollState';
 
-// This is a workaround to support SafeAreaView on React Native 0.81.0+
-const SafeAreaViewWrapper = ({ children, style }: PropsWithChildren<{ style: ViewStyle }>) => {
-  if (SafeAreaViewOriginal) {
-    return (
-      <SafeAreaProvider>
-        <SafeAreaViewOriginal edges={['bottom', 'top']} style={style}>
-          {children}
-        </SafeAreaViewOriginal>
-      </SafeAreaProvider>
-    );
-  }
-  return <RNSafeAreaView style={style}>{children}</RNSafeAreaView>;
-};
-
 export const ViewResultsButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
   const { message, poll } = usePollContext();
@@ -59,12 +42,10 @@ export const ViewResultsButton = (props: PollButtonProps) => {
       <GenericPollButton onPress={onPressHandler} title={t('View Results')} />
       {showResults ? (
         <Modal animationType='slide' onRequestClose={onRequestClose} visible={showResults}>
-          <SafeAreaProvider>
-            <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
-              <PollModalHeader onPress={onRequestClose} title={t('Poll Results')} />
-              <PollResults message={message} poll={poll} />
-            </SafeAreaViewWrapper>
-          </SafeAreaProvider>
+          <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
+            <PollModalHeader onPress={onRequestClose} title={t('Poll Results')} />
+            <PollResults message={message} poll={poll} />
+          </SafeAreaViewWrapper>
         </Modal>
       ) : null}
     </>
@@ -107,12 +88,10 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
       ) : null}
       {showAllOptions ? (
         <Modal animationType='slide' onRequestClose={onRequestClose} visible={showAllOptions}>
-          <SafeAreaProvider>
-            <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
-              <PollModalHeader onPress={onRequestClose} title={t('Poll Options')} />
-              <PollAllOptions message={message} poll={poll} />
-            </SafeAreaViewWrapper>
-          </SafeAreaProvider>
+          <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
+            <PollModalHeader onPress={onRequestClose} title={t('Poll Options')} />
+            <PollAllOptions message={message} poll={poll} />
+          </SafeAreaViewWrapper>
         </Modal>
       ) : null}
     </>
@@ -155,12 +134,10 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
       ) : null}
       {showAnswers ? (
         <Modal animationType='slide' onRequestClose={onRequestClose} visible={showAnswers}>
-          <SafeAreaProvider>
-            <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
-              <PollModalHeader onPress={onRequestClose} title={t('Poll Comments')} />
-              <PollAnswersList message={message} poll={poll} />
-            </SafeAreaViewWrapper>
-          </SafeAreaProvider>
+          <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
+            <PollModalHeader onPress={onRequestClose} title={t('Poll Comments')} />
+            <PollAnswersList message={message} poll={poll} />
+          </SafeAreaViewWrapper>
         </Modal>
       ) : null}
     </>

package/src/components/Poll/components/PollResults/PollResultItem.tsx

@@ -1,17 +1,5 @@
-import React, { PropsWithChildren, useCallback, useState } from 'react';
-import {
-  Modal,
-  SafeAreaView as RNSafeAreaView,
-  StyleSheet,
-  Text,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import {
-  SafeAreaProvider,
-  SafeAreaView as SafeAreaViewOriginal,
-} from 'react-native-safe-area-context';
+import React, { useCallback, useState } from 'react';
+import { Modal, StyleSheet, Text, View } from 'react-native';
 
 import { LocalMessage, Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
 
@@ -25,24 +13,11 @@ import {
   useTranslationContext,
 } from '../../../../contexts';
 
+import { SafeAreaViewWrapper } from '../../../UIComponents/SafeAreaViewWrapper';
 import { usePollState } from '../../hooks/usePollState';
 import { GenericPollButton } from '../Button';
 import { PollModalHeader } from '../PollModalHeader';
 
-// This is a workaround to support SafeAreaView on React Native 0.81.0+
-const SafeAreaViewWrapper = ({ children, style }: PropsWithChildren<{ style: ViewStyle }>) => {
-  if (SafeAreaViewOriginal) {
-    return (
-      <SafeAreaProvider>
-        <SafeAreaViewOriginal edges={['bottom', 'top']} style={style}>
-          {children}
-        </SafeAreaViewOriginal>
-      </SafeAreaProvider>
-    );
-  }
-  return <RNSafeAreaView style={style}>{children}</RNSafeAreaView>;
-};
-
 export type ShowAllVotesButtonProps = {
   option: PollOption;
   onPress?: ({

package/src/components/UIComponents/SafeAreaViewWrapper.tsx

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from 'react';
+import { SafeAreaView as RNFSafeAreaView, ViewStyle } from 'react-native';
+import {
+  SafeAreaProvider,
+  SafeAreaView as SafeAreaViewOriginal,
+  SafeAreaViewProps,
+} from 'react-native-safe-area-context';
+
+export const SafeAreaView = SafeAreaViewOriginal ?? RNFSafeAreaView;
+
+export const SafeAreaViewWrapper = ({
+  children,
+  style,
+  ...restProps
+}: PropsWithChildren<{ style: ViewStyle }> & SafeAreaViewProps) => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView edges={['bottom', 'top']} style={style} {...restProps}>
+        {children}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.8.1-beta.1"
+  "version": "8.8.1"
 }