[TS migration] Migrate 'GrowlNotification' component to TypeScript

src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {Animated} from 'react-native';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import GrowlNotificationContainerProps from './types';
+
+function GrowlNotificationContainer({children, translateY}: GrowlNotificationContainerProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const insets = useSafeAreaInsets();
+
+    return <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(translateY)]}>{children}</Animated.View>;
+}
+
+GrowlNotificationContainer.displayName = 'GrowlNotificationContainer';
+
+export default GrowlNotificationContainer;

src/components/GrowlNotification/GrowlNotificationContainer/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {Animated} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import GrowlNotificationContainerProps from './types';
+
+function GrowlNotificationContainer({children, translateY}: GrowlNotificationContainerProps) {
+    const styles = useThemeStyles();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    return (
+        <Animated.View
+            style={[styles.growlNotificationContainer, styles.growlNotificationDesktopContainer, styles.growlNotificationTranslateY(translateY), isSmallScreenWidth && styles.mwn]}
+        >
+            {children}
+        </Animated.View>
+    );
+}
+
+GrowlNotificationContainer.displayName = 'GrowlNotificationContainer';
+
+export default GrowlNotificationContainer;

src/components/GrowlNotification/GrowlNotificationContainer/types.ts

@@ -0,0 +1,8 @@
+import {Animated} from 'react-native';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type GrowlNotificationContainerProps = ChildrenProps & {
+    translateY: Animated.Value;
+};
+
+export default GrowlNotificationContainerProps;

src/components/GrowlNotification/index.js → src/components/GrowlNotification/index.tsx

@@ -1,13 +1,15 @@
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import React, {ForwardedRef, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {Animated, View} from 'react-native';
 import {Directions, FlingGestureHandler, State} from 'react-native-gesture-handler';
+import {SvgProps} from 'react-native-svg';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Pressables from '@components/Pressable';
 import Text from '@components/Text';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Growl from '@libs/Growl';
+import type {GrowlRef} from '@libs/Growl';
 import useNativeDriver from '@libs/useNativeDriver';
 import CONST from '@src/CONST';
 import GrowlNotificationContainer from './GrowlNotificationContainer';
@@ -16,15 +18,27 @@ const INACTIVE_POSITION_Y = -255;
 
 const PressableWithoutFeedback = Pressables.PressableWithoutFeedback;
 
-function GrowlNotification(_, ref) {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function GrowlNotification(_: unknown, ref: ForwardedRef<GrowlRef>) {
     const translateY = useRef(new Animated.Value(INACTIVE_POSITION_Y)).current;
     const [bodyText, setBodyText] = useState('');
     const [type, setType] = useState('success');
-    const [duration, setDuration] = useState();
+    const [duration, setDuration] = useState<number | undefined>();
     const theme = useTheme();
     const styles = useThemeStyles();
 
-    const types = {
+    type GrowlIconTypes = Record<
+        string,
+        {
+            /** Expensicon for the page */
+            icon: React.FC<SvgProps>;
+
+            /** Color for the icon (should be from theme) */
+            iconColor: string;
+        }
+    >;
+
+    const types: GrowlIconTypes = {
         [CONST.GROWL.SUCCESS]: {
             icon: Expensicons.Checkmark,
             iconColor: theme.success,
@@ -46,7 +60,7 @@ function GrowlNotification(_, ref) {
      * @param {String} type
      * @param {Number} duration
      */
-    const show = useCallback((text, growlType, growlDuration) => {
+    const show = useCallback((text: string, growlType: string, growlDuration: number) => {
         setBodyText(text);
         setType(growlType);
         setDuration(growlDuration);
@@ -58,13 +72,11 @@ function GrowlNotification(_, ref) {
      * @param {Number} val
      */
     const fling = useCallback(
-        (val = INACTIVE_POSITION_Y) => {
+        (val = INACTIVE_POSITION_Y) =>
             Animated.spring(translateY, {
                 toValue: val,
-                duration: 80,
                 useNativeDriver,
-            }).start();
-        },
+            }).start(),
         [translateY],
     );
 

src/libs/Growl.ts

@@ -50,4 +50,6 @@ export default {
     success,
 };
 
+export type {GrowlRef};
+
 export {growlRef, setIsReady};