Add disableTransition prop to Menu, enable transition on Repost button

- Add `disableTransition` prop to Menu.Outer that skips passing
  sourceViewTag when true, disabling the fluid morph transition.
- Apply disableTransition to the profile menu (share, add to list, etc.)
- Enable the fluid transition on the Repost button by passing
  sourceViewTag from a ref on the PostControlButton.

https://claude.ai/code/session_011cNDhEb2cDgg5QbVuzEyH1
This commit is contained in:
Claude
2026-02-28 19:50:31 +00:00
committed by Samuel Newman
parent c21dd8cd8f
commit eafce08995
3 changed files with 14 additions and 5 deletions
+5 -1
View File
@@ -98,13 +98,17 @@ export function Trigger({
export function Outer({ export function Outer({
children, children,
showCancel, showCancel,
disableTransition,
}: React.PropsWithChildren<{ }: React.PropsWithChildren<{
showCancel?: boolean showCancel?: boolean
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
disableTransition?: boolean
}>) { }>) {
const context = useMenuContext() const context = useMenuContext()
const {_} = useLingui() const {_} = useLingui()
const sourceViewTag = findNodeHandle(context.triggerRef.current) ?? undefined const sourceViewTag = disableTransition
? undefined
: (findNodeHandle(context.triggerRef.current) ?? undefined)
return ( return (
<Dialog.Outer <Dialog.Outer
+8 -3
View File
@@ -1,5 +1,5 @@
import {memo, useCallback} from 'react' import {memo, useCallback, useRef} from 'react'
import {View} from 'react-native' import {findNodeHandle, View} from 'react-native'
import {msg, plural} from '@lingui/core/macro' import {msg, plural} from '@lingui/core/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro' import {Trans} from '@lingui/react/macro'
@@ -41,6 +41,7 @@ let RepostButton = ({
const requireAuth = useRequireAuth() const requireAuth = useRequireAuth()
const dialogControl = Dialog.useDialogControl() const dialogControl = Dialog.useDialogControl()
const formatPostStatCount = useFormatPostStatCount() const formatPostStatCount = useFormatPostStatCount()
const btnRef = useRef<View>(null)
const onPress = () => requireAuth(() => dialogControl.open()) const onPress = () => requireAuth(() => dialogControl.open())
@@ -56,6 +57,7 @@ let RepostButton = ({
return ( return (
<> <>
<PostControlButton <PostControlButton
ref={btnRef}
testID="repostBtn" testID="repostBtn"
active={isReposted} active={isReposted}
activeColor={t.palette.positive_500} activeColor={t.palette.positive_500}
@@ -94,7 +96,10 @@ let RepostButton = ({
</PostControlButton> </PostControlButton>
<Dialog.Outer <Dialog.Outer
control={dialogControl} control={dialogControl}
nativeOptions={{preventExpansion: true}}> nativeOptions={{
preventExpansion: true,
sourceViewTag: findNodeHandle(btnRef.current) ?? undefined,
}}>
<Dialog.Handle /> <Dialog.Handle />
<RepostButtonDialogInner <RepostButtonDialogInner
isReposted={isReposted} isReposted={isReposted}
+1 -1
View File
@@ -262,7 +262,7 @@ let ProfileMenu = ({
}} }}
</Menu.Trigger> </Menu.Trigger>
<Menu.Outer style={{minWidth: 170}}> <Menu.Outer style={{minWidth: 170}} disableTransition>
<Menu.Group> <Menu.Group>
<Menu.Item <Menu.Item
testID="profileHeaderDropdownShareBtn" testID="profileHeaderDropdownShareBtn"