Fix floating container using a hook inside the styles (#6146)

app/products/calls/components/floating_call_container.tsx

@@ -1,13 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useState, useEffect} from 'react';
-import {View, Platform} from 'react-native';
+import React, {useState, useEffect, useMemo} from 'react';
+import {View, Platform, StyleSheet} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {ViewTypes} from '@constants';
 import EventEmitter from '@mm-redux/utils/event_emitter';
-import {makeStyleSheetFromTheme} from '@utils/theme';
 
 const {
     IOS_TOP_PORTRAIT,
@@ -15,46 +14,48 @@ const {
     ANDROID_TOP_PORTRAIT,
 } = ViewTypes;
 
-const getStyleSheet = makeStyleSheetFromTheme(() => {
-    const insets = useSafeAreaInsets();
-    let topBarHeight = ANDROID_TOP_PORTRAIT;
-    if (Platform.OS === 'ios') {
-        topBarHeight = (IOS_TOP_PORTRAIT - STATUS_BAR_HEIGHT) + insets.top;
-    }
+let topBarHeight = ANDROID_TOP_PORTRAIT;
+if (Platform.OS === 'ios') {
+    topBarHeight = (IOS_TOP_PORTRAIT - STATUS_BAR_HEIGHT);
+}
 
-    return {
-        wrapper: {
-            position: 'absolute',
-            top: topBarHeight,
-            width: '100%',
-            ...Platform.select({
-                android: {
-                    elevation: 9,
-                },
-                ios: {
-                    zIndex: 9,
-                },
-            }),
-        },
-        withIndicatorBar: {
-            top: topBarHeight + ViewTypes.INDICATOR_BAR_HEIGHT,
-        },
-    };
+const style = StyleSheet.create({
+    wrapper: {
+        position: 'absolute',
+        width: '100%',
+        ...Platform.select({
+            android: {
+                elevation: 9,
+            },
+            ios: {
+                zIndex: 9,
+            },
+        }),
+    },
 });
 
 type Props = {
-    children: React.ReactNodeArray;
+    children: React.ReactChildren;
 }
 
 const FloatingCallContainer = (props: Props) => {
-    const style = getStyleSheet(props);
+    const insets = useSafeAreaInsets();
     const [indicatorBarVisible, setIndicatorBarVisible] = useState(false);
     useEffect(() => {
         EventEmitter.on(ViewTypes.INDICATOR_BAR_VISIBLE, setIndicatorBarVisible);
         return () => EventEmitter.off(ViewTypes.INDICATOR_BAR_VISIBLE, setIndicatorBarVisible);
     }, []);
+
+    const wrapperTop = useMemo(() => ({
+        top: topBarHeight + insets.top,
+    }), [insets]);
+
+    const withIndicatorBar = useMemo(() => ({
+        top: wrapperTop.top + ViewTypes.INDICATOR_BAR_HEIGHT,
+    }), [wrapperTop]);
+
     return (
-        <View style={[style.wrapper, indicatorBarVisible ? style.withIndicatorBar : undefined]}>
+        <View style={[style.wrapper, wrapperTop, indicatorBarVisible ? withIndicatorBar : undefined]}>
             {props.children}
         </View>
     );