Animated FAB button has thick rectangular border inside it

[Prateik-Lohani-07]

Current behaviour

I am using an Animated FAB button and for some reason it has this dark rectangular border inside it.

Expected behaviour

I expected the Animated FAB button to just have the primary color on it, no shadow inside the button.

How to reproduce?

1. Use this PaperTheme object:

{
		"colors": {
			"primary": "rgb(169, 212, 115)",
			"onPrimary": "rgb(31, 55, 0)",
			"primaryContainer": "rgb(48, 79, 0)",
			"onPrimaryContainer": "rgb(196, 241, 140)",
			"secondary": "rgb(192, 203, 172)",
			"onSecondary": "rgb(42, 51, 30)",
			"secondaryContainer": "rgb(64, 74, 51)",
			"onSecondaryContainer": "rgb(220, 231, 199)",
			"tertiary": "rgb(160, 208, 203)",
			"onTertiary": "rgb(0, 55, 52)",
			"tertiaryContainer": "rgb(31, 78, 75)",
			"onTertiaryContainer": "rgb(188, 236, 231)",
			"error": "rgb(255, 180, 171)",
			"onError": "rgb(105, 0, 5)",
			"errorContainer": "rgb(147, 0, 10)",
			"onErrorContainer": "rgb(255, 180, 171)",
			"background": "rgb(27, 28, 24)",
			"onBackground": "rgb(227, 227, 219)",
			"surface": "rgb(27, 28, 24)",
			"onSurface": "rgb(227, 227, 219)",
			"surfaceVariant": "rgb(68, 72, 61)",
			"onSurfaceVariant": "rgb(197, 200, 186)",
			"outline": "rgb(143, 146, 133)",
			"outlineVariant": "rgb(68, 72, 61)",
			"shadow": "rgb(0, 0, 0)",
			"scrim": "rgb(0, 0, 0)",
			"inverseSurface": "rgb(227, 227, 219)",
			"inverseOnSurface": "rgb(48, 49, 44)",
			"inversePrimary": "rgb(68, 104, 19)",
			"elevation": {
				"level0": "transparent",
				"level1": "rgb(34, 37, 29)",
				"level2": "rgb(38, 43, 31)",
				"level3": "rgb(43, 48, 34)",
				"level4": "rgb(44, 50, 35)",
				"level5": "rgb(47, 54, 37)"
			},
			"surfaceDisabled": "rgba(227, 227, 219, 0.12)",
			"onSurfaceDisabled": "rgba(227, 227, 219, 0.38)",
			"backdrop": "rgba(46, 50, 40, 0.4)"
		}
}

provide this object to the PaperProvider's theme prop.

2. Then I use the AnimatedFAB button like so:

export default function Index() {
	const colorScheme = useContext(ColorSchemeContext) ?? "dark";
	const streak = 19; // TODO: get this via API

	const bottomSheetRef = useRef<BottomSheet>(null);
	const openBottomSheet = () => bottomSheetRef.current?.expand();

	const [duration, setDuration] = useState(0);

	const calcPercent = (duration: number) => Math.round((duration / 60) * 100);
	const fabExtended = duration > 0;

	return (
		<BottomSheetModalProvider>
			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
				<SafeAreaView
					style={nativeWindTheme[colorScheme]}
					className='bg-surface-container-lowest flex-1 px-4 pt-2 flex flex-col gap-10'
				>
					<Header streak={streak} openBottomSheet={openBottomSheet} />

					<View className='flex flex-col gap-8'>
						<Timer percentage={calcPercent(duration)} />
						<TimerInput duration={duration} setDuration={setDuration} />
					</View>

					<StatsBottomSheet bottomSheetRef={bottomSheetRef} />

					<AnimatedFAB
						icon={'play'}
						label={'Start'}
						extended={fabExtended}
						disabled={!fabExtended}
						onPress={() => console.log('started meditation!')}
						animateFrom={'right'}
						renderToHardwareTextureAndroid={true}
						iconMode={'dynamic'}
						style={[styles.fab]}
						variant='primary'
					/>

					{/* <FAB
						icon="plus"
						style={styles.fab}
						onPress={() => console.log('Pressed')}
					/> */}
				</SafeAreaView>
			</TouchableWithoutFeedback>
		</BottomSheetModalProvider>
	)
}

const styles = StyleSheet.create({
	fab: {
		position: 'absolute',
		margin: 16,
		right: 0,
		bottom: 0,
	},
});

Preview

What have you tried so far?

I tried these steps but none of them worked.

1. In the style prop, I tried to set elevation to 0.
2. I set elevation.level3 color to transparent since that's used by the Animated FAB button.
3. I explicitly set backgroundColor: 'red' or some other color to troubleshoot but the border still remains.
4. I also tried using a regular FAB button but that renders correctly (which tells me this might an issue with the Animated.View component in here.
5. I tried to use renderToHardwareTextureAndroid={true}.
6. I tried to change the variant of the button, still remains.
7. Using Devtools is not helping. When I open devtools, the border disappears. When i restart the app, it appears again.

Your Environment

software	version
ios	x
android	13
react-native	0.81.5
react-native-paper	5.14.5
node	22.16.0
npm or yarn	10.9.2 (npm)
expo sdk	54.0.31

[hnmht]

I'm hitting the same issue; it works fine on Android 16 and IOS, but it occurs on Android 9.

[BogiKay]

@Prateik-Lohani-07 thanks for reporting the issue. I have been able to reproduce it. I'll get a fix out