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

[mdicampli]

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