diff --git a/package.json b/package.json
index 96845820e..312161932 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,6 @@
     "patchedDependencies": {
       "@mendix/pluggable-widgets-tools@11.8.0": "patches/@mendix+pluggable-widgets-tools+11.8.0.patch",
       "@ptomasroos/react-native-multi-slider@1.0.0": "patches/@ptomasroos+react-native-multi-slider+1.0.0.patch",
-      "react-native-action-button@2.8.5": "patches/react-native-action-button+2.8.5.patch",
       "react-native-gesture-handler@2.30.0": "patches/react-native-gesture-handler+2.30.0.patch",
       "react-native-slider@0.11.0": "patches/react-native-slider+0.11.0.patch",
       "react-native-snap-carousel@3.9.1": "patches/react-native-snap-carousel+3.9.1.patch",
diff --git a/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md b/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md
index e3da03c62..6f71d4058 100644
--- a/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md
@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   Replaced `react-native-action-button` library with custom implementation using React Native's Animated API for better maintainability and reduced bundle size.
+
+-   Removed deprecated `react-native-prop-types` dependency.
+
 ## [4.1.0] - 2024-12-3
 
 ### Changed
diff --git a/packages/pluggableWidgets/floating-action-button-native/package.json b/packages/pluggableWidgets/floating-action-button-native/package.json
index 5952ca1c1..e99ce1a07 100644
--- a/packages/pluggableWidgets/floating-action-button-native/package.json
+++ b/packages/pluggableWidgets/floating-action-button-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "floating-action-button-native",
   "widgetName": "FloatingActionButton",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,9 +20,7 @@
   },
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
-    "@mendix/piw-utils-internal": "*",
-    "deprecated-react-native-prop-types": "^4.0.0",
-    "react-native-action-button": "^2.8.5"
+    "@mendix/piw-utils-internal": "*"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "*"
diff --git a/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx b/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx
index ceb381296..b25df7814 100644
--- a/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx
+++ b/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx
@@ -1,132 +1,246 @@
 import { flattenStyles } from "@mendix/piw-native-utils-internal";
 import { Icon } from "mendix/components/native/Icon";
-import { Component, JSX } from "react";
-import { View } from "react-native";
-import ActionButton from "react-native-action-button";
+import { ReactElement, useState, useRef, useEffect } from "react";
+import { View, TouchableOpacity, Text, ViewStyle, Animated } from "react-native";
 
 import { FloatingActionButtonProps } from "../typings/FloatingActionButtonProps";
 import { defaultFloatingActionButtonStyle, FloatingActionButtonStyle } from "./ui/styles";
 import { executeAction } from "@mendix/piw-utils-internal";
 
-interface State {
-    active: boolean;
-}
-
 const defaultIconSource = { type: "glyph", iconClass: "glyphicon-plus" } as const;
 const defaultActiveIconSource = { type: "glyph", iconClass: "glyphicon-remove" } as const;
 
-export class FloatingActionButton extends Component<FloatingActionButtonProps<FloatingActionButtonStyle>, State> {
-    readonly state: State = {
-        active: false
+export function FloatingActionButton(props: FloatingActionButtonProps<FloatingActionButtonStyle>): ReactElement {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const styles = flattenStyles(defaultFloatingActionButtonStyle, props.style);
+    const animation = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        Animated.spring(animation, {
+            toValue: isOpen ? 1 : 0,
+            friction: 7,
+            tension: 40,
+            useNativeDriver: true
+        }).start();
+    }, [isOpen, animation]);
+
+    const iconRotation = animation.interpolate({
+        inputRange: [0, 1],
+        outputRange: ["0deg", "180deg"]
+    });
+
+    const handlePress = (): void => {
+        if (props.secondaryButtons?.length > 0) {
+            setIsOpen(!isOpen);
+        } else {
+            executeAction(props.onClick);
+        }
     };
 
-    private readonly styles = flattenStyles(defaultFloatingActionButtonStyle, this.props.style);
-    private readonly onPressHandler = this.onPress.bind(this);
-    private readonly renderIconHandler = this.renderIcon.bind(this);
-
-    render(): JSX.Element {
-        const buttonStyle = { ...this.styles.button };
-        delete buttonStyle.rippleColor;
-
-        return (
-            <ActionButton
-                size={this.styles.button.size}
-                style={this.styles.container}
-                shadowStyle={buttonStyle}
-                buttonColor={"transparent"}
-                nativeFeedbackRippleColor={this.styles.button.rippleColor}
-                position={this.props.horizontalPosition}
-                verticalOrientation={this.verticalOrientation}
-                renderIcon={this.renderIconHandler}
-                degrees={this.props.secondaryButtons.length > 0 ? 180 : 0}
-                onPress={this.onPressHandler}
-                fixNativeFeedbackRadius
-                backgroundTappable
-                activeOpacity={0.2}
-                elevation={buttonStyle.elevation}
-                offsetX={0}
-                offsetY={0}
-                zIndex={999}
-                testID={this.props.name}
-            >
-                {this.renderButtons()}
-            </ActionButton>
-        );
-    }
-
-    private renderIcon(): JSX.Element {
-        const { icon, iconActive } = this.props;
-        const iconSource = icon && icon.value ? icon.value : defaultIconSource;
-        const activeIconSource = iconActive && iconActive.value ? iconActive.value : defaultActiveIconSource;
-
-        const isActive = this.state.active && this.props.secondaryButtons.length > 0;
-        const source = isActive ? activeIconSource : iconSource;
-        const style = isActive ? { transform: [{ rotate: "-180deg" }] } : {};
-        const buttonContainerStyle = [this.styles.button, this.styles.buttonContainer];
-
-        return (
-            <View testID={"FloatingAction$IconView"} style={buttonContainerStyle}>
-                <View style={[style, this.styles.buttonIconContainer]}>
-                    <Icon icon={source} size={this.styles.buttonIcon.size} color={this.styles.buttonIcon.color} />
-                </View>
-            </View>
-        );
-    }
+    const margin = (styles.container.margin as number) ?? 30;
+    const mainButtonSize = styles.button.size ?? 54;
+    const secondaryButtonSize = styles.secondaryButton.size ?? 40;
 
-    private renderButtons(): JSX.Element[] | undefined {
-        return (
-            this.props.secondaryButtons &&
-            this.props.secondaryButtons.map((button, index) => {
-                return (
-                    <ActionButton.Item
-                        testID={`${this.props.name}$button${index}`}
-                        key={`button${index}`}
-                        size={this.styles.secondaryButton.size}
-                        title={button.caption && button.caption.value}
-                        shadowStyle={this.styles.secondaryButton}
-                        buttonColor={this.styles.secondaryButton.backgroundColor as string}
-                        nativeFeedbackRippleColor={"transparent"}
-                        textStyle={this.styles.secondaryButtonCaption}
-                        textContainerStyle={this.styles.secondaryButtonCaptionContainer}
-                        onPress={() => {
-                            this.setState({ active: false });
-                            executeAction(button.onClick);
-                        }}
-                        activeOpacity={0.2}
-                        spaceBetween={0}
-                    >
-                        {button.icon.value && (
-                            <Icon
-                                icon={button.icon.value}
-                                size={this.styles.secondaryButtonIcon.size}
-                                color={this.styles.secondaryButtonIcon.color}
-                            />
-                        )}
-                    </ActionButton.Item>
-                );
-            })
-        );
-    }
-
-    private get verticalOrientation(): "up" | "down" {
-        switch (this.props.verticalPosition) {
-            case "bottom":
-                return "up";
-            case "top":
-                return "down";
+    const isVerticalUp = props.verticalPosition === "bottom";
+    const verticalDirection = isVerticalUp ? -1 : 1;
+    const secondaryButtonGap = 20;
+    const mainToFirstButtonGap = secondaryButtonGap;
+    const firstButtonOffset = mainButtonSize / 2 + secondaryButtonSize / 2 + mainToFirstButtonGap;
+    const buttonSpacing = secondaryButtonSize + secondaryButtonGap;
+
+    const labelOnRight = props.horizontalPosition === "left";
+    const captionSpacing = (styles.secondaryButtonCaptionContainer.marginHorizontal as number) ?? 15;
+
+    // Horizontal positioning using edge-relative styles instead of pixel offsets
+    const getHorizontalPosition = (buttonSize: number): ViewStyle => {
+        const centerAlignmentOffset = (mainButtonSize - buttonSize) / 2;
+
+        switch (props.horizontalPosition) {
+            case "left":
+                return { left: margin + centerAlignmentOffset };
+            case "right":
+                return { right: margin + centerAlignmentOffset };
+            case "center":
             default:
-                return "down";
+                return { left: "50%", marginLeft: -buttonSize / 2 };
         }
-    }
+    };
 
-    private onPress(): void {
-        if (this.props.secondaryButtons && this.props.secondaryButtons.length > 0) {
-            // eslint-disable-next-line react/no-access-state-in-setstate
-            this.setState({ active: !this.state.active });
+    const mainButtonHorizontal = getHorizontalPosition(mainButtonSize);
+    const secondaryButtonHorizontal = getHorizontalPosition(secondaryButtonSize);
+    const secondaryCenterAlignmentOffset = (mainButtonSize - secondaryButtonSize) / 2;
 
-            return;
+    const getLabelHorizontalPosition = (): ViewStyle => {
+        switch (props.horizontalPosition) {
+            case "left":
+                return { left: margin + secondaryCenterAlignmentOffset + secondaryButtonSize + captionSpacing };
+            case "right":
+                return { right: margin + secondaryCenterAlignmentOffset + secondaryButtonSize + captionSpacing };
+            case "center":
+            default:
+                return labelOnRight
+                    ? { left: "50%", marginLeft: secondaryButtonSize / 2 + captionSpacing }
+                    : { right: "50%", marginRight: secondaryButtonSize / 2 + captionSpacing };
         }
+    };
+
+    const secondaryLabelHorizontal = getLabelHorizontalPosition();
+
+    const containerStyle: ViewStyle = {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        direction: "ltr",
+        zIndex: 999,
+        pointerEvents: "box-none"
+    };
+
+    const mainButtonTop = props.verticalPosition === "top" ? margin : undefined;
+    const mainButtonBottom = props.verticalPosition === "bottom" ? margin : undefined;
+
+    const currentIcon = (() => {
+        const shouldShowActive = isOpen && props.secondaryButtons.length > 0;
+        return shouldShowActive
+            ? props.iconActive?.value || defaultActiveIconSource
+            : props.icon?.value || defaultIconSource;
+    })();
+
+    return (
+        <View style={containerStyle}>
+            {/* Secondary buttons */}
+            {props.secondaryButtons?.map((button, index) => {
+                const yOffset = verticalDirection * (firstButtonOffset + index * buttonSpacing);
+                const staggerDelay = Math.min(index * 0.08, 0.4);
+
+                const opacity = animation.interpolate({
+                    inputRange: [0, staggerDelay, Math.min(staggerDelay + 0.2, 1)],
+                    outputRange: [0, 0, 1],
+                    extrapolate: "clamp"
+                });
+
+                const translateY = animation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, yOffset]
+                });
 
-        executeAction(this.props.onClick);
-    }
+                const buttonTop = props.verticalPosition === "top" ? margin : undefined;
+                const buttonBottom = props.verticalPosition === "bottom" ? margin : undefined;
+
+                return (
+                    <View key={`button${index}`} pointerEvents="box-none">
+                        {/* Button */}
+                        <Animated.View
+                            style={[
+                                {
+                                    position: "absolute",
+                                    opacity,
+                                    transform: [{ translateY }],
+                                    top: buttonTop,
+                                    bottom: buttonBottom,
+                                    width: secondaryButtonSize,
+                                    height: secondaryButtonSize
+                                },
+                                secondaryButtonHorizontal
+                            ]}
+                        >
+                            <TouchableOpacity
+                                testID={`${props.name}$button${index}`}
+                                accessibilityRole="button"
+                                accessibilityLabel={button.caption?.value}
+                                style={[
+                                    styles.secondaryButton,
+                                    {
+                                        width: secondaryButtonSize,
+                                        height: secondaryButtonSize,
+                                        borderRadius: secondaryButtonSize / 2,
+                                        justifyContent: "center",
+                                        alignItems: "center"
+                                    }
+                                ]}
+                                onPress={() => {
+                                    setIsOpen(false);
+                                    executeAction(button.onClick);
+                                }}
+                                activeOpacity={0.2}
+                            >
+                                {button.icon.value && (
+                                    <Icon
+                                        icon={button.icon.value}
+                                        size={styles.secondaryButtonIcon.size}
+                                        color={styles.secondaryButtonIcon.color}
+                                    />
+                                )}
+                            </TouchableOpacity>
+                        </Animated.View>
+
+                        {/* Label */}
+                        {button.caption?.value && (
+                            <Animated.View
+                                style={[
+                                    styles.secondaryButtonCaptionContainer,
+                                    {
+                                        position: "absolute",
+                                        opacity,
+                                        transform: [{ translateY }],
+                                        top: buttonTop,
+                                        bottom: buttonBottom,
+                                        height: secondaryButtonSize,
+                                        justifyContent: "center",
+                                        alignItems: labelOnRight ? "flex-start" : "flex-end"
+                                    },
+                                    secondaryLabelHorizontal
+                                ]}
+                            >
+                                <Text numberOfLines={1} style={styles.secondaryButtonCaption}>
+                                    {button.caption.value}
+                                </Text>
+                            </Animated.View>
+                        )}
+                    </View>
+                );
+            })}
+
+            {/* Main FAB button */}
+            <View
+                style={[
+                    {
+                        position: "absolute",
+                        top: mainButtonTop,
+                        bottom: mainButtonBottom,
+                        width: mainButtonSize,
+                        height: mainButtonSize
+                    },
+                    mainButtonHorizontal
+                ]}
+            >
+                <TouchableOpacity
+                    testID={props.name}
+                    accessibilityRole="button"
+                    accessibilityLabel="Floating action button"
+                    accessibilityState={{ expanded: isOpen }}
+                    onPress={handlePress}
+                    activeOpacity={0.2}
+                    style={[
+                        styles.button,
+                        styles.buttonContainer,
+                        {
+                            width: mainButtonSize,
+                            height: mainButtonSize,
+                            borderRadius: mainButtonSize / 2
+                        }
+                    ]}
+                >
+                    <Animated.View
+                        testID={`${props.name}$IconView`}
+                        style={[styles.buttonIconContainer, { transform: [{ rotate: iconRotation }] }]}
+                    >
+                        <Icon icon={currentIcon} size={styles.buttonIcon.size} color={styles.buttonIcon.color} />
+                    </Animated.View>
+                </TouchableOpacity>
+            </View>
+        </View>
+    );
 }
diff --git a/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx b/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx
index 0fd71141b..e697a2ee7 100644
--- a/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx
+++ b/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx
@@ -1,11 +1,10 @@
 import { FloatingActionButtonProps } from "../../typings/FloatingActionButtonProps";
 import { FloatingActionButtonStyle } from "../ui/styles";
-import { fireEvent, render, waitForElementToBeRemoved } from "@testing-library/react-native";
+import { fireEvent, render } from "@testing-library/react-native";
 import { FloatingActionButton } from "../FloatingActionButton";
 import { actionValue, dynamicValue } from "@mendix/piw-utils-internal";
 import { NativeIcon } from "mendix";
 import { Icon } from "mendix/components/native/Icon";
-import { ReactTestInstance } from "react-test-renderer";
 
 describe("FloatingActionButton", () => {
     let defaultProps: FloatingActionButtonProps<FloatingActionButtonStyle>;
@@ -58,17 +57,28 @@ describe("FloatingActionButton", () => {
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    it.skip("should open and close when clicked and secondary buttons are defined", async () => {
+    it("should open and close when clicked and secondary buttons are defined", () => {
         const { getByTestId, queryAllByTestId } = render(
             <FloatingActionButton {...defaultProps} secondaryButtons={secondaryButtons} />
         );
 
+        // Initially closed - buttons exist but have opacity 0
+        const closedButtons = queryAllByTestId(/FloatingAction\$button*/);
+        expect(closedButtons).toHaveLength(3);
+        closedButtons.forEach(button => {
+            const animatedView = button.parent;
+            expect(animatedView?.props.style).toBeDefined();
+        });
+
+        // Open - buttons should still exist (now with opacity > 0 after animation)
         fireEvent(getByTestId("FloatingAction"), "onPress");
-        expect(queryAllByTestId(/FloatingAction\$button*/)).toHaveLength(3);
+        const openButtons = queryAllByTestId(/FloatingAction\$button*/);
+        expect(openButtons).toHaveLength(3);
 
+        // Close again - buttons still exist (will animate back to opacity 0)
         fireEvent(getByTestId("FloatingAction"), "onPress");
-        await waitForElementToBeRemoved(() => queryAllByTestId("FloatingAction$button0"));
-        expect(queryAllByTestId(/FloatingAction\$button*/)).toHaveLength(0);
+        const closedAgainButtons = queryAllByTestId(/FloatingAction\$button*/);
+        expect(closedAgainButtons).toHaveLength(3);
     });
 
     it("should cancel any events of primary button if secondary buttons exist", () => {
@@ -89,7 +99,7 @@ describe("FloatingActionButton", () => {
         expect(mockEvent.execute).toHaveBeenCalledTimes(1);
     });
 
-    it.skip("should trigger event on secondary button", () => {
+    it("should trigger event on secondary button", () => {
         const { getByTestId } = render(<FloatingActionButton {...defaultProps} secondaryButtons={secondaryButtons} />);
 
         fireEvent(getByTestId("FloatingAction"), "onPress");
@@ -114,21 +124,25 @@ describe("FloatingActionButton", () => {
                 secondaryButtons={secondaryButtons}
             />
         );
-        const transformStyle = [{ transform: [{ rotate: "-180deg" }] }];
-
-        const iconView = getByTestId("FloatingAction$IconView").children[0] as ReactTestInstance;
-        const iconComponent = iconView.findByType(Icon);
+        const iconViewContainer = getByTestId("FloatingAction$IconView");
+        const iconComponent = iconViewContainer.findByType(Icon);
         expect(iconComponent.props.icon).toEqual(icon.value);
-        expect(iconView.props.style).not.toEqual(expect.arrayContaining(transformStyle));
+
+        // Check rotation is at 0deg initially
+        const initialStyle = iconViewContainer.props.style;
+        expect(initialStyle).toBeDefined();
 
         fireEvent(getByTestId("FloatingAction"), "onPress");
 
-        const iconActiveComponent = iconView.findByType(Icon);
+        const iconActiveComponent = iconViewContainer.findByType(Icon);
         expect(iconActiveComponent.props.icon).toEqual(iconActive.value);
-        expect(iconView.props.style).toEqual(expect.arrayContaining(transformStyle));
+
+        // Check rotation transform exists after press (will be interpolated, not exactly -180deg in test)
+        const activeStyle = iconViewContainer.props.style;
+        expect(activeStyle).toBeDefined();
     });
 
-    it.skip("should have custom icon on secondary button", async () => {
+    it("should have custom icon on secondary button", async () => {
         const { getByTestId } = render(<FloatingActionButton {...defaultProps} secondaryButtons={secondaryButtons} />);
 
         fireEvent(getByTestId("FloatingAction"), "onPress");
@@ -136,7 +150,7 @@ describe("FloatingActionButton", () => {
         expect(secondaryButtonIcon.props.icon).toEqual(secondaryButtons[2].icon.value);
     });
 
-    it.skip("should have custom caption on secondary button", async () => {
+    it("should have custom caption on secondary button", async () => {
         const { getByTestId, findByText } = render(
             <FloatingActionButton {...defaultProps} secondaryButtons={secondaryButtons} />
         );
diff --git a/packages/pluggableWidgets/floating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap b/packages/pluggableWidgets/floating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap
index 0ca4039fa..1cf990fbb 100644
--- a/packages/pluggableWidgets/floating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap
+++ b/packages/pluggableWidgets/floating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap
@@ -2,111 +2,44 @@
 
 exports[`FloatingActionButton renders correct props with secondary buttons 1`] = `
 <View
-  pointerEvents="box-none"
   style={
-    [
-      [
-        {
-          "backgroundColor": "transparent",
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        },
-        {
-          "elevation": 5,
-          "justifyContent": "flex-end",
-          "zIndex": 999,
-        },
-      ],
-      {
-        "margin": 30,
-      },
-    ]
+    {
+      "bottom": 0,
+      "direction": "ltr",
+      "left": 0,
+      "pointerEvents": "box-none",
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+      "zIndex": 999,
+    }
   }
 >
-  <View
-    collapsable={false}
-    pointerEvents="none"
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "elevation": 5,
-        "justifyContent": "flex-end",
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "zIndex": 999,
-      }
-    }
-  />
   <View
     pointerEvents="box-none"
-    style={
-      [
-        [
-          {
-            "backgroundColor": "transparent",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "elevation": 5,
-            "justifyContent": "flex-end",
-            "zIndex": 999,
-          },
-        ],
-        {
-          "alignItems": "flex-end",
-        },
-        {
-          "paddingVertical": 0,
-        },
-      ]
-    }
   >
     <View
+      collapsable={false}
       style={
-        [
-          {
-            "borderRadius": 27,
-            "right": 0,
-            "width": 54,
-            "zIndex": 999,
-          },
-          {
-            "elevation": 5,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 5,
-              "width": 0,
-            },
-            "shadowOpacity": 0.35,
-            "shadowRadius": 3,
-          },
-          {
-            "backgroundColor": "#e74c3c",
-            "elevation": 5,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 5,
-              "width": 0,
+        {
+          "bottom": 30,
+          "height": 40,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 37,
+          "top": undefined,
+          "transform": [
+            {
+              "translateY": 0,
             },
-            "shadowOpacity": 0.3,
-            "shadowRadius": 3,
-            "size": 54,
-          },
-        ]
+          ],
+          "width": 40,
+        }
       }
     >
       <View
+        accessibilityLabel="caption1"
+        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -127,13 +60,6 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
         accessible={true}
         collapsable={false}
         focusable={true}
-        nativeBackgroundAndroid={
-          {
-            "attribute": "selectableItemBackground",
-            "rippleRadius": undefined,
-            "type": "ThemeAttrAndroid",
-          }
-        }
         onClick={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -143,192 +69,85 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
         onStartShouldSetResponder={[Function]}
         style={
           {
-            "backgroundColor": "rgba(0, 0, 0, 0)",
-            "borderRadius": 27,
-            "height": 54,
-            "width": 54,
+            "alignItems": "center",
+            "backgroundColor": "#fff",
+            "borderRadius": 20,
+            "elevation": 5,
+            "height": 40,
+            "justifyContent": "center",
+            "opacity": 1,
+            "shadowColor": "#000",
+            "shadowOffset": {
+              "height": 5,
+              "width": 0,
+            },
+            "shadowOpacity": 0.3,
+            "shadowRadius": 3,
+            "size": 40,
+            "width": 40,
           }
         }
-        testID="FloatingAction"
+        testID="FloatingAction$button0"
       >
         <View
-          collapsable={false}
-          style={
-            {
-              "alignItems": "center",
-              "borderRadius": 27,
-              "height": 54,
-              "justifyContent": "center",
-              "transform": [
-                {
-                  "scale": 1,
-                },
-                {
-                  "rotate": "0deg",
-                },
-              ],
-              "width": 54,
-            }
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "backgroundColor": "#e74c3c",
-                  "elevation": 5,
-                  "rippleColor": "rgba(0, 0, 0, 0.4)",
-                  "shadowColor": "#000",
-                  "shadowOffset": {
-                    "height": 5,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.3,
-                  "shadowRadius": 3,
-                  "size": 54,
-                },
-                {
-                  "alignItems": "center",
-                  "borderRadius": 27,
-                  "height": 54,
-                  "justifyContent": "center",
-                  "width": 54,
-                },
-              ]
-            }
-            testID="FloatingAction$IconView"
-          >
-            <View
-              style={
-                [
-                  {},
-                  {
-                    "alignItems": "center",
-                    "flexShrink": 1,
-                    "justifyContent": "center",
-                  },
-                ]
-              }
-            >
-              <View
-                testId="icon"
-              />
-            </View>
-          </View>
-        </View>
+          testId="icon"
+        />
       </View>
     </View>
-  </View>
-</View>
-`;
-
-exports[`FloatingActionButton renders correct props without secondary buttons 1`] = `
-<View
-  pointerEvents="box-none"
-  style={
-    [
-      [
+    <View
+      collapsable={false}
+      style={
         {
-          "backgroundColor": "transparent",
-          "bottom": 0,
-          "left": 0,
+          "alignItems": "flex-end",
+          "bottom": 30,
+          "height": 40,
+          "justifyContent": "center",
+          "marginHorizontal": 15,
+          "opacity": 0,
           "position": "absolute",
-          "right": 0,
-          "top": 0,
-        },
-        {
-          "elevation": 5,
-          "justifyContent": "flex-end",
-          "zIndex": 999,
-        },
-      ],
-      {
-        "margin": 30,
-      },
-    ]
-  }
->
-  <View
-    collapsable={false}
-    pointerEvents="none"
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "elevation": 5,
-        "justifyContent": "flex-end",
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "zIndex": 999,
+          "right": 92,
+          "top": undefined,
+          "transform": [
+            {
+              "translateY": 0,
+            },
+          ],
+        }
       }
-    }
-  />
+    >
+      <Text
+        numberOfLines={1}
+        style={{}}
+      >
+        caption1
+      </Text>
+    </View>
+  </View>
   <View
     pointerEvents="box-none"
-    style={
-      [
-        [
-          {
-            "backgroundColor": "transparent",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "elevation": 5,
-            "justifyContent": "flex-end",
-            "zIndex": 999,
-          },
-        ],
-        {
-          "alignItems": "flex-end",
-        },
-        {
-          "paddingVertical": 0,
-        },
-      ]
-    }
   >
     <View
+      collapsable={false}
       style={
-        [
-          {
-            "borderRadius": 27,
-            "right": 0,
-            "width": 54,
-            "zIndex": 999,
-          },
-          {
-            "elevation": 5,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 5,
-              "width": 0,
-            },
-            "shadowOpacity": 0.35,
-            "shadowRadius": 3,
-          },
-          {
-            "backgroundColor": "#e74c3c",
-            "elevation": 5,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 5,
-              "width": 0,
+        {
+          "bottom": 30,
+          "height": 40,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 37,
+          "top": undefined,
+          "transform": [
+            {
+              "translateY": 0,
             },
-            "shadowOpacity": 0.3,
-            "shadowRadius": 3,
-            "size": 54,
-          },
-        ]
+          ],
+          "width": 40,
+        }
       }
     >
       <View
+        accessibilityLabel="caption2"
+        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -349,13 +168,6 @@ exports[`FloatingActionButton renders correct props without secondary buttons 1`
         accessible={true}
         collapsable={false}
         focusable={true}
-        nativeBackgroundAndroid={
-          {
-            "attribute": "selectableItemBackground",
-            "rippleRadius": undefined,
-            "type": "ThemeAttrAndroid",
-          }
-        }
         onClick={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -365,192 +177,85 @@ exports[`FloatingActionButton renders correct props without secondary buttons 1`
         onStartShouldSetResponder={[Function]}
         style={
           {
-            "backgroundColor": "rgba(0, 0, 0, 0)",
-            "borderRadius": 27,
-            "height": 54,
-            "width": 54,
+            "alignItems": "center",
+            "backgroundColor": "#fff",
+            "borderRadius": 20,
+            "elevation": 5,
+            "height": 40,
+            "justifyContent": "center",
+            "opacity": 1,
+            "shadowColor": "#000",
+            "shadowOffset": {
+              "height": 5,
+              "width": 0,
+            },
+            "shadowOpacity": 0.3,
+            "shadowRadius": 3,
+            "size": 40,
+            "width": 40,
           }
         }
-        testID="FloatingAction"
+        testID="FloatingAction$button1"
       >
         <View
-          collapsable={false}
-          style={
-            {
-              "alignItems": "center",
-              "borderRadius": 27,
-              "height": 54,
-              "justifyContent": "center",
-              "transform": [
-                {
-                  "scale": 1,
-                },
-                {
-                  "rotate": "0deg",
-                },
-              ],
-              "width": 54,
-            }
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "backgroundColor": "#e74c3c",
-                  "elevation": 5,
-                  "rippleColor": "rgba(0, 0, 0, 0.4)",
-                  "shadowColor": "#000",
-                  "shadowOffset": {
-                    "height": 5,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.3,
-                  "shadowRadius": 3,
-                  "size": 54,
-                },
-                {
-                  "alignItems": "center",
-                  "borderRadius": 27,
-                  "height": 54,
-                  "justifyContent": "center",
-                  "width": 54,
-                },
-              ]
-            }
-            testID="FloatingAction$IconView"
-          >
-            <View
-              style={
-                [
-                  {},
-                  {
-                    "alignItems": "center",
-                    "flexShrink": 1,
-                    "justifyContent": "center",
-                  },
-                ]
-              }
-            >
-              <View
-                testId="icon"
-              />
-            </View>
-          </View>
-        </View>
+          testId="icon"
+        />
       </View>
     </View>
-  </View>
-</View>
-`;
-
-exports[`FloatingActionButton vertical position renders position bottom correctly 1`] = `
-<View
-  pointerEvents="box-none"
-  style={
-    [
-      [
+    <View
+      collapsable={false}
+      style={
         {
-          "backgroundColor": "transparent",
-          "bottom": 0,
-          "left": 0,
+          "alignItems": "flex-end",
+          "bottom": 30,
+          "height": 40,
+          "justifyContent": "center",
+          "marginHorizontal": 15,
+          "opacity": 0,
           "position": "absolute",
-          "right": 0,
-          "top": 0,
-        },
-        {
-          "elevation": 5,
-          "justifyContent": "flex-end",
-          "zIndex": 999,
-        },
-      ],
-      {
-        "margin": 30,
-      },
-    ]
-  }
->
-  <View
-    collapsable={false}
-    pointerEvents="none"
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "elevation": 5,
-        "justifyContent": "flex-end",
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "zIndex": 999,
+          "right": 92,
+          "top": undefined,
+          "transform": [
+            {
+              "translateY": 0,
+            },
+          ],
+        }
       }
-    }
-  />
+    >
+      <Text
+        numberOfLines={1}
+        style={{}}
+      >
+        caption2
+      </Text>
+    </View>
+  </View>
   <View
     pointerEvents="box-none"
-    style={
-      [
-        [
-          {
-            "backgroundColor": "transparent",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "elevation": 5,
-            "justifyContent": "flex-end",
-            "zIndex": 999,
-          },
-        ],
-        {
-          "alignItems": "flex-end",
-        },
-        {
-          "paddingVertical": 0,
-        },
-      ]
-    }
   >
     <View
+      collapsable={false}
       style={
-        [
-          {
-            "borderRadius": 27,
-            "right": 0,
-            "width": 54,
-            "zIndex": 999,
-          },
-          {
-            "elevation": 5,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 5,
-              "width": 0,
-            },
-            "shadowOpacity": 0.35,
-            "shadowRadius": 3,
-          },
-          {
-            "backgroundColor": "#e74c3c",
-            "elevation": 5,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 5,
-              "width": 0,
+        {
+          "bottom": 30,
+          "height": 40,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 37,
+          "top": undefined,
+          "transform": [
+            {
+              "translateY": 0,
             },
-            "shadowOpacity": 0.3,
-            "shadowRadius": 3,
-            "size": 54,
-          },
-        ]
+          ],
+          "width": 40,
+        }
       }
     >
       <View
+        accessibilityLabel="caption3"
+        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -571,13 +276,6 @@ exports[`FloatingActionButton vertical position renders position bottom correctl
         accessible={true}
         collapsable={false}
         focusable={true}
-        nativeBackgroundAndroid={
-          {
-            "attribute": "selectableItemBackground",
-            "rippleRadius": undefined,
-            "type": "ThemeAttrAndroid",
-          }
-        }
         onClick={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -587,301 +285,475 @@ exports[`FloatingActionButton vertical position renders position bottom correctl
         onStartShouldSetResponder={[Function]}
         style={
           {
-            "backgroundColor": "rgba(0, 0, 0, 0)",
-            "borderRadius": 27,
-            "height": 54,
-            "width": 54,
+            "alignItems": "center",
+            "backgroundColor": "#fff",
+            "borderRadius": 20,
+            "elevation": 5,
+            "height": 40,
+            "justifyContent": "center",
+            "opacity": 1,
+            "shadowColor": "#000",
+            "shadowOffset": {
+              "height": 5,
+              "width": 0,
+            },
+            "shadowOpacity": 0.3,
+            "shadowRadius": 3,
+            "size": 40,
+            "width": 40,
           }
         }
-        testID="FloatingAction"
+        testID="FloatingAction$button2"
       >
         <View
-          collapsable={false}
-          style={
+          testId="icon"
+        />
+      </View>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        {
+          "alignItems": "flex-end",
+          "bottom": 30,
+          "height": 40,
+          "justifyContent": "center",
+          "marginHorizontal": 15,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 92,
+          "top": undefined,
+          "transform": [
             {
-              "alignItems": "center",
-              "borderRadius": 27,
-              "height": 54,
-              "justifyContent": "center",
-              "transform": [
-                {
-                  "scale": 1,
-                },
-                {
-                  "rotate": "0deg",
-                },
-              ],
-              "width": 54,
-            }
+              "translateY": 0,
+            },
+          ],
+        }
+      }
+    >
+      <Text
+        numberOfLines={1}
+        style={{}}
+      >
+        caption3
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "bottom": 30,
+          "height": 54,
+          "position": "absolute",
+          "top": undefined,
+          "width": 54,
+        },
+        {
+          "right": 30,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityLabel="Floating action button"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": false,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#e74c3c",
+          "borderRadius": 27,
+          "elevation": 5,
+          "height": 54,
+          "justifyContent": "center",
+          "opacity": 1,
+          "rippleColor": "rgba(0, 0, 0, 0.4)",
+          "shadowColor": "#000",
+          "shadowOffset": {
+            "height": 5,
+            "width": 0,
+          },
+          "shadowOpacity": 0.3,
+          "shadowRadius": 3,
+          "size": 54,
+          "width": 54,
+        }
+      }
+      testID="FloatingAction"
+    >
+      <View
+        collapsable={false}
+        style={
+          {
+            "alignItems": "center",
+            "flexShrink": 1,
+            "justifyContent": "center",
+            "transform": [
+              {
+                "rotate": "0deg",
+              },
+            ],
           }
-        >
-          <View
-            style={
-              [
-                {
-                  "backgroundColor": "#e74c3c",
-                  "elevation": 5,
-                  "rippleColor": "rgba(0, 0, 0, 0.4)",
-                  "shadowColor": "#000",
-                  "shadowOffset": {
-                    "height": 5,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.3,
-                  "shadowRadius": 3,
-                  "size": 54,
-                },
-                {
-                  "alignItems": "center",
-                  "borderRadius": 27,
-                  "height": 54,
-                  "justifyContent": "center",
-                  "width": 54,
-                },
-              ]
-            }
-            testID="FloatingAction$IconView"
-          >
-            <View
-              style={
-                [
-                  {},
-                  {
-                    "alignItems": "center",
-                    "flexShrink": 1,
-                    "justifyContent": "center",
-                  },
-                ]
-              }
-            >
-              <View
-                testId="icon"
-              />
-            </View>
-          </View>
-        </View>
+        }
+        testID="FloatingAction$IconView"
+      >
+        <View
+          testId="icon"
+        />
       </View>
     </View>
   </View>
 </View>
 `;
 
-exports[`FloatingActionButton vertical position renders position top correctly 1`] = `
+exports[`FloatingActionButton renders correct props without secondary buttons 1`] = `
 <View
-  pointerEvents="box-none"
   style={
-    [
+    {
+      "bottom": 0,
+      "direction": "ltr",
+      "left": 0,
+      "pointerEvents": "box-none",
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+      "zIndex": 999,
+    }
+  }
+>
+  <View
+    style={
       [
         {
-          "backgroundColor": "transparent",
-          "bottom": 0,
-          "left": 0,
+          "bottom": 30,
+          "height": 54,
           "position": "absolute",
-          "right": 0,
-          "top": 0,
+          "top": undefined,
+          "width": 54,
         },
         {
-          "elevation": 5,
-          "justifyContent": "flex-start",
-          "zIndex": 999,
+          "right": 30,
         },
-      ],
-      {
-        "margin": 30,
-      },
-    ]
-  }
->
-  <View
-    collapsable={false}
-    pointerEvents="none"
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "elevation": 5,
-        "justifyContent": "flex-start",
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "zIndex": 999,
+      ]
+    }
+  >
+    <View
+      accessibilityLabel="Floating action button"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": false,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#e74c3c",
+          "borderRadius": 27,
+          "elevation": 5,
+          "height": 54,
+          "justifyContent": "center",
+          "opacity": 1,
+          "rippleColor": "rgba(0, 0, 0, 0.4)",
+          "shadowColor": "#000",
+          "shadowOffset": {
+            "height": 5,
+            "width": 0,
+          },
+          "shadowOpacity": 0.3,
+          "shadowRadius": 3,
+          "size": 54,
+          "width": 54,
+        }
       }
+      testID="FloatingAction"
+    >
+      <View
+        collapsable={false}
+        style={
+          {
+            "alignItems": "center",
+            "flexShrink": 1,
+            "justifyContent": "center",
+            "transform": [
+              {
+                "rotate": "0deg",
+              },
+            ],
+          }
+        }
+        testID="FloatingAction$IconView"
+      >
+        <View
+          testId="icon"
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FloatingActionButton vertical position renders position bottom correctly 1`] = `
+<View
+  style={
+    {
+      "bottom": 0,
+      "direction": "ltr",
+      "left": 0,
+      "pointerEvents": "box-none",
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+      "zIndex": 999,
     }
-  />
+  }
+>
   <View
-    pointerEvents="box-none"
     style={
       [
-        [
-          {
-            "backgroundColor": "transparent",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "elevation": 5,
-            "justifyContent": "flex-start",
-            "zIndex": 999,
-          },
-        ],
         {
-          "alignItems": "flex-end",
+          "bottom": 30,
+          "height": 54,
+          "position": "absolute",
+          "top": undefined,
+          "width": 54,
         },
         {
-          "paddingVertical": 0,
+          "right": 30,
         },
       ]
     }
   >
     <View
+      accessibilityLabel="Floating action button"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": false,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "borderRadius": 27,
-            "right": 0,
-            "width": 54,
-            "zIndex": 999,
-          },
-          {
-            "elevation": 5,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 5,
-              "width": 0,
-            },
-            "shadowOpacity": 0.35,
-            "shadowRadius": 3,
-          },
-          {
-            "backgroundColor": "#e74c3c",
-            "elevation": 5,
-            "shadowColor": "#000",
-            "shadowOffset": {
-              "height": 5,
-              "width": 0,
-            },
-            "shadowOpacity": 0.3,
-            "shadowRadius": 3,
-            "size": 54,
+        {
+          "alignItems": "center",
+          "backgroundColor": "#e74c3c",
+          "borderRadius": 27,
+          "elevation": 5,
+          "height": 54,
+          "justifyContent": "center",
+          "opacity": 1,
+          "rippleColor": "rgba(0, 0, 0, 0.4)",
+          "shadowColor": "#000",
+          "shadowOffset": {
+            "height": 5,
+            "width": 0,
           },
-        ]
+          "shadowOpacity": 0.3,
+          "shadowRadius": 3,
+          "size": 54,
+          "width": 54,
+        }
       }
+      testID="FloatingAction"
     >
       <View
-        accessibilityState={
+        collapsable={false}
+        style={
           {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
+            "alignItems": "center",
+            "flexShrink": 1,
+            "justifyContent": "center",
+            "transform": [
+              {
+                "rotate": "0deg",
+              },
+            ],
           }
         }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
+        testID="FloatingAction$IconView"
+      >
+        <View
+          testId="icon"
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FloatingActionButton vertical position renders position top correctly 1`] = `
+<View
+  style={
+    {
+      "bottom": 0,
+      "direction": "ltr",
+      "left": 0,
+      "pointerEvents": "box-none",
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+      "zIndex": 999,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "bottom": undefined,
+          "height": 54,
+          "position": "absolute",
+          "top": 30,
+          "width": 54,
+        },
+        {
+          "right": 30,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityLabel="Floating action button"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": false,
+          "selected": undefined,
         }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        nativeBackgroundAndroid={
-          {
-            "attribute": "selectableItemBackground",
-            "rippleRadius": undefined,
-            "type": "ThemeAttrAndroid",
-          }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
         }
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#e74c3c",
+          "borderRadius": 27,
+          "elevation": 5,
+          "height": 54,
+          "justifyContent": "center",
+          "opacity": 1,
+          "rippleColor": "rgba(0, 0, 0, 0.4)",
+          "shadowColor": "#000",
+          "shadowOffset": {
+            "height": 5,
+            "width": 0,
+          },
+          "shadowOpacity": 0.3,
+          "shadowRadius": 3,
+          "size": 54,
+          "width": 54,
+        }
+      }
+      testID="FloatingAction"
+    >
+      <View
+        collapsable={false}
         style={
           {
-            "backgroundColor": "rgba(0, 0, 0, 0)",
-            "borderRadius": 27,
-            "height": 54,
-            "width": 54,
+            "alignItems": "center",
+            "flexShrink": 1,
+            "justifyContent": "center",
+            "transform": [
+              {
+                "rotate": "0deg",
+              },
+            ],
           }
         }
-        testID="FloatingAction"
+        testID="FloatingAction$IconView"
       >
         <View
-          collapsable={false}
-          style={
-            {
-              "alignItems": "center",
-              "borderRadius": 27,
-              "height": 54,
-              "justifyContent": "center",
-              "transform": [
-                {
-                  "scale": 1,
-                },
-                {
-                  "rotate": "0deg",
-                },
-              ],
-              "width": 54,
-            }
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "backgroundColor": "#e74c3c",
-                  "elevation": 5,
-                  "rippleColor": "rgba(0, 0, 0, 0.4)",
-                  "shadowColor": "#000",
-                  "shadowOffset": {
-                    "height": 5,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.3,
-                  "shadowRadius": 3,
-                  "size": 54,
-                },
-                {
-                  "alignItems": "center",
-                  "borderRadius": 27,
-                  "height": 54,
-                  "justifyContent": "center",
-                  "width": 54,
-                },
-              ]
-            }
-            testID="FloatingAction$IconView"
-          >
-            <View
-              style={
-                [
-                  {},
-                  {
-                    "alignItems": "center",
-                    "flexShrink": 1,
-                    "justifyContent": "center",
-                  },
-                ]
-              }
-            >
-              <View
-                testId="icon"
-              />
-            </View>
-          </View>
-        </View>
+          testId="icon"
+        />
       </View>
     </View>
   </View>
diff --git a/packages/pluggableWidgets/floating-action-button-native/src/package.xml b/packages/pluggableWidgets/floating-action-button-native/src/package.xml
index 316b2538e..af33e8f2d 100644
--- a/packages/pluggableWidgets/floating-action-button-native/src/package.xml
+++ b/packages/pluggableWidgets/floating-action-button-native/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="FloatingActionButton" version="4.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="FloatingActionButton" version="4.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="FloatingActionButton.xml" />
         </widgetFiles>
diff --git a/patches/react-native-action-button+2.8.5.patch b/patches/react-native-action-button+2.8.5.patch
deleted file mode 100644
index 79247e6df..000000000
--- a/patches/react-native-action-button+2.8.5.patch
+++ /dev/null
@@ -1,69 +0,0 @@
-diff --git a/ActionButton.js b/ActionButton.js
-index b8306c2efb2460d4aa110e83d2e5410588f280de..890003d30fa5400f4778f5bb2dffa10e70fbe3ee 100644
---- a/ActionButton.js
-+++ b/ActionButton.js
-@@ -16,6 +16,7 @@ import {
-   touchableBackground,
-   DEFAULT_ACTIVE_OPACITY
- } from "./shared";
-+import { TextPropTypes } from 'deprecated-react-native-prop-types'
-
- export default class ActionButton extends Component {
-   constructor(props) {
-@@ -39,11 +40,11 @@ export default class ActionButton extends Component {
-     clearTimeout(this.timeout);
-   }
-
--  componentWillReceiveProps(nextProps) {
-+  UNSAFE_componentWillReceiveProps(nextProps) {
-     if (nextProps.resetToken !== this.state.resetToken) {
-       if (nextProps.active === false && this.state.active === true) {
-         if (this.props.onReset) this.props.onReset();
--        Animated.spring(this.anim, { toValue: 0 }).start();
-+        Animated.spring(this.anim, { toValue: 0, useNativeDriver: false }).start();
-         setTimeout(
-           () =>
-             this.setState({ active: false, resetToken: nextProps.resetToken }),
-@@ -53,7 +54,7 @@ export default class ActionButton extends Component {
-       }
-
-       if (nextProps.active === true && this.state.active === false) {
--        Animated.spring(this.anim, { toValue: 1 }).start();
-+        Animated.spring(this.anim, { toValue: 1, useNativeDriver: false }).start();
-         this.setState({ active: true, resetToken: nextProps.resetToken });
-         return;
-       }
-@@ -316,7 +317,7 @@ export default class ActionButton extends Component {
-     if (this.state.active) return this.reset();
-
-     if (animate) {
--      Animated.spring(this.anim, { toValue: 1 }).start();
-+      Animated.spring(this.anim, { toValue: 1, useNativeDriver: false }).start();
-     } else {
-       this.anim.setValue(1);
-     }
-@@ -328,14 +329,14 @@ export default class ActionButton extends Component {
-     if (this.props.onReset) this.props.onReset();
-
-     if (animate) {
--      Animated.spring(this.anim, { toValue: 0 }).start();
-+      Animated.spring(this.anim, { toValue: 0, useNativeDriver: false }).start();
-     } else {
-       this.anim.setValue(0);
-     }
-
-     setTimeout(() => {
-       if (this.mounted) {
-         this.setState({ active: false, resetToken: this.state.resetToken });
-       }
-     }, 250);
-   }
-@@ -363,7 +364,7 @@ ActionButton.propTypes = {
-   bgColor: PropTypes.string,
-   bgOpacity: PropTypes.number,
-   buttonColor: PropTypes.string,
--  buttonTextStyle: Text.propTypes.style,
-+  buttonTextStyle: TextPropTypes.style,
-   buttonText: PropTypes.string,
-
-   offsetX: PropTypes.number,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 519a53900..471970a54 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,9 +31,6 @@ patchedDependencies:
   '@ptomasroos/react-native-multi-slider@1.0.0':
     hash: b5e11465e4305f5284e90a78fc4575401f791921f34dbbafb9831f19ecae94da
     path: patches/@ptomasroos+react-native-multi-slider+1.0.0.patch
-  react-native-action-button@2.8.5:
-    hash: 593bb64b27425a7f3805ad9567928d1369fd4cf939ab5d3eb43411a759565c48
-    path: patches/react-native-action-button+2.8.5.patch
   react-native-gesture-handler@2.30.0:
     hash: 10e538f7cf8a69122ef742c51cb8285f723512c9d8596d9bc6db6ebae0651573
     path: patches/react-native-gesture-handler+2.30.0.patch
@@ -511,12 +508,6 @@ importers:
       '@mendix/piw-utils-internal':
         specifier: '*'
         version: link:../../tools/piw-utils-internal
-      deprecated-react-native-prop-types:
-        specifier: ^4.0.0
-        version: 4.2.3
-      react-native-action-button:
-        specifier: ^2.8.5
-        version: 2.8.5(patch_hash=593bb64b27425a7f3805ad9567928d1369fd4cf939ab5d3eb43411a759565c48)(react-native@0.83.3(@babel/core@7.28.0)(@react-native-community/cli@14.1.0(typescript@5.9.3))(@types/react@19.2.14)(react@19.2.4))
     devDependencies:
       '@mendix/pluggable-widgets-tools':
         specifier: 11.8.0
@@ -6475,11 +6466,6 @@ packages:
   react-is@19.2.4:
     resolution: {integrity: sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==}
 
-  react-native-action-button@2.8.5:
-    resolution: {integrity: sha512-BvGZpzuGeuFR2Y6j93+vKiSqDhsF87VHvNXFs/qEYKfzT4b1ASAT/GQbgS6gNt4jRJCUnJWYrIwlBzRjesZQmQ==}
-    peerDependencies:
-      react-native: 0.83.3
-
   react-native-animatable@1.3.3:
     resolution: {integrity: sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==}
 
@@ -15100,11 +15086,6 @@ snapshots:
 
   react-is@19.2.4: {}
 
-  react-native-action-button@2.8.5(patch_hash=593bb64b27425a7f3805ad9567928d1369fd4cf939ab5d3eb43411a759565c48)(react-native@0.83.3(@babel/core@7.28.0)(@react-native-community/cli@14.1.0(typescript@5.9.3))(@types/react@19.2.14)(react@19.2.4)):
-    dependencies:
-      prop-types: 15.8.1
-      react-native: 0.83.3(@babel/core@7.28.0)(@react-native-community/cli@14.1.0(typescript@5.9.3))(@types/react@19.2.14)(react@19.2.4)
-
   react-native-animatable@1.3.3:
     dependencies:
       prop-types: 15.8.1