[MOO-1296]: Fix Icon Alignment in Floating Action Buttons (#123)

Author: UrazAkgultan

packages/pluggableWidgets/accordion-native/e2e/images/expected/android/30/pixel/Accordion should render custom icons correctly 1.png

@@ -6,11 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We have fixed an issue where icons within Floating Action Buttons were not properly centered.
+
 ## [4.0.1] - 2023-10-24
 
 ### Fixed
 
-- We have fixed an error related to useNativeDriver.
+-   We have fixed an error related to useNativeDriver.
 
 ## [4.0.0] - 2023-3-28
 

packages/pluggableWidgets/feedback-native/e2e/images/expected/ios/16.0/iPhone/Feedback widget should be able to submit a feedback item 2.png

@@ -1,7 +1,7 @@
 {
   "name": "floating-action-button-native",
   "widgetName": "FloatingActionButton",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md

@@ -62,10 +62,13 @@ export class FloatingActionButton extends Component<FloatingActionButtonProps<Fl
         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={[style, this.styles.buttonIconContainer]}>
-                <Icon icon={source} size={this.styles.buttonIcon.size} color={this.styles.buttonIcon.color} />
+            <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>
         );
     }

packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct appearance after toggling secondary buttons 1.png

@@ -6,6 +6,7 @@ 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>;
@@ -116,7 +117,7 @@ describe("FloatingActionButton", () => {
         );
         const transformStyle = [{ transform: [{ rotate: "-180deg" }] }];
 
-        const iconView = getByTestId("FloatingAction$IconView");
+        const iconView = getByTestId("FloatingAction$IconView").children[0] as ReactTestInstance;
         const iconComponent = iconView.findByType(Icon);
         expect(iconComponent.props.icon).toEqual(icon.value);
         expect(iconView.props.style).not.toEqual(expect.arrayContaining(transformStyle));