Use safe area in example

Author: davidliu

example/ios/Podfile.lock

@@ -8,7 +8,7 @@ PODS:
   - hermes-engine (0.82.0):
     - hermes-engine/Pre-built (= 0.82.0)
   - hermes-engine/Pre-built (0.82.0)
-  - livekit-react-native (2.10.1):
+  - livekit-react-native (2.11.0-beta.1):
     - boost
     - DoubleConversion
     - fast_float
@@ -1814,7 +1814,7 @@ PODS:
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
     - SocketRocket
-  - react-native-safe-area-context (5.6.1):
+  - react-native-safe-area-context (5.7.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -1832,8 +1832,8 @@ PODS:
     - React-graphics
     - React-ImageManager
     - React-jsi
-    - react-native-safe-area-context/common (= 5.6.1)
-    - react-native-safe-area-context/fabric (= 5.6.1)
+    - react-native-safe-area-context/common (= 5.7.0)
+    - react-native-safe-area-context/fabric (= 5.7.0)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-renderercss
@@ -1844,7 +1844,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-safe-area-context/common (5.6.1):
+  - react-native-safe-area-context/common (5.7.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -1872,7 +1872,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-safe-area-context/fabric (5.6.1):
+  - react-native-safe-area-context/fabric (5.7.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2790,9 +2790,9 @@ SPEC CHECKSUMS:
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 8642d8f14a548ab718ec112e9bebdfdd154138b5
-  livekit-react-native: d3bef98b710d5f0fb6ad1c7734c954ddde910150
+  livekit-react-native: a051e6aa4c21e1b2429d136a3d544ae0ccfa08a6
   livekit-react-native-webrtc: 6fc2ff1df5af82d1adb25828ba14a90380a2073e
-  RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
+  RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f
   RCTDeprecation: f17e2ebc07876ca9ab8eb6e4b0a4e4647497ae3a
   RCTRequired: e2c574c1b45231f7efb0834936bd609d75072b63
   RCTTypeSafety: c693294e3993056955c3010eb1ebc574f1fcded6
@@ -2825,7 +2825,7 @@ SPEC CHECKSUMS:
   React-logger: 500f2fa5697d224e63c33d913c8a4765319e19bf
   React-Mapbuffer: 06d59c448da7e34eb05b3fb2189e12f6a30fec57
   React-microtasksnativemodule: d1ee999dc9052e23f6488b730fa2d383a4ea40e5
-  react-native-safe-area-context: c6e2edd1c1da07bdce287fa9d9e60c5f7b514616
+  react-native-safe-area-context: befb5404eb8a16fdc07fa2bebab3568ecabcbb8a
   React-NativeModulesApple: 46690a0fe94ec28fc6fc686ec797b911d251ded0
   React-oscompat: 95875e81f5d4b3c7b2c888d5bd2c9d83450d8bdb
   React-perflogger: 2e229bf33e42c094fd64516d89ec1187a2b79b5b

example/src/RoomPage.tsx

@@ -6,7 +6,6 @@ import type {
 
 import {
   StyleSheet,
-  View,
   FlatList,
   type ListRenderItem,
   findNodeHandle,
@@ -28,6 +27,11 @@ import {
   useRNE2EEManager,
 } from '@livekit/react-native';
 import { Platform } from 'react-native';
+import {
+  SafeAreaProvider,
+  SafeAreaView,
+  initialWindowMetrics,
+} from 'react-native-safe-area-context';
 // @ts-ignore
 import {
   mediaDevices,
@@ -70,19 +74,21 @@ export const RoomPage = ({
   let e2eeOptions = e2ee ? { e2eeManager } : undefined;
 
   return (
-    <LiveKitRoom
-      serverUrl={url}
-      token={token}
-      connect={true}
-      options={{
-        adaptiveStream: { pixelDensity: 'screen' },
-        e2ee: e2eeOptions,
-      }}
-      audio={false}
-      video={true}
-    >
-      <RoomView navigation={navigation} e2ee={e2ee} />
-    </LiveKitRoom>
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <LiveKitRoom
+        serverUrl={url}
+        token={token}
+        connect={true}
+        options={{
+          adaptiveStream: { pixelDensity: 'screen' },
+          e2ee: e2eeOptions,
+        }}
+        audio={false}
+        video={true}
+      >
+        <RoomView navigation={navigation} e2ee={e2ee} />
+      </LiveKitRoom>
+    </SafeAreaProvider>
   );
 };
 
@@ -176,7 +182,7 @@ const RoomView = ({ navigation, e2ee }: RoomViewProps) => {
   };
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom', 'left', 'right']}>
       {stageView}
       {otherParticipantsView}
       <RoomControls
@@ -241,7 +247,7 @@ const RoomView = ({ navigation, e2ee }: RoomViewProps) => {
         }}
       />
       {screenCapturePickerView}
-    </View>
+    </SafeAreaView>
   );
 };