Page MenuHomePhabricator

[native] introduce FullScreenViewModal
ClosedPublic

Authored by ginsu on Oct 4 2023, 11:21 AM.
Tags
None
Referenced Files
F1859062: D9360.id31656.diff
Sun, May 26, 12:26 AM
F1859061: D9360.id31665.diff
Sun, May 26, 12:26 AM
F1859060: D9360.id31640.diff
Sun, May 26, 12:26 AM
F1859059: D9360.id.diff
Sun, May 26, 12:26 AM
Unknown Object (File)
Sun, May 5, 8:05 AM
Unknown Object (File)
Sun, May 5, 4:26 AM
Unknown Object (File)
Thu, May 2, 9:10 PM
Unknown Object (File)
Tue, Apr 30, 7:40 PM
Subscribers

Details

Summary

To view a full screen avatar for user profiles we are going to want to reuse parts of the ImageModal since it has all the same zooming/panning/gesture functionality we need. However, right now there are parts of ImageModal that are specific to viewing a multimedia message. We need to factor those parts out, so I created FullScreenViewModal which will be a generic component that can be used in both cases for image multimedia messages and user avatars.

Outlined below are the steps I will take in this stack (each point here will be it's own diff):

  1. Introduce FullScreenViewModal file and move everything from the ImageModal file into here, and change what is absolutely necessary (the imports)
  2. Correct the naming inside of FullScreenViewModal
  3. Lift out rendering of <Multimedia /> in favor for a generic content child
  4. Lift save content / copy content functionality out of FullScreenViewModal and make those optional props
  5. Lift the imageDimensions function out of FullScreenViewModal and introduce a required generic contentDimesions prop
Test Plan

Confirmed that there were no regressions with the viewing an image multimedia message experience

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu added reviewers: atul, inka.
ginsu requested review of this revision.Oct 4 2023, 11:39 AM
native/components/full-screen-view-modal.react.js
147–153 ↗(On Diff #31640)

We want to keep these nav params in ImageModal since`ImageModal` is still the component we navigate to

native/media/image-modal.react.js
3 ↗(On Diff #31640)

Created this gist so that is a bit more clear to see what's happening here.

The only changes I am doing here are importing FullScreenViewModal and directly rendering it in ImageModal while passing the navigation and route param down.

native/media/image-modal.react.js
3 ↗(On Diff #31640)

while passing the navigation and route param down.

*This should be props not param

atul added a reviewer: ashoat.

We need to factor those parts out, so I created FullScreenViewModal which will be a generic component that can be used in both cases for image multimedia messages and user avatars.

Seems like a well thought out approach


Adding @ashoat as blocking since I don't have a ton of experience w/ Reanimated and had some issues w/ refactoring Reanimated code in the past (specifically https://phab.comm.dev/D9206#271158)

Adding @ashoat as blocking since I don't have a ton of experience w/ Reanimated and had some issues w/ refactoring Reanimated code in the past (specifically https://phab.comm.dev/D9206#271158)

TouchableWithoutFeedback is actually from React Native, not Reanimated. I don't think there's any need for ImageModal to forward any extra props to FullscreenImageModal. React Navigation renders screens, and it doesn't do anything weird like TouchableWithoutFeedback does.

This revision is now accepted and ready to land.Oct 4 2023, 6:13 PM
This revision was automatically updated to reflect the committed changes.