diff --git a/src/components/moderation/ContentHider.tsx b/src/components/moderation/ContentHider.tsx index 6ba98ff4d7..67f6205b14 100644 --- a/src/components/moderation/ContentHider.tsx +++ b/src/components/moderation/ContentHider.tsx @@ -1,5 +1,10 @@ -import React from 'react' -import {type StyleProp, View, type ViewStyle} from 'react-native' +import {useMemo, useState} from 'react' +import { + LayoutAnimation, + type StyleProp, + View, + type ViewStyle, +} from 'react-native' import {type ModerationUI} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -64,16 +69,17 @@ function ContentHiderActive({ style, childContainerStyle, children, -}: React.PropsWithChildren<{ +}: { testID?: string modui: ModerationUI style?: StyleProp childContainerStyle?: StyleProp -}>) { + children?: React.ReactNode +}) { const t = useTheme() const {_} = useLingui() const {gtMobile} = useBreakpoints() - const [override, setOverride] = React.useState(false) + const [override, setOverride] = useState(false) const control = useModerationDetailsDialogControl() const {labelDefs} = useLabelDefinitions() const globalLabelStrings = useGlobalLabelStrings() @@ -81,7 +87,7 @@ function ContentHiderActive({ const blur = modui?.blurs[0] const desc = useModerationCauseDescription(blur) - const labelName = React.useMemo(() => { + const labelName = useMemo(() => { if (!modui?.blurs || !blur) { return undefined } @@ -150,6 +156,7 @@ function ContentHiderActive({ e.preventDefault() e.stopPropagation() if (!modui.noOverride) { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) setOverride(v => !v) } else { control.open()