Modal flickering for some decimal widths

amckean-tbox commented 1 year ago

🐛 Bug Report

When sizing a modal based on screenSize like this

const width = screenSize * 0.56

Note: this is also an issue for height

If the resulting number is a decimal number the modal can flicker from the right and after a minute or two leads to an object property storage error in metro, or app crash in production.

To Reproduce

Steps to reproduce the behavior: Set modalWidth to 225.28 to show error

Expected behavior

Expect modal not to flicker, perhaps to handle this case internally? Wrapping the offending number or calc in Math.round() fixes this.

Link to runnable example or repository (highly encouraged)

https://snack.expo.dev/v95Tv2-QT

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.1.1
@ui-kitten/components	5.1.2

Environment information

  System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
    Watchman: 2023.07.03.00 - /opt/homebrew/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9477386
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  npmPackages:
    react: 18.1.0 => 18.1.0
    react-native: 0.70.6 => 0.70.6

psegalen commented 11 months ago

Hi! I'll soon try to submit a PR to fix this but in the meantime I've patched (with https://github.com/ds300/patch-package) the package in my app, if anyone needs it, here is the patch that works for me:

index 02180f9..c9b33f7 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
@@ -42,7 +42,7 @@ const MeasureElement = (props) => {
         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) => {
@@ -51,7 +51,7 @@ const MeasureElement = (props) => {
         }
         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());
+            const frame = bindToWindow(new type_1.Frame(x, originY, Math.round(w), Math.round(h)), type_1.Frame.window());
             props.onMeasure(frame);
         }
     };

rklomp commented 8 months ago

I am seeing vibration on my Modal on some widths. It looks like it vibrating 1 pixel horizontally. Like also described in https://github.com/akveo/react-native-ui-kitten/issues/1681

Could that also be related to this rounding issue? I am running 5.3.1.

Edit: I tested your fork, does not fix my vibrating modal issue.

akveo / react-native-ui-kitten