chore: removed SafeAreaView legacy package usage + fixed the issue wi…

examples/SampleApp/src/components/ChannelInfoOverlay.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { FlatList, Keyboard, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { FlatList, Keyboard, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { Gesture, GestureDetector, Pressable } from 'react-native-gesture-handler';
@@ -30,6 +30,7 @@ import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayConte
 import { Archive } from '../icons/Archive';
 import { Pin } from '../icons/Pin';
 import { useChannelInfoOverlayActions } from '../hooks/useChannelInfoOverlayActions';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 dayjs.extend(relativeTime);
 
@@ -274,7 +275,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
               <Animated.View
                 style={[styles.containerInner, { backgroundColor: white }, showScreenStyle]}
               >
-                <SafeAreaView>
+                <SafeAreaView edges={['bottom']}>
                   {channel && (
                     <>
                       <View style={styles.detailsContainer}>

examples/SampleApp/src/components/MenuDrawer.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import {
   Image,
-  SafeAreaView,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -14,6 +13,7 @@ import { useAppContext } from '../context/AppContext';
 import { SecretMenu } from './SecretMenu.tsx';
 
 import type { DrawerContentComponentProps } from '@react-navigation/drawer';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export const styles = StyleSheet.create({
   avatar: {

examples/SampleApp/src/components/UserInfoOverlay.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Keyboard, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { Keyboard, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { Gesture, GestureDetector, Pressable } from 'react-native-gesture-handler';
@@ -31,6 +31,7 @@ import { useUserInfoOverlayContext } from '../context/UserInfoOverlayContext';
 import { useAppContext } from '../context/AppContext';
 import { UserResponse } from 'stream-chat';
 import { useUserInfoOverlayActions } from '../hooks/useUserInfoOverlayActions';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 dayjs.extend(relativeTime);
 
@@ -255,7 +256,7 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
               <Animated.View
                 style={[styles.containerInner, { backgroundColor: white }, showScreenStyle]}
               >
-                <SafeAreaView>
+                <SafeAreaView edges={['bottom']}>
                   {channel && (
                     <>
                       <View style={styles.detailsContainer}>

examples/SampleApp/src/screens/OneOnOneChannelDetailScreen.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import {
   Image,
-  SafeAreaView,
   ScrollView,
   StyleSheet,
   Switch,
@@ -28,6 +27,7 @@ import type { RouteProp } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import type { StackNavigatorParamList } from '../types';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 const styles = StyleSheet.create({
   actionContainer: {

examples/TypeScriptMessaging/App.tsx

@@ -4,14 +4,13 @@ import {
   I18nManager,
   LogBox,
   Platform,
-  SafeAreaView,
   useColorScheme,
   View,
 } from 'react-native';
 import { DarkTheme, DefaultTheme, NavigationContainer, RouteProp } from '@react-navigation/native';
 import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
 import { useHeaderHeight } from '@react-navigation/elements';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { Channel as ChannelType, ChannelSort } from 'stream-chat';
 import {
   Channel,
@@ -118,7 +117,7 @@ const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
   }
 
   return (
-    <SafeAreaView>
+    <SafeAreaView edges={['bottom']}>
       <Channel
         audioRecordingEnabled={true}
         channel={channel}
@@ -162,7 +161,7 @@ const ThreadScreen: React.FC<ThreadScreenProps> = ({ navigation }) => {
   }
 
   return (
-    <SafeAreaView>
+    <SafeAreaView edges={['bottom']}>
       <Channel
         audioRecordingEnabled={true}
         channel={channel}

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useState } from 'react';
 import {
   ActivityIndicator,
-  SafeAreaView as RNSafeAreaView,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -15,8 +14,6 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated';
 
-import { SafeAreaView as SafeAreaViewOriginal } from 'react-native-safe-area-context';
-
 import { ImageGalleryVideoControl } from './ImageGalleryVideoControl';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
@@ -30,10 +27,9 @@ import {
 } from '../../../native';
 
 import { FileTypes } from '../../../types/types';
+import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
 import type { Photo } from '../ImageGallery';
 
-const SafeAreaView = SafeAreaViewOriginal ?? RNSafeAreaView;
-
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -1,13 +1,6 @@
 import React, { useMemo, useState } from 'react';
 
-import {
-  Pressable,
-  SafeAreaView as RNSafeAreaView,
-  StyleSheet,
-  Text,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Pressable, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import Animated, {
   Extrapolation,
@@ -16,19 +9,15 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated';
 
-import { SafeAreaView as SafeAreaViewOriginal } from 'react-native-safe-area-context';
-
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
 
 import { getDateString } from '../../../utils/i18n/getDateString';
+import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
 import type { Photo } from '../ImageGallery';
 
-// This is a workaround to support SafeAreaView on React Native 0.81.0+
-const SafeAreaView = SafeAreaViewOriginal ?? RNSafeAreaView;
-
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;

package/src/components/MessageInput/MessageInput.tsx

@@ -1,12 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Modal,
-  SafeAreaView as RNSafeAreaView,
-  StyleSheet,
-  TextInput,
-  TextInputProps,
-  View,
-} from 'react-native';
+import { Modal, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
 
 import {
   Gesture,
@@ -23,8 +16,6 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
-import { SafeAreaView as SafeAreaViewOriginal } from 'react-native-safe-area-context';
-
 import { type MessageComposerState, type TextComposerState, type UserResponse } from 'stream-chat';
 
 import { useAudioController } from './hooks/useAudioController';
@@ -66,9 +57,7 @@ import { isAudioRecorderAvailable, NativeHandlers } from '../../native';
 import { AIStates, useAIState } from '../AITypingIndicatorView';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
-
-// This is a workaround to support SafeAreaView on React Native 0.81.0+
-const SafeAreaView = SafeAreaViewOriginal ?? RNSafeAreaView;
+import { SafeAreaViewWrapper } from '../UIComponents/SafeAreaViewWrapper';
 
 const styles = StyleSheet.create({
   attachmentSeparator: {
@@ -584,13 +573,13 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
             visible={showPollCreationDialog}
           >
             <GestureHandlerRootView style={{ flex: 1 }}>
-              <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
+              <SafeAreaViewWrapper style={{ flex: 1 }}>
                 <CreatePoll
                   closePollCreationDialog={closePollCreationDialog}
                   CreatePollContent={CreatePollContent}
                   sendMessage={sendMessage}
                 />
-              </SafeAreaView>
+              </SafeAreaViewWrapper>
             </GestureHandlerRootView>
           </Modal>
         </View>

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>
+  );
+};