Skip to content

Commit 8b7fdf2

Browse files
committed
fix(mobile): composer buttons stay visible with animations removed
With Android's Remove animations on, the new-thread composer toolbar mounted through its flip entering animation at opacity 0 and stayed invisible but tappable. Skip the flip animations under reduced motion. Fixes #16080 Fixes #16239
1 parent 6002c5c commit 8b7fdf2

1 file changed

Lines changed: 22 additions & 3 deletions

File tree

‎apps/mobile/src/features/voice-input/ComposerDictationControl.tsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Animated, {
1313
LinearTransition,
1414
ReduceMotion,
1515
useAnimatedStyle,
16+
useReducedMotion,
1617
useSharedValue,
1718
withTiming,
1819
type EntryExitAnimationFunction,
@@ -132,20 +133,38 @@ export function ComposerDictationDraftContent(props: {
132133
);
133134
}
134135

135-
/** Flips the entire row while keeping the outgoing controls intact until it leaves. */
136+
/**
137+
* Flips the entire row while keeping the outgoing controls intact until it leaves.
138+
* With reduced motion the faces swap without an entering animation: Android can
139+
* drop its single collapsed frame on mount, leaving the row laid out and tappable
140+
* at the initial opacity of 0.
141+
*/
136142
export function ComposerDictationToolbar(props: {
137143
readonly children: ReactNode;
138144
readonly showsDictation: boolean;
139145
readonly visible?: boolean;
140146
}) {
147+
const reducedMotion = useReducedMotion();
141148
return (
142149
<View className="relative h-[44px] overflow-hidden">
143150
{props.visible !== false ? (
144151
<Animated.View
145152
key={props.showsDictation ? "dictation" : "draft"}
146153
className="absolute inset-0"
147-
entering={props.showsDictation ? DICTATION_TOOLBAR_ENTERING : DRAFT_TOOLBAR_ENTERING}
148-
exiting={props.showsDictation ? DICTATION_TOOLBAR_EXITING : DRAFT_TOOLBAR_EXITING}
154+
entering={
155+
reducedMotion
156+
? undefined
157+
: props.showsDictation
158+
? DICTATION_TOOLBAR_ENTERING
159+
: DRAFT_TOOLBAR_ENTERING
160+
}
161+
exiting={
162+
reducedMotion
163+
? undefined
164+
: props.showsDictation
165+
? DICTATION_TOOLBAR_EXITING
166+
: DRAFT_TOOLBAR_EXITING
167+
}
149168
style={{ backfaceVisibility: "hidden" }}
150169
>
151170
{props.children}

0 commit comments

Comments
 (0)