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

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,16 @@ import {
   VideoType,
 } from '../../../native';
 
+import { FileTypes } from '../../../types/types';
+import { getReactNativeVersion } from '../../../utils/getReactNativeVersion';
+import type { Photo } from '../ImageGallery';
+
+const SafeAreaView = getReactNativeVersion().minor >= 81 ? 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 +184,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,20 +1,35 @@
 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';
 import { Close } from '../../../icons';
 
+import { getReactNativeVersion } from '../../../utils/getReactNativeVersion';
 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 = getReactNativeVersion().minor >= 81 ? SafeAreaViewOriginal : RNSafeAreaView;
+
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
@@ -92,7 +107,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';
@@ -58,10 +67,14 @@ import {
   isImageMediaLibraryAvailable,
   NativeHandlers,
 } from '../../native';
+import { getReactNativeVersion } from '../../utils/getReactNativeVersion';
 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 = getReactNativeVersion().minor >= 81 ? 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';
@@ -9,8 +13,23 @@ import { PollAllOptions } from './PollOption';
 import { PollResults } from './PollResults';
 
 import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts';
+import { getReactNativeVersion } from '../../../utils/getReactNativeVersion';
 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 (getReactNativeVersion().minor >= 81) {
+    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 +51,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 +88,10 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
     setShowAllOptions(true);
   }, [message, onPress, poll]);
 
+  const onRequestClose = useCallback(() => {
+    setShowAllOptions(false);
+  }, []);
+
   const {
     theme: {
       colors: { white },
@@ -82,15 +107,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 +142,10 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
     },
   } = useTheme();
 
+  const onRequestClose = useCallback(() => {
+    setShowAnswers(false);
+  }, []);
+
   return (
     <>
       {answersCount && answersCount > 0 ? (
@@ -128,15 +155,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 +184,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 +221,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';
 
@@ -13,10 +25,25 @@ import {
   useTranslationContext,
 } from '../../../../contexts';
 
+import { getReactNativeVersion } from '../../../../utils/getReactNativeVersion';
 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 (getReactNativeVersion().minor >= 81) {
+    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 +93,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}
     </>