feat(RN-filmtrip) stop reordering small meetings

react/features/base/responsive-ui/components/DimensionsDetector.native.js

@@ -1,8 +1,8 @@
 // @flow
 
-import React, { PureComponent } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
-
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type Props = {
 
@@ -11,6 +11,11 @@ type Props = {
      */
     onDimensionsChanged: Function,
 
+    /**
+     * The safe are insets handler.
+     */
+    onSafeAreaInsetsChanged: Function,
+
     /**
      * Any nested components.
      */
@@ -20,21 +25,23 @@ type Props = {
 /**
  * A {@link View} which captures the 'onLayout' event and calls a prop with the
  * component size.
+ *
+ * @param {Props} props - The read-only properties with which the new
+ * instance is to be initialized.
+ * @returns {Component} - Renders the root view and it's children.
  */
-export default class DimensionsDetector extends PureComponent<Props> {
-    /**
-     * Initializes a new DimensionsDetector instance.
-     *
-     * @param {Object} props - The read-only properties with which the new
-     * instance is to be initialized.
-     */
-    constructor(props: Object) {
-        super(props);
+export default function DimensionsDetector(props: Props) {
+    const { top = 0, right = 0, bottom = 0, left = 0 } = useSafeAreaInsets();
+    const { children, onDimensionsChanged, onSafeAreaInsetsChanged } = props;
 
-        this._onLayout = this._onLayout.bind(this);
-    }
-
-    _onLayout: (Object) => void;
+    useEffect(() => {
+        onSafeAreaInsetsChanged && onSafeAreaInsetsChanged({
+            top,
+            right,
+            bottom,
+            left
+        });
+    }, [ onSafeAreaInsetsChanged, top, right, bottom, left ]);
 
     /**
      * Handles the "on layout" View's event and calls the onDimensionsChanged
@@ -45,24 +52,15 @@ export default class DimensionsDetector extends PureComponent<Props> {
      * @private
      * @returns {void}
      */
-    _onLayout({ nativeEvent: { layout: { height, width } } }) {
-        const { onDimensionsChanged } = this.props;
-
+    const onLayout = useCallback(({ nativeEvent: { layout: { height, width } } }) => {
         onDimensionsChanged && onDimensionsChanged(width, height);
-    }
+    }, [ onDimensionsChanged ]);
 
-    /**
-     * Renders the root view and it's children.
-     *
-     * @returns {Component}
-     */
-    render() {
-        return (
-            <View
-                onLayout = { this._onLayout }
-                style = { StyleSheet.absoluteFillObject } >
-                { this.props.children }
-            </View>
-        );
-    }
+    return (
+        <View
+            onLayout = { onLayout }
+            style = { StyleSheet.absoluteFillObject } >
+            { children }
+        </View>
+    );
 }