Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Defaultprops warning when using OverflowMenu #1813

Open
Tubio opened this issue May 9, 2024 · 6 comments · May be fixed by #1818
Open

Defaultprops warning when using OverflowMenu #1813

Tubio opened this issue May 9, 2024 · 6 comments · May be fixed by #1818

Comments

@Tubio
Copy link

Tubio commented May 9, 2024

💬 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
Copy link

+1

@codingspook
Copy link

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
Copy link

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
  1. 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
  1. Reinstall dependencies:
npm i

@vintriguna
Copy link

Select component has this same problem

@vinothsubramanian
Copy link

vinothsubramanian commented Aug 23, 2024

patch-package

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

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

@agenttux
Copy link

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

You're an absolute savior, thanks! Made my app somewhat usable again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants