Android crash: "[160,"<<NaN>>"] is not usable as a native method argument"

[eirikluka]

After updating to 2.5.5 my app crashes a lot on Android. It seems to be related to unmounting/rerendring/layout and after some digging I found it to be related to #721.

The following line in SegmentControl.js is called in an useEffect when values change, but in some cases width is undefined.

ref.current.measure((_x, _y, width) => updateSegmentWidth(width));

[hengkx]

2.5.6 same errors

[sajorahasan]

I am also experiencing the same error on android with version 2.5.7
Is there any workaround for this issue?

[fahey252]

@sajorahasan the issue only would happen to me when developing locally. As a work around, I would conditionally render the control when not on Android and using a debug build to prevent the crash from happening in other scenarios like release builds or developing locally for iOS.

[see2ever]

tmp fix: patch-package

ref.current.measure((_x, _y, width) => {
  if (width) {
    updateSegmentWidth(width)
  }
});

[ChenBri]

Same issue at 2.5.7.
Downgrading back to 2.5.4 works.
This should be written in the 2.5.6 notes or something to warn users. this is a breaking change.

[steinalex]

We've also been seeing this issue as part of an Expo 53 upgrade, which bumped this library to 2.5.7.

The width is undefined after unmounting the component that used SegmentedControl, but only occurs on Android (possibly some strange animation bug?).

You'll need to either patch-package the useEffect in SegmentedControls.js or downgrade to 2.5.4

Here's what you can change, in case you opt for the patch approach:

React.useEffect(() => {
  if (ref.current) {
    ref.current.measure((_x, _y, width) => {
      if (width) {
        // Adding a guard here as "width" can be undefined
        updateSegmentWidth(width);
      }
    });
  }
}, [values, updateSegmentWidth]);

For the purposes of anyone else trying to debug this, these are the sort of (unobvious) logs I was seeing locally:

[[16,16,16,16,16,37,29],[20,21,9,20,17,5,0],[[],[1],[],[],
["{\"type\":\"log\",\"level\":\"error\",\"mode\":\"BRIDGE\",\"data\":
[\"Invariant Violation: [4,\\\"<<NaN>>\\\"] is not usable as a native method argument, 
js engine: hermes\"]}",1],[216,1000,1757685467254,false]],1512], js engine: hermes