Page MenuHomePhabricator

[native] Fix NUX Android problem
ClosedPublic

Authored by inka on Oct 11 2024, 2:50 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Nov 15, 7:01 AM
Unknown Object (File)
Fri, Nov 15, 12:04 AM
Unknown Object (File)
Thu, Nov 14, 9:56 PM
Unknown Object (File)
Thu, Nov 14, 9:00 PM
Unknown Object (File)
Thu, Nov 14, 4:02 PM
Unknown Object (File)
Thu, Nov 14, 1:02 PM
Unknown Object (File)
Mon, Nov 11, 6:53 AM
Unknown Object (File)
Mon, Nov 11, 5:59 AM
Subscribers

Details

Summary

issue: ENG-9472
On some Androids, we cannot measure a button that is not visible on the screen. undefineds are returned. So we have to wait of the login screen to be dismissed, before we call measure.
I wanted to pass the measure function itseft through conxtext, but that results in Cannot read property '_nativeTag' of undefined error. Not sure what that means, but I don't think passing the ref is much worse.
measure asynchronously measures the component and then calls the callback. This is by I need states and an effect, instead of a memo.

buttonMeasured flag ensures the tip doesn't jump after the measure is done. measure returns quickly and I don't think this slight delay is a problem.

Test Plan

Tested on Android 11 physical device, and iOS 17.4 simulator. Tesdted by updating NUXHandlerInner to run the effect on every app reaload.
Checked that on both Android and iOS the NUX tips are displayed in the correct position. Checked thare are no odd visual effects, like jumping (thanks to buttonMeasured)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

inka requested review of this revision.Oct 11 2024, 3:11 AM
tomek requested changes to this revision.Oct 11 2024, 4:53 AM
tomek added inline comments.
native/chat/chat-tab-bar.react.js
33–44 ↗(On Diff #45092)

This pattern doesn't make too much sense to me - there shouldn't be any need to save the ref in the context on each layout - doing it once should be enough. Also, we don't need to useRef to handle that - we could use a callback ref https://pl.legacy.reactjs.org/docs/refs-and-the-dom.html#callback-refs and set the value in the context every time it is called.

native/tooltip/nux-tips-overlay.react.js
127–137 ↗(On Diff #45092)

The types should be readonly

139–140 ↗(On Diff #45092)

Why do we need to introduce a new state for this? Can't we make the states where we keep the measurement optional?

150–152 ↗(On Diff #45092)

Is there a reason to keep these separated?

This revision now requires changes to proceed.Oct 11 2024, 4:53 AM

I wanted to pass the measure function itseft through conxtext, but that results in Cannot read property '_nativeTag' of undefined error.

My guess is that we need to bind these methods.

Address review. Going to try biding the methods now

Bind measure

native/tooltip/nux-tips-overlay.react.js
139–140 ↗(On Diff #45092)

I didn't like all the ifs this made me add to the code, but I can do it if you prefer that

tomek added inline comments.
native/chat/chat-tab-bar.react.js
36 ↗(On Diff #45138)

You can even define this outside the component.

native/components/nux-tips-context.react.js
4 ↗(On Diff #45138)

Are you sure this is the correct place to import from?

native/tooltip/nux-tips-overlay.react.js
139–140 ↗(On Diff #45092)

Agree, this isn't ideal. However, I think it is better to have explicit empty objects and nulls before the measurement is concluded than to use the incorrect default values.

This revision is now accepted and ready to land.Oct 14 2024, 3:48 AM

Move callbacks out of components

native/components/nux-tips-context.react.js
4 ↗(On Diff #45138)

This is the only place where this flow type is defined in the react-native repo (I searched it on github). My IDE doesn't recognise any other possibilities either.

This revision was automatically updated to reflect the committed changes.