Page MenuHomePhabricator

[native] Introduce positionsV2 values in OverlayNavigator
ClosedPublic

Authored by angelika on Wed, Dec 11, 7:19 AM.
Tags
None
Referenced Files
F3516446: D14102.id46322.diff
Sun, Dec 22, 2:34 PM
F3516210: D14102.id46402.diff
Sun, Dec 22, 12:50 PM
Unknown Object (File)
Sat, Dec 21, 12:55 AM
Unknown Object (File)
Fri, Dec 20, 7:44 PM
Unknown Object (File)
Fri, Dec 20, 6:52 PM
Unknown Object (File)
Fri, Dec 20, 1:49 PM
Unknown Object (File)
Fri, Dec 20, 9:34 AM
Unknown Object (File)
Fri, Dec 20, 9:27 AM
Subscribers
None

Details

Summary

This diff introduces a new positionV2 variable that is a SharedValue from Reanimated V2 API. The old position variable stays the same and is marked as depracated. Later on when we replace all usages of position with positionV2 we can rename it back to position. Made a linear issue here: https://linear.app/comm/issue/ENG-10006/rename-postitionv2-variables-in-overlaynavigator-to-position

Why have I used makeMutable: normally I'd have used useSharedValue but it's a hook. Rules of hooks say that we can't change or add hook calls during a lifetime of a component. But we want a shared value for every screen and screens are added dynamically. So I see two solutions here:

  • assume a max amount of screens x and make x shared values at the beginning then assign them when needed
  • use makeMutable

The first solution is a bit cumbersome so I went with the second solution. makeMutable is a bit of an internal function but it's documented in reanimated v3: https://docs.swmansion.com/react-native-reanimated/docs/advanced/makeMutable and it's available also in reanimated v2. And all useSharedValue does is it uses makeMutable and cleans up after it's not needed. I added clean up code according to reanimated docs.

Depends on D14099

Test Plan

Flow and run the app

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

angelika held this revision as a draft.

I didn't know about makeMutable! This is a much easier and cleaner solution than what I thought you'd have to do: introduce an OverlayNavigatorScreen component that wraps render() on line 577, and handles initializing the SharedValue.

Rules of hooks say that we can't change or add hook calls during a lifetime of a component.

In general, when facing this limitation, rather than considering solutions where we have a max number of something, I'd suggest we should first consider introducing a new component, and render one for each item. I believe this is the idomatic approach in general when working with React hooks.

(That said, makeMutable seems ideal here.)

This revision is now accepted and ready to land.Wed, Dec 11, 5:36 PM

Rebase and address feedback