[NoQA] Revert: Migrate Icon/index.js and FloatingActionButton to function component

ios/Podfile.lock

@@ -777,10 +777,35 @@ PODS:
     - React-Core
   - RNReactNativeHapticFeedback (1.14.0):
     - React-Core
-  - RNReanimated (3.6.1):
-    - RCT-Folly (= 2021.07.22.00)
+  - RNReanimated (3.5.4):
+    - DoubleConversion
+    - FBLazyVector
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
     - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTAppDelegate
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
     - ReactCommon/turbomodule/core
+    - Yoga
   - RNScreens (3.21.0):
     - React-Core
     - React-RCTImage
@@ -1255,7 +1280,7 @@ SPEC CHECKSUMS:
   rnmapbox-maps: 6f638ec002aa6e906a6f766d69cd45f968d98e64
   RNPermissions: 9b086c8f05b2e2faa587fdc31f4c5ab4509728aa
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
-  RNReanimated: fdbaa9c964bbab7fac50c90862b6cc5f041679b9
+  RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87
   RNScreens: d037903436160a4b039d32606668350d2a808806
   RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d

package.json

@@ -148,7 +148,7 @@
     "react-native-plaid-link-sdk": "10.8.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
-    "react-native-reanimated": "^3.6.1",
+    "react-native-reanimated": "3.5.4",
     "react-native-render-html": "6.3.1",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "3.21.0",

src/components/FloatingActionButton.js

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import React, {PureComponent} from 'react';
+import {Animated, Easing, View} from 'react-native';
+import compose from '@libs/compose';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import Tooltip from './Tooltip/PopoverAnchorTooltip';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import withStyleUtils, {withStyleUtilsPropTypes} from './withStyleUtils';
+import withTheme, {withThemePropTypes} from './withTheme';
+import withThemeStyles, {withThemeStylesPropTypes} from './withThemeStyles';
+
+const AnimatedIcon = Animated.createAnimatedComponent(Icon);
+AnimatedIcon.displayName = 'AnimatedIcon';
+
+const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback);
+AnimatedPressable.displayName = 'AnimatedPressable';
+
+const propTypes = {
+    // Callback to fire on request to toggle the FloatingActionButton
+    onPress: PropTypes.func.isRequired,
+
+    // Current state (active or not active) of the component
+    isActive: PropTypes.bool.isRequired,
+
+    // Ref for the button
+    buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+    ...withLocalizePropTypes,
+    ...withThemePropTypes,
+    ...withThemeStylesPropTypes,
+    ...withStyleUtilsPropTypes,
+};
+
+const defaultProps = {
+    buttonRef: () => {},
+};
+
+class FloatingActionButton extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.animatedValue = new Animated.Value(props.isActive ? 1 : 0);
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.isActive === this.props.isActive) {
+            return;
+        }
+
+        this.animateFloatingActionButton();
+    }
+
+    /**
+     * Animates the floating action button
+     * Method is called when the isActive prop changes
+     */
+    animateFloatingActionButton() {
+        const animationFinalValue = this.props.isActive ? 1 : 0;
+
+        Animated.timing(this.animatedValue, {
+            toValue: animationFinalValue,
+            duration: 340,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: false,
+        }).start();
+    }
+
+    render() {
+        const rotate = this.animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0deg', '135deg'],
+        });
+
+        const backgroundColor = this.animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [this.props.theme.success, this.props.theme.buttonDefaultBG],
+        });
+
+        const fill = this.animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [this.props.theme.textLight, this.props.theme.textDark],
+        });
+
+        return (
+            <Tooltip text={this.props.translate('common.new')}>
+                <View style={this.props.themeStyles.floatingActionButtonContainer}>
+                    <AnimatedPressable
+                        ref={(el) => {
+                            this.fabPressable = el;
+                            if (this.props.buttonRef) {
+                                this.props.buttonRef.current = el;
+                            }
+                        }}
+                        accessibilityLabel={this.props.accessibilityLabel}
+                        role={this.props.role}
+                        pressDimmingValue={1}
+                        onPress={(e) => {
+                            // Drop focus to avoid blue focus ring.
+                            this.fabPressable.blur();
+                            this.props.onPress(e);
+                        }}
+                        onLongPress={() => {}}
+                        style={[this.props.themeStyles.floatingActionButton, this.props.StyleUtils.getAnimatedFABStyle(rotate, backgroundColor)]}
+                    >
+                        <AnimatedIcon
+                            src={Expensicons.Plus}
+                            fill={fill}
+                        />
+                    </AnimatedPressable>
+                </View>
+            </Tooltip>
+        );
+    }
+}
+
+FloatingActionButton.propTypes = propTypes;
+FloatingActionButton.defaultProps = defaultProps;
+
+const FloatingActionButtonWithLocalize = withLocalize(FloatingActionButton);
+
+const FloatingActionButtonWithLocalizeWithRef = React.forwardRef((props, ref) => (
+    <FloatingActionButtonWithLocalize
+        // eslint-disable-next-line
+        {...props}
+        buttonRef={ref}
+    />
+));
+
+FloatingActionButtonWithLocalizeWithRef.displayName = 'FloatingActionButtonWithLocalizeWithRef';
+
+export default compose(withThemeStyles, withTheme, withStyleUtils)(FloatingActionButtonWithLocalizeWithRef);