fix: handle react-native-safe-area-context optionally for RN version >=0.81 (#3239)

* fix: handle react-native-safe-area-context optionally for RN version >=0.81

* fix: deep import issue

* fix: avoid check using version

Author: khushal87

package/package.json

@@ -91,6 +91,7 @@
     "react-native": ">=0.73.0",
     "react-native-gesture-handler": ">=2.18.0",
     "react-native-reanimated": ">=3.16.0",
+    "react-native-safe-area-context": ">=5.4.1",
     "react-native-svg": ">=15.8.0"
   },
   "peerDependenciesMeta": {
@@ -111,11 +112,11 @@
     "@babel/core": "^7.27.4",
     "@babel/runtime": "^7.27.6",
     "@op-engineering/op-sqlite": "^14.0.3",
-    "@shopify/flash-list": "^2.0.3",
     "@react-native-community/eslint-config": "3.2.0",
     "@react-native-community/eslint-plugin": "1.3.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native/babel-preset": "0.79.3",
+    "@shopify/flash-list": "^2.0.3",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "13.2.0",
     "@types/better-sqlite3": "^7.6.13",
@@ -153,6 +154,7 @@
     "react-native-builder-bob": "0.40.11",
     "react-native-gesture-handler": "^2.26.0",
     "react-native-reanimated": "3.18.0",
+    "react-native-safe-area-context": "^5.6.1",
     "react-native-svg": "15.12.0",
     "react-test-renderer": "19.1.0",
     "rimraf": "^6.0.1",

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

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import {
   ActivityIndicator,
-  SafeAreaView,
+  SafeAreaView as RNSafeAreaView,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -15,6 +15,8 @@ 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';
@@ -27,13 +29,15 @@ import {
   VideoType,
 } from '../../../native';
 
+import { FileTypes } from '../../../types/types';
+import type { Photo } from '../ImageGallery';
+
+const SafeAreaView = SafeAreaViewOriginal ?? RNSafeAreaView;
+
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
 
-import { FileTypes } from '../../../types/types';
-import type { Photo } from '../ImageGallery';
-
 export type ImageGalleryFooterCustomComponent = ({
   openGridView,
   photo,
@@ -179,7 +183,10 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterPropsWith
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
-      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, footerStyle, container]}>
+      <ReanimatedSafeAreaView
+        edges={['bottom']}
+        style={[{ backgroundColor: white }, footerStyle, container]}
+      >
         {photo.type === FileTypes.Video ? (
           videoControlElement ? (
             videoControlElement({ duration, onPlayPause, paused, progress, videoRef })

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

@@ -1,12 +1,23 @@
 import React, { useMemo, useState } from 'react';
-import { Pressable, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
+
+import {
+  Pressable,
+  SafeAreaView as RNSafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native';
+
 import Animated, {
   Extrapolation,
   interpolate,
   SharedValue,
   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';
@@ -15,6 +26,9 @@ import { Close } from '../../../icons';
 import { getDateString } from '../../../utils/i18n/getDateString';
 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;
@@ -92,7 +106,10 @@ export const ImageGalleryHeader = (props: Props) => {
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
-      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, headerStyle, container]}>
+      <ReanimatedSafeAreaView
+        edges={['top']}
+        style={[{ backgroundColor: white }, headerStyle, container]}
+      >
         <View style={[styles.innerContainer, innerContainer]}>
           {leftElement ? (
             leftElement({ hideOverlay, photo })

package/src/components/MessageInput/MessageInput.tsx

@@ -1,5 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Modal, SafeAreaView, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
+import {
+  Modal,
+  SafeAreaView as RNSafeAreaView,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  View,
+} from 'react-native';
 
 import {
   Gesture,
@@ -16,6 +23,8 @@ 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';
@@ -62,6 +71,9 @@ 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;
+
 const styles = StyleSheet.create({
   attachmentSeparator: {
     borderBottomWidth: 1,

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

@@ -1,5 +1,9 @@
-import React, { useCallback, useState } from 'react';
-import { Modal, SafeAreaView } from 'react-native';
+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 { GenericPollButton, PollButtonProps } from './Button';
 import { PollAnswersList } from './PollAnswersList';
@@ -11,6 +15,20 @@ import { PollResults } from './PollResults';
 import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts';
 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();
@@ -32,19 +50,21 @@ export const ViewResultsButton = (props: PollButtonProps) => {
     },
   } = useTheme();
 
+  const onRequestClose = useCallback(() => {
+    setShowResults(false);
+  }, []);
+
   return (
     <>
       <GenericPollButton onPress={onPressHandler} title={t('View Results')} />
       {showResults ? (
-        <Modal
-          animationType='slide'
-          onRequestClose={() => setShowResults(false)}
-          visible={showResults}
-        >
-          <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
-            <PollModalHeader onPress={() => setShowResults(false)} title={t('Poll Results')} />
-            <PollResults message={message} poll={poll} />
-          </SafeAreaView>
+        <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>
         </Modal>
       ) : null}
     </>
@@ -67,6 +87,10 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
     setShowAllOptions(true);
   }, [message, onPress, poll]);
 
+  const onRequestClose = useCallback(() => {
+    setShowAllOptions(false);
+  }, []);
+
   const {
     theme: {
       colors: { white },
@@ -82,15 +106,13 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAllOptions ? (
-        <Modal
-          animationType='slide'
-          onRequestClose={() => setShowAllOptions(false)}
-          visible={showAllOptions}
-        >
-          <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
-            <PollModalHeader onPress={() => setShowAllOptions(false)} title={t('Poll Options')} />
-            <PollAllOptions message={message} poll={poll} />
-          </SafeAreaView>
+        <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>
         </Modal>
       ) : null}
     </>
@@ -119,6 +141,10 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
     },
   } = useTheme();
 
+  const onRequestClose = useCallback(() => {
+    setShowAnswers(false);
+  }, []);
+
   return (
     <>
       {answersCount && answersCount > 0 ? (
@@ -128,15 +154,13 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAnswers ? (
-        <Modal
-          animationType='slide'
-          onRequestClose={() => setShowAnswers(false)}
-          visible={showAnswers}
-        >
-          <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
-            <PollModalHeader onPress={() => setShowAnswers(false)} title={t('Poll Comments')} />
-            <PollAnswersList message={message} poll={poll} />
-          </SafeAreaView>
+        <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>
         </Modal>
       ) : null}
     </>
@@ -159,14 +183,18 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
     setShowAddOptionDialog(true);
   }, [message, onPress, poll]);
 
+  const onRequestClose = useCallback(() => {
+    setShowAddOptionDialog(false);
+  }, []);
+
   return (
     <>
       {!isClosed && allowUserSuggestedOptions ? (
         <GenericPollButton onPress={onPressHandler} title={t('Suggest an option')} />
       ) : null}
       {showAddOptionDialog ? (
         <PollInputDialog
-          closeDialog={() => setShowAddOptionDialog(false)}
+          closeDialog={onRequestClose}
           onSubmit={addOption}
           title={t('Suggest an option')}
           visible={showAddOptionDialog}
@@ -192,14 +220,18 @@ export const AddCommentButton = (props: PollButtonProps) => {
     setShowAddCommentDialog(true);
   }, [message, onPress, poll]);
 
+  const onRequestClose = useCallback(() => {
+    setShowAddCommentDialog(false);
+  }, []);
+
   return (
     <>
       {!isClosed && allowAnswers ? (
         <GenericPollButton onPress={onPressHandler} title={t('Add a comment')} />
       ) : null}
       {showAddCommentDialog ? (
         <PollInputDialog
-          closeDialog={() => setShowAddCommentDialog(false)}
+          closeDialog={onRequestClose}
           initialValue={ownAnswer?.answer_text ?? ''}
           onSubmit={addComment}
           title={t('Add a comment')}

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

@@ -1,5 +1,17 @@
-import React, { useCallback, useState } from 'react';
-import { Modal, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+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 { LocalMessage, Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
 
@@ -17,6 +29,20 @@ 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?: ({
@@ -66,10 +92,10 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
           onRequestClose={() => setShowAllVotes(false)}
           visible={showAllVotes}
         >
-          <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
+          <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
             <PollModalHeader onPress={() => setShowAllVotes(false)} title={option.text} />
             <PollOptionFullResults message={message} option={option} poll={poll} />
-          </SafeAreaView>
+          </SafeAreaViewWrapper>
         </Modal>
       ) : null}
     </>

package/yarn.lock

@@ -7756,6 +7756,11 @@ [email protected]:
     invariant "^2.2.4"
     react-native-is-edge-to-edge "1.1.7"
 
+react-native-safe-area-context@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-5.6.1.tgz#cb4d249ef1a6f7e8fd0cfdfa9764838dffda26b6"
+  integrity sha512-/wJE58HLEAkATzhhX1xSr+fostLsK8Q97EfpfMDKo8jlOc1QKESSX/FQrhk7HhQH/2uSaox4Y86sNaI02kteiA==
+
 [email protected]:
   version "15.12.0"
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.12.0.tgz#0e2d476961e8b07f8c549fe4489c99b5130dc150"