Skip to content

Commit 745f541

Browse files
greenfrvrgreenfrvr
authored
Merge pull request #3282 from GetStream/chore/remove-lagacy-safe-area
chore: removed SafeAreaView legacy package usage + fixed the issue wi…
2 parents 6c3dea7 + 4593669 commit 745f541

File tree

11 files changed

+59
-109
lines changed

11 files changed

+59
-109
lines changed

‎examples/SampleApp/src/components/ChannelInfoOverlay.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect } from 'react';
2-
import { FlatList, Keyboard, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
2+
import { FlatList, Keyboard, StyleSheet, Text, View, ViewStyle } from 'react-native';
33
import dayjs from 'dayjs';
44
import relativeTime from 'dayjs/plugin/relativeTime';
55
import { Gesture, GestureDetector, Pressable } from 'react-native-gesture-handler';
@@ -30,6 +30,7 @@ import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayConte
3030
import { Archive } from '../icons/Archive';
3131
import { Pin } from '../icons/Pin';
3232
import { useChannelInfoOverlayActions } from '../hooks/useChannelInfoOverlayActions';
33+
import { SafeAreaView } from 'react-native-safe-area-context';
3334

3435
dayjs.extend(relativeTime);
3536

@@ -274,7 +275,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
274275
<Animated.View
275276
style={[styles.containerInner, { backgroundColor: white }, showScreenStyle]}
276277
>
277-
<SafeAreaView>
278+
<SafeAreaView edges={['bottom']}>
278279
{channel && (
279280
<>
280281
<View style={styles.detailsContainer}>

‎examples/SampleApp/src/components/MenuDrawer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useCallback, useEffect, useState } from 'react';
22
import {
33
Image,
4-
SafeAreaView,
54
StyleSheet,
65
Text,
76
TouchableOpacity,
@@ -14,6 +13,7 @@ import { useAppContext } from '../context/AppContext';
1413
import { SecretMenu } from './SecretMenu.tsx';
1514

1615
import type { DrawerContentComponentProps } from '@react-navigation/drawer';
16+
import { SafeAreaView } from 'react-native-safe-area-context';
1717

1818
export const styles = StyleSheet.create({
1919
avatar: {

‎examples/SampleApp/src/components/UserInfoOverlay.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect } from 'react';
2-
import { Keyboard, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
2+
import { Keyboard, StyleSheet, Text, View, ViewStyle } from 'react-native';
33
import dayjs from 'dayjs';
44
import relativeTime from 'dayjs/plugin/relativeTime';
55
import { Gesture, GestureDetector, Pressable } from 'react-native-gesture-handler';
@@ -31,6 +31,7 @@ import { useUserInfoOverlayContext } from '../context/UserInfoOverlayContext';
3131
import { useAppContext } from '../context/AppContext';
3232
import { UserResponse } from 'stream-chat';
3333
import { useUserInfoOverlayActions } from '../hooks/useUserInfoOverlayActions';
34+
import { SafeAreaView } from 'react-native-safe-area-context';
3435

3536
dayjs.extend(relativeTime);
3637

@@ -255,7 +256,7 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
255256
<Animated.View
256257
style={[styles.containerInner, { backgroundColor: white }, showScreenStyle]}
257258
>
258-
<SafeAreaView>
259+
<SafeAreaView edges={['bottom']}>
259260
{channel && (
260261
<>
261262
<View style={styles.detailsContainer}>

‎examples/SampleApp/src/screens/OneOnOneChannelDetailScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useState } from 'react';
22
import {
33
Image,
4-
SafeAreaView,
54
ScrollView,
65
StyleSheet,
76
Switch,
@@ -28,6 +27,7 @@ import type { RouteProp } from '@react-navigation/native';
2827
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
2928

3029
import type { StackNavigatorParamList } from '../types';
30+
import { SafeAreaView } from 'react-native-safe-area-context';
3131

3232
const styles = StyleSheet.create({
3333
actionContainer: {

‎examples/TypeScriptMessaging/App.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@ import {
44
I18nManager,
55
LogBox,
66
Platform,
7-
SafeAreaView,
87
useColorScheme,
98
View,
109
} from 'react-native';
1110
import { DarkTheme, DefaultTheme, NavigationContainer, RouteProp } from '@react-navigation/native';
1211
import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
1312
import { useHeaderHeight } from '@react-navigation/elements';
14-
import { SafeAreaProvider } from 'react-native-safe-area-context';
13+
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
1514
import { Channel as ChannelType, ChannelSort } from 'stream-chat';
1615
import {
1716
Channel,
@@ -118,7 +117,7 @@ const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
118117
}
119118

120119
return (
121-
<SafeAreaView>
120+
<SafeAreaView edges={['bottom']}>
122121
<Channel
123122
audioRecordingEnabled={true}
124123
channel={channel}
@@ -162,7 +161,7 @@ const ThreadScreen: React.FC<ThreadScreenProps> = ({ navigation }) => {
162161
}
163162

164163
return (
165-
<SafeAreaView>
164+
<SafeAreaView edges={['bottom']}>
166165
<Channel
167166
audioRecordingEnabled={true}
168167
channel={channel}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useRef, useState } from 'react';
22
import {
33
ActivityIndicator,
4-
SafeAreaView as RNSafeAreaView,
54
StyleSheet,
65
Text,
76
TouchableOpacity,
@@ -15,8 +14,6 @@ import Animated, {
1514
useAnimatedStyle,
1615
} from 'react-native-reanimated';
1716

18-
import { SafeAreaView as SafeAreaViewOriginal } from 'react-native-safe-area-context';
19-
2017
import { ImageGalleryVideoControl } from './ImageGalleryVideoControl';
2118

2219
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
@@ -30,10 +27,9 @@ import {
3027
} from '../../../native';
3128

3229
import { FileTypes } from '../../../types/types';
30+
import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
3331
import type { Photo } from '../ImageGallery';
3432

35-
const SafeAreaView = SafeAreaViewOriginal ?? RNSafeAreaView;
36-
3733
const ReanimatedSafeAreaView = Animated.createAnimatedComponent
3834
? Animated.createAnimatedComponent(SafeAreaView)
3935
: SafeAreaView;

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

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
import React, { useMemo, useState } from 'react';
22

3-
import {
4-
Pressable,
5-
SafeAreaView as RNSafeAreaView,
6-
StyleSheet,
7-
Text,
8-
View,
9-
ViewStyle,
10-
} from 'react-native';
3+
import { Pressable, StyleSheet, Text, View, ViewStyle } from 'react-native';
114

125
import Animated, {
136
Extrapolation,
@@ -16,19 +9,15 @@ import Animated, {
169
useAnimatedStyle,
1710
} from 'react-native-reanimated';
1811

19-
import { SafeAreaView as SafeAreaViewOriginal } from 'react-native-safe-area-context';
20-
2112
import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
2213
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
2314
import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
2415
import { Close } from '../../../icons';
2516

2617
import { getDateString } from '../../../utils/i18n/getDateString';
18+
import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
2719
import type { Photo } from '../ImageGallery';
2820

29-
// This is a workaround to support SafeAreaView on React Native 0.81.0+
30-
const SafeAreaView = SafeAreaViewOriginal ?? RNSafeAreaView;
31-
3221
const ReanimatedSafeAreaView = Animated.createAnimatedComponent
3322
? Animated.createAnimatedComponent(SafeAreaView)
3423
: SafeAreaView;

‎package/src/components/MessageInput/MessageInput.tsx‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import React, { useCallback, useEffect, useMemo, useState } from 'react';
2-
import {
3-
Modal,
4-
SafeAreaView as RNSafeAreaView,
5-
StyleSheet,
6-
TextInput,
7-
TextInputProps,
8-
View,
9-
} from 'react-native';
2+
import { Modal, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
103

114
import {
125
Gesture,
@@ -23,8 +16,6 @@ import Animated, {
2316
withSpring,
2417
} from 'react-native-reanimated';
2518

26-
import { SafeAreaView as SafeAreaViewOriginal } from 'react-native-safe-area-context';
27-
2819
import { type MessageComposerState, type TextComposerState, type UserResponse } from 'stream-chat';
2920

3021
import { useAudioController } from './hooks/useAudioController';
@@ -66,9 +57,7 @@ import { isAudioRecorderAvailable, NativeHandlers } from '../../native';
6657
import { AIStates, useAIState } from '../AITypingIndicatorView';
6758
import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
6859
import { CreatePoll } from '../Poll/CreatePollContent';
69-
70-
// This is a workaround to support SafeAreaView on React Native 0.81.0+
71-
const SafeAreaView = SafeAreaViewOriginal ?? RNSafeAreaView;
60+
import { SafeAreaViewWrapper } from '../UIComponents/SafeAreaViewWrapper';
7261

7362
const styles = StyleSheet.create({
7463
attachmentSeparator: {
@@ -584,13 +573,13 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
584573
visible={showPollCreationDialog}
585574
>
586575
<GestureHandlerRootView style={{ flex: 1 }}>
587-
<SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
576+
<SafeAreaViewWrapper style={{ flex: 1 }}>
588577
<CreatePoll
589578
closePollCreationDialog={closePollCreationDialog}
590579
CreatePollContent={CreatePollContent}
591580
sendMessage={sendMessage}
592581
/>
593-
</SafeAreaView>
582+
</SafeAreaViewWrapper>
594583
</GestureHandlerRootView>
595584
</Modal>
596585
</View>

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

Lines changed: 15 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import React, { PropsWithChildren, useCallback, useState } from 'react';
2-
import { Modal, SafeAreaView as RNSafeAreaView, ViewStyle } from 'react-native';
3-
import {
4-
SafeAreaProvider,
5-
SafeAreaView as SafeAreaViewOriginal,
6-
} from 'react-native-safe-area-context';
1+
import React, { useCallback, useState } from 'react';
2+
import { Modal } from 'react-native';
73

84
import { GenericPollButton, PollButtonProps } from './Button';
95
import { PollAnswersList } from './PollAnswersList';
@@ -13,22 +9,9 @@ import { PollAllOptions } from './PollOption';
139
import { PollResults } from './PollResults';
1410

1511
import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts';
12+
import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
1613
import { usePollState } from '../hooks/usePollState';
1714

18-
// This is a workaround to support SafeAreaView on React Native 0.81.0+
19-
const SafeAreaViewWrapper = ({ children, style }: PropsWithChildren<{ style: ViewStyle }>) => {
20-
if (SafeAreaViewOriginal) {
21-
return (
22-
<SafeAreaProvider>
23-
<SafeAreaViewOriginal edges={['bottom', 'top']} style={style}>
24-
{children}
25-
</SafeAreaViewOriginal>
26-
</SafeAreaProvider>
27-
);
28-
}
29-
return <RNSafeAreaView style={style}>{children}</RNSafeAreaView>;
30-
};
31-
3215
export const ViewResultsButton = (props: PollButtonProps) => {
3316
const { t } = useTranslationContext();
3417
const { message, poll } = usePollContext();
@@ -59,12 +42,10 @@ export const ViewResultsButton = (props: PollButtonProps) => {
5942
<GenericPollButton onPress={onPressHandler} title={t('View Results')} />
6043
{showResults ? (
6144
<Modal animationType='slide' onRequestClose={onRequestClose} visible={showResults}>
62-
<SafeAreaProvider>
63-
<SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
64-
<PollModalHeader onPress={onRequestClose} title={t('Poll Results')} />
65-
<PollResults message={message} poll={poll} />
66-
</SafeAreaViewWrapper>
67-
</SafeAreaProvider>
45+
<SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
46+
<PollModalHeader onPress={onRequestClose} title={t('Poll Results')} />
47+
<PollResults message={message} poll={poll} />
48+
</SafeAreaViewWrapper>
6849
</Modal>
6950
) : null}
7051
</>
@@ -107,12 +88,10 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
10788
) : null}
10889
{showAllOptions ? (
10990
<Modal animationType='slide' onRequestClose={onRequestClose} visible={showAllOptions}>
110-
<SafeAreaProvider>
111-
<SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
112-
<PollModalHeader onPress={onRequestClose} title={t('Poll Options')} />
113-
<PollAllOptions message={message} poll={poll} />
114-
</SafeAreaViewWrapper>
115-
</SafeAreaProvider>
91+
<SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
92+
<PollModalHeader onPress={onRequestClose} title={t('Poll Options')} />
93+
<PollAllOptions message={message} poll={poll} />
94+
</SafeAreaViewWrapper>
11695
</Modal>
11796
) : null}
11897
</>
@@ -155,12 +134,10 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
155134
) : null}
156135
{showAnswers ? (
157136
<Modal animationType='slide' onRequestClose={onRequestClose} visible={showAnswers}>
158-
<SafeAreaProvider>
159-
<SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
160-
<PollModalHeader onPress={onRequestClose} title={t('Poll Comments')} />
161-
<PollAnswersList message={message} poll={poll} />
162-
</SafeAreaViewWrapper>
163-
</SafeAreaProvider>
137+
<SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
138+
<PollModalHeader onPress={onRequestClose} title={t('Poll Comments')} />
139+
<PollAnswersList message={message} poll={poll} />
140+
</SafeAreaViewWrapper>
164141
</Modal>
165142
) : null}
166143
</>

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

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
1-
import React, { PropsWithChildren, useCallback, useState } from 'react';
2-
import {
3-
Modal,
4-
SafeAreaView as RNSafeAreaView,
5-
StyleSheet,
6-
Text,
7-
View,
8-
ViewStyle,
9-
} from 'react-native';
10-
11-
import {
12-
SafeAreaProvider,
13-
SafeAreaView as SafeAreaViewOriginal,
14-
} from 'react-native-safe-area-context';
1+
import React, { useCallback, useState } from 'react';
2+
import { Modal, StyleSheet, Text, View } from 'react-native';
153

164
import { LocalMessage, Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
175

@@ -25,24 +13,11 @@ import {
2513
useTranslationContext,
2614
} from '../../../../contexts';
2715

16+
import { SafeAreaViewWrapper } from '../../../UIComponents/SafeAreaViewWrapper';
2817
import { usePollState } from '../../hooks/usePollState';
2918
import { GenericPollButton } from '../Button';
3019
import { PollModalHeader } from '../PollModalHeader';
3120

32-
// This is a workaround to support SafeAreaView on React Native 0.81.0+
33-
const SafeAreaViewWrapper = ({ children, style }: PropsWithChildren<{ style: ViewStyle }>) => {
34-
if (SafeAreaViewOriginal) {
35-
return (
36-
<SafeAreaProvider>
37-
<SafeAreaViewOriginal edges={['bottom', 'top']} style={style}>
38-
{children}
39-
</SafeAreaViewOriginal>
40-
</SafeAreaProvider>
41-
);
42-
}
43-
return <RNSafeAreaView style={style}>{children}</RNSafeAreaView>;
44-
};
45-
4621
export type ShowAllVotesButtonProps = {
4722
option: PollOption;
4823
onPress?: ({

0 commit comments

Comments
 (0)