Defaultprops warning when using OverflowMenu

[Tubio]

💬 Question

I have an OverflowMenu that is throwing the following warning: Warning: MeasureElement: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

OverflowMenu Implementation:

<View style={{ flex: 1, flexDirection: 'row' }}>
  <Text style={{ flex: 2, textAlign: 'left', color: 'black' }}>{item.quantity}</Text>
  <OverflowMenu
    anchor={() => renderToggleButton(index)}
    visible={visibleIndex === index}
    onSelect={() => setVisibleIndex(null)}
    onBackdropPress={() => setVisibleIndex(null)}
  >
    <MenuItem title='Full' />
    <MenuItem title='Low' />
    <MenuItem title='Consumed' />
  </OverflowMenu>
</View>

renderToggleButton:

const renderToggleButton = useCallback((index) => (
    <TouchableOpacity onPress={() => setVisibleIndex(index)}>
      <View style={{ flex: 1 }}>
        <Icon name="arrow-down" style={{ width: 20, height: 20 }} />
      </View>
    </TouchableOpacity>
  ), [])

UI Kitten and Eva version

Package	Version
@eva-design/eva	5.3.1
@ui-kitten/components	5.3.1

[agottfredsson]

+1

[codingspook]

This also occurs on Modal implementation:

Warning: MeasureElement: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

[vilnytskyi]

Here are the steps to fix the issue until patch is released (also fixes #1782):

1. Install patch-package as dev dependency

npm install -D patch-package

2. Create patches/@ui-kitten+components+5.3.1.patch file in your project's root directory with the following content:

diff --git a/node_modules/@ui-kitten/components/devsupport/components/measure/measure.component.js b/node_modules/@ui-kitten/components/devsupport/components/measure/measure.component.js
index 02180f9..c952313 100644
--- a/node_modules/@ui-kitten/components/devsupport/components/measure/measure.component.js
+++ b/node_modules/@ui-kitten/components/devsupport/components/measure/measure.component.js
@@ -36,13 +36,18 @@ const type_1 = require("./type");
  * but `force` property may be used to measure any time it's needed.
  * DON'T USE THIS FLAG IF THE COMPONENT RENDERS FIRST TIME OR YOU KNOW `onLayout` WILL BE CALLED.
  */
-const MeasureElement = (props) => {
+const MeasureElement = ({
+    force = false,
+    shouldUseTopInsets = false,
+    onMeasure,
+    children
+  }) => {
     const ref = react_1.default.useRef();
     const bindToWindow = (frame, window) => {
         if (frame.origin.x < window.size.width) {
             return frame;
         }
-        const boundFrame = new type_1.Frame(frame.origin.x - window.size.width, frame.origin.y, frame.size.width, frame.size.height);
+        const boundFrame = new type_1.Frame(frame.origin.x - window.size.width, frame.origin.y, Math.round(frame.size.width), Math.round(frame.size.height));
         return bindToWindow(boundFrame, window);
     };
     const onUIManagerMeasure = (x, y, w, h) => {
@@ -50,22 +55,19 @@ const MeasureElement = (props) => {
             measureSelf();
         }
         else {
-            const originY = props.shouldUseTopInsets ? y + react_native_1.StatusBar.currentHeight || 0 : y;
-            const frame = bindToWindow(new type_1.Frame(x, originY, w, h), type_1.Frame.window());
-            props.onMeasure(frame);
+            const originY = shouldUseTopInsets ? y + react_native_1.StatusBar.currentHeight || 0 : y;
+            const frame = bindToWindow(new type_1.Frame(x, originY, Math.round(w), Math.round(h)), type_1.Frame.window());
+            onMeasure(frame);
         }
     };
     const measureSelf = () => {
         const node = (0, react_native_1.findNodeHandle)(ref.current);
-        react_native_1.UIManager.measureInWindow(node, onUIManagerMeasure);
+        if (node) react_native_1.UIManager.measureInWindow(node, onUIManagerMeasure);
     };
-    if (props.force) {
+    if (force) {
         measureSelf();
     }
-    return react_1.default.cloneElement(props.children, { ref, onLayout: measureSelf });
+    return react_1.default.cloneElement(children, { ref, onLayout: measureSelf });
 };
 exports.MeasureElement = MeasureElement;
-exports.MeasureElement.defaultProps = {
-    shouldUseTopInsets: false,
-};
 //# sourceMappingURL=measure.component.js.map
\ No newline at end of file

3. Reinstall dependencies:

npm i

[vintriguna]

Select component has this same problem

[vinothsubramanian]

patch-package

If you are new to patch-package, add the below line to package.json to make it work

 "scripts": {
+  "postinstall": "patch-package"
 }