Skip to content

Commit db27e5a

Browse files
BogiKaysatya164
authored andcommitted
fix(animated-fab): correct Android shadow/content stacking (#4903)
1 parent fb06c27 commit db27e5a

1 file changed

Lines changed: 12 additions & 0 deletions

File tree

src/components/FAB/AnimatedFAB.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,8 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
118118
};
119119

120120
const SIZE = 56;
121+
const SHADOW_LAYER_Z_INDEX = 1;
122+
const CONTENT_LAYER_Z_INDEX = 2;
121123

122124
/**
123125
* An animated, extending horizontally floating action button represents the primary action in an application.
@@ -553,9 +555,19 @@ const styles = StyleSheet.create({
553555
innerWrapper: {
554556
flexDirection: 'row',
555557
overflow: 'hidden',
558+
...Platform.select({
559+
android: {
560+
zIndex: CONTENT_LAYER_Z_INDEX,
561+
},
562+
}),
556563
},
557564
shadowWrapper: {
558565
elevation: 0,
566+
...Platform.select({
567+
android: {
568+
zIndex: SHADOW_LAYER_Z_INDEX,
569+
},
570+
}),
559571
},
560572
shadow: {
561573
elevation: 3,

0 commit comments

Comments
 (0)