Paths

Table of Contentst

-
native/components/
-
components/
-
full-screen-view-modal.react.js

Differential D14312

[native] Migrate animated styles to Reanimated v2 API in FullScreenViewModal
ClosedPublic
Actions

Authored by angelika on Feb 6 2025, 5:46 PM.

Tags

None

Referenced Files

	F5255527: D14312.diff
	Sun, Apr 6, 8:30 AM

	Unknown Object (File)
	Sat, Apr 5, 7:46 AM

	Unknown Object (File)
	Sat, Apr 5, 6:38 AM

	Unknown Object (File)
	Fri, Apr 4, 1:24 PM

	Unknown Object (File)
	Fri, Apr 4, 4:50 AM

	Unknown Object (File)
	Thu, Mar 20, 4:57 PM

	Unknown Object (File)
	Wed, Mar 19, 4:55 AM

	Unknown Object (File)
	Wed, Mar 19, 4:53 AM

View All 76 Files

Subscribers

Details

Reviewers

Commits

rCOMM0452eeb23353: [native] Migrate animated styles to Reanimated v2 API in FullScreenViewModal

Summary

https://linear.app/comm/issue/ENG-8150/convert-fullscreenviewmodal-to-reanimated-2-syntax

move styles and calculating styles to useAnimatedStyle
use positionV2 instead of position from overlay context

Also from this diff on the component should work correctly.

Depends on D14311

Test Plan

Verify the image is zoomed in/out, panned correctly.
Verify the buttons have correct opacity.
Verify the backdrop has correct opacity.

Diff Detail

Repository

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

angelika created this revision.Feb 6 2025, 5:46 PM

angelika held this revision as a draft.

Herald added a subscriber: ashoat. · View Herald TranscriptFeb 6 2025, 5:46 PM

angelika added a child revision: D14313: [native] Migrate render function and finish FullScreenViewModal migration to functional component.Feb 6 2025, 5:48 PM

Harbormaster completed remote builds in B33427: Diff 46956.Feb 6 2025, 7:18 PM

angelika added inline comments.Feb 10 2025, 1:10 AM

native/components/full-screen-view-modal.react.js
834–835 ↗	(On Diff #46956)	You can't use `props` object in a worklet, because it will cause a weird crash (`Cannot add new property '__reanimatedHostObjectRef'`). So we destructure it here.

angelika edited the summary of this revision. (Show Details)Feb 10 2025, 1:11 AM

angelika edited the summary of this revision. (Show Details)

Rebase & bugfixes

angelika published this revision for review.Feb 12 2025, 9:11 PM

Harbormaster completed remote builds in B33506: Diff 47090.Feb 12 2025, 11:20 PM

tomek accepted this revision.Feb 17 2025, 4:18 AM

tomek added inline comments.

native/components/full-screen-view-modal.react.js
887	Nit

This revision is now accepted and ready to land.Feb 17 2025, 4:18 AM

ashoat added inline comments.Feb 19 2025, 8:49 PM

native/components/full-screen-view-modal.react.js
895–902	Nit
904–922	Could probably be simplified to avoid the `return` keyboard here too, but it's more subjective

Rebase & bugfixes

angelika marked 2 inline comments as done.Feb 20 2025, 3:19 PM

angelika added inline comments.

native/components/full-screen-view-modal.react.js
904–922	I prefer the version with `return`. It's longer but imho more readable.

Harbormaster failed remote builds in B33575: Diff 47194!Feb 20 2025, 6:06 PM

Rebase

Harbormaster failed remote builds in B33586: Diff 47206!Feb 21 2025, 8:29 PM

Fix rebase

Harbormaster completed remote builds in B33592: Diff 47212.Feb 21 2025, 11:10 PM

Rebase

This revision was landed with ongoing or failed builds.Feb 25 2025, 2:48 AM

Closed by commit rCOMM0452eeb23353: [native] Migrate animated styles to Reanimated v2 API in FullScreenViewModal (authored by angelika). · Explain Why

This revision was automatically updated to reflect the committed changes.

angelika added a commit: rCOMM0452eeb23353: [native] Migrate animated styles to Reanimated v2 API in FullScreenViewModal.

Revision Contents
Changeset List

Path

Size

native/

components/

full-screen-view-modal.react.js

257 lines

Diff 47090

native/components/full-screen-view-modal.react.js

	Show All 26 Lines		function LinkedDevicesListItem(props: Props): React.Node {
	const styles = useStyles(unboundStyles);			const styles = useStyles(unboundStyles);
	const colors = useColors();			const colors = useColors();

	const { navigate } = useNavigation();			const { navigate } = useNavigation();

	const onPress = React.useCallback(() => {			const onPress = React.useCallback(() => {
	navigate<'LinkedDevicesBottomSheet'>({			navigate<'LinkedDevicesBottomSheet'>({
	name: LinkedDevicesBottomSheetRouteName,			name: LinkedDevicesBottomSheetRouteName,
				params: {
				deviceID,
				},
	});			});
	}, [navigate]);			}, [deviceID, navigate]);

	const deviceType = platformDetails?.deviceType;			const deviceType = platformDetails?.deviceType;

	const deviceIcon = React.useMemo(() => {			const deviceIcon = React.useMemo(() => {
	let name;			let name;
	if (			if (
	deviceType === identityDeviceTypes.IOS \|\|			deviceType === identityDeviceTypes.IOS \|\|
	deviceType === identityDeviceTypes.ANDROID			deviceType === identityDeviceTypes.ANDROID
	▲ Show 20 Lines • Show All 69 Lines • Show Last 20 Lines