chore: removed SafeAreaView legacy package usage (#1985)

### 💡 Overview
Removing `SafeAreaView` deprecated usages.

### 📝 Implementation notes
* Replaced `SafeAreaView` usages with the version from
`react-native-safe-area-context` package.
* Fixed an issue for `ParticipantsInfoList` component: when there is a
big list of users action buttons where moved outside of the viewport.

🎫 Ticket:
[RN-301](https://linear.app/stream/issue/RN-301/replace-old-safeareaview-usages)

Author: greenfrvr

sample-apps/react-native/dogfood/src/components/AndroidAudioRoutePickerDrawer.tsx

@@ -13,7 +13,6 @@ import {
   Image,
   Modal,
   PanResponder,
-  SafeAreaView,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -22,6 +21,7 @@ import {
   View,
 } from 'react-native';
 import { BOTTOM_CONTROLS_HEIGHT } from '../constants';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 type DrawerProps = {
   isVisible: boolean;

sample-apps/react-native/dogfood/src/components/AuthenticatingProgress.tsx

@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
-import { ActivityIndicator, SafeAreaView, StyleSheet } from 'react-native';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useTheme } from '@stream-io/video-react-native-sdk';
 
 export const AuthenticationProgress = () => {
   const styles = useStyles();
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <ActivityIndicator size={'large'} style={StyleSheet.absoluteFill} />
-    </SafeAreaView>
+    </View>
   );
 };
 

sample-apps/react-native/dogfood/src/components/BottomControlsDrawer.tsx

@@ -13,7 +13,6 @@ import {
   FlatList,
   Modal,
   PanResponder,
-  SafeAreaView,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -24,6 +23,7 @@ import { BOTTOM_CONTROLS_HEIGHT } from '../constants';
 import RaiseHand from '../assets/RaiseHand';
 import { CallStats } from './CallStats';
 import { VideoFilters } from './VideoEffects';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
 export type DrawerOption = {
   id: string;
@@ -207,8 +207,8 @@ export const BottomControlsDrawer: React.FC<DrawerProps> = ({
       supportedOrientations={['portrait', 'landscape']}
     >
       <TouchableWithoutFeedback onPress={onClose}>
-        <View style={styles.overlay}>
-          <SafeAreaView style={styles.safeArea}>
+        <SafeAreaProvider>
+          <SafeAreaView style={styles.overlay} edges={['bottom']}>
             <Animated.View
               style={[styles.container, { transform: [{ translateY }] }]}
             >
@@ -217,7 +217,7 @@ export const BottomControlsDrawer: React.FC<DrawerProps> = ({
               {showCallStats && <CallStats showCodecInfo />}
             </Animated.View>
           </SafeAreaView>
-        </View>
+        </SafeAreaProvider>
       </TouchableWithoutFeedback>
     </Modal>
   );
@@ -234,10 +234,6 @@ const useStyles = () => {
           flex: 1,
           justifyContent: 'flex-end',
         },
-        safeArea: {
-          flex: 1,
-          justifyContent: 'flex-end',
-        },
         container: {
           backgroundColor: colors.sheetPrimary,
           borderTopLeftRadius: variants.borderRadiusSizes.lg,

sample-apps/react-native/dogfood/src/components/ParticipantsInfoList.tsx

@@ -18,7 +18,6 @@ import {
   FlatList,
   Modal,
   Pressable,
-  SafeAreaView,
   Share,
   StyleSheet,
   Text,
@@ -34,6 +33,7 @@ import { generateParticipantTitle } from '../utils';
 import { Z_INDEX } from '../constants';
 import { ButtonTestIds } from '../constants/TestIds';
 import { useAppGlobalStoreValue } from '../contexts/AppContext';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export interface ParticipantsInfoListProps {
   /**
@@ -272,6 +272,7 @@ const useStyles = () => {
           borderRadius: 15,
           marginHorizontal: 16,
           marginTop: 65,
+          flexShrink: 1,
         },
         header: {
           flexDirection: 'row',

sample-apps/react-native/dogfood/src/screens/Meeting/ChatScreen.tsx

@@ -1,12 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import {
-  Pressable,
-  SafeAreaView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { Pressable, StatusBar, StyleSheet, Text, View } from 'react-native';
 import {
   Channel,
   MessageInput,
@@ -60,6 +53,7 @@ const ChannelHeader = () => {
 };
 
 export const ChatScreen = ({ route }: ChatScreenProps) => {
+  const styles = useStyles();
   const [channel, setChannel] = useState<ChannelType>();
   const { client } = useChatContext();
   const {
@@ -77,14 +71,14 @@ export const ChatScreen = ({ route }: ChatScreenProps) => {
   }
 
   return (
-    <SafeAreaView>
+    <View style={styles.container}>
       <StatusBar barStyle="default" />
       <Channel channel={channel} keyboardVerticalOffset={120}>
         <ChannelHeader />
         <MessageList />
         <MessageInput />
       </Channel>
-    </SafeAreaView>
+    </View>
   );
 };
 
@@ -93,6 +87,10 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
+        container: {
+          flex: 1,
+          backgroundColor: theme.colors.sheetSecondary,
+        },
         header: {
           padding: 10,
           flexDirection: 'row',