fix: use theme insets in the SDK screen like components

GetStream · Nov 19, 2024 · 6e551e7 · 6e551e7
1 parent 5ac13d2
commit 6e551e7
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 57 deletions.
diff --git a/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx b/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
 import {
@@ -108,6 +108,7 @@ export const CallContent = ({
     showRemoteParticipantInFloatingView,
     setShowRemoteParticipantInFloatingView,
   ] = useState<boolean>(false);
+  const styles = useStyles();
   const {
     theme: { callContent },
   } = useTheme();
@@ -234,11 +235,25 @@ export const CallContent = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  content: { flex: 1 },
-  view: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          paddingBottom: theme.variants.insets.bottom,
+          paddingLeft: theme.variants.insets.left,
+          paddingRight: theme.variants.insets.right,
+          paddingTop: theme.variants.insets.top,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
+        content: { flex: 1 },
+        view: {
+          ...StyleSheet.absoluteFillObject,
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+      }),
+    [theme]
+  );
+};
diff --git a/packages/react-native-sdk/src/components/Livestream/HostLivestream/HostLivestream.tsx b/packages/react-native-sdk/src/components/Livestream/HostLivestream/HostLivestream.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
 
@@ -73,6 +73,7 @@ export const HostLivestream = ({
   hls,
   disableStopPublishedStreamsOnEndStream,
 }: HostLivestreamProps) => {
+  const styles = useStyles();
   const {
     theme: { colors, hostLivestream },
   } = useTheme();
@@ -159,22 +160,34 @@ export const HostLivestream = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  topViewContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-  controlsViewContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          paddingBottom: theme.variants.insets.bottom,
+          paddingLeft: theme.variants.insets.left,
+          paddingRight: theme.variants.insets.right,
+          paddingTop: theme.variants.insets.top,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
+        topViewContainer: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+        controlsViewContainer: {
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+      }),
+    [theme]
+  );
+};
diff --git a/packages/react-native-sdk/src/components/Livestream/ViewerLivestream/ViewerLivestream.tsx b/packages/react-native-sdk/src/components/Livestream/ViewerLivestream/ViewerLivestream.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { StyleSheet, View } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
@@ -61,6 +61,7 @@ export const ViewerLivestream = ({
   ViewerLeaveStreamButton,
   onLeaveStreamHandler,
 }: ViewerLivestreamProps) => {
+  const styles = useStyles();
   const {
     theme: { viewerLivestream },
   } = useTheme();
@@ -123,8 +124,20 @@ export const ViewerLivestream = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          paddingBottom: theme.variants.insets.bottom,
+          paddingLeft: theme.variants.insets.left,
+          paddingRight: theme.variants.insets.right,
+          paddingTop: theme.variants.insets.top,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
+      }),
+    [theme]
+  );
+};
diff --git a/sample-apps/react-native/dogfood/src/components/ActiveCall.tsx b/sample-apps/react-native/dogfood/src/components/ActiveCall.tsx
@@ -84,27 +84,17 @@ export const ActiveCall = ({
 
   return (
     <View style={styles.container}>
-      <StatusBar
-        barStyle={'light-content'}
-        backgroundColor={colors.sheetPrimary}
+      <CustomTopControls />
+      <CallContent
+        onHangupCallHandler={onHangupCallHandler}
+        CallControls={CustomBottomControls}
+        landscape={currentOrientation === 'landscape'}
+        layout={selectedLayout}
+      />
+      <ParticipantsInfoList
+        isCallParticipantsInfoVisible={isCallParticipantsVisible}
+        setIsCallParticipantsInfoVisible={setIsCallParticipantsVisible}
       />
-      <View style={styles.topUnsafeArea} />
-      <View style={styles.leftUnsafeArea} />
-      <View style={styles.rightUnsafeArea} />
-      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
-        <CustomTopControls />
-        <CallContent
-          onHangupCallHandler={onHangupCallHandler}
-          CallControls={CustomBottomControls}
-          landscape={currentOrientation === 'landscape'}
-          layout={selectedLayout}
-        />
-        <ParticipantsInfoList
-          isCallParticipantsInfoVisible={isCallParticipantsVisible}
-          setIsCallParticipantsInfoVisible={setIsCallParticipantsVisible}
-        />
-      </SafeAreaView>
-      <View style={styles.bottomUnsafeArea} />
     </View>
   );
 };
@@ -114,9 +104,12 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
-        container: { flex: 1 },
+        container: {
+          flex: 1,
+          paddingTop: theme.variants.insets.top,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
         callContent: { flex: 1 },
-        safeArea: { flex: 1, paddingBottom: theme.variants.insets.bottom },
         topUnsafeArea: {
           position: 'absolute',
           top: 0,

diff --git a/sample-apps/react-native/dogfood/src/theme.ts b/sample-apps/react-native/dogfood/src/theme.ts
@@ -47,6 +47,10 @@ export const useCustomTheme = (mode: ThemeMode): DeepPartial<Theme> => {
     },
   };
 
+  const callContent: DeepPartial<Theme['callContent']> = {
+    container: { paddingTop: 0 },
+  };
+
   const lightThemeColors: DeepPartial<Theme['colors']> = {
     buttonPrimary: '#005fff',
     buttonSecondary: '#eff0f1',
@@ -66,6 +70,7 @@ export const useCustomTheme = (mode: ThemeMode): DeepPartial<Theme> => {
 
   const baseTheme: DeepPartial<Theme> = {
     variants,
+    callContent,
   };
 
   if (mode === 'light') {