Chore/9630-UseDesignSystemSnackbarComponent

VAMobile/global.d.ts

@@ -19,25 +19,6 @@ declare module 'react-native-keyboard-manager' {
   export function setEnableAutoToolbar(arg: boolean): void
 }
 
-// this makes it posible to call the snackbar from outside react components and also types the data object
-type ToastOptions = import('react-native-toast-notifications/lib/typescript/toast').ToastOptions
-type ToastType = import('react-native-toast-notifications').ToastType
-
-type modifyToastOptions = Omit<ToastOptions, 'data'> & {
-  data?: {
-    onActionPressed?: () => void
-    isError?: boolean
-    actionBtnText?: string
-    isUndo?: boolean
-  }
-}
-
-type modifyToastType = Omit<ToastType, 'show'> & {
-  show: (message: string | JSX.Element, toastOptions?: modifyToastOptions | undefined) => string
-}
-
-declare var snackBar: modifyToastType
-
 declare var global: any
 
 declare var process: any

VAMobile/ios/Podfile.lock

@@ -1425,7 +1425,7 @@ PODS:
     - React-Core
   - react-native-safe-area-context (4.10.9):
     - React-Core
-  - react-native-webview (13.10.4):
+  - react-native-webview (13.12.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1742,7 +1742,7 @@ PODS:
     - RNFBApp
   - RNFileViewer (2.1.5):
     - React-Core
-  - RNGestureHandler (2.18.1):
+  - RNGestureHandler (2.21.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1763,9 +1763,28 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNKeychain (8.2.0):
+  - RNKeychain (9.1.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
-  - RNLocalize (3.2.1):
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNLocalize (3.3.0):
     - React-Core
   - RNReactNativeHapticFeedback (2.3.3):
     - DoubleConversion
@@ -2121,7 +2140,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 4cb898d0bf20404aab1850c656dcea009429d6c1
-  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
+  DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
   FBLazyVector: 7b438dceb9f904bd85ca3c31d64cce32a035472b
   Firebase: 10c8cb12fb7ad2ae0c09ffc86cd9c1ab392a0031
   FirebaseABTesting: d87f56707159bae64e269757a6e963d490f2eebe
@@ -2137,7 +2156,7 @@ SPEC CHECKSUMS:
   FirebaseSessions: dbd14adac65ce996228652c1fc3a3f576bdf3ecc
   FirebaseSharedSwift: 20530f495084b8d840f78a100d8c5ee613375f6e
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
   GoogleAppMeasurement: bb3c564c3efb933136af0e94899e0a46167466a8
   GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a
   GoogleUtilities: ea963c370a38a8069cc5f7ba4ca849a60b6d7d15
@@ -2184,7 +2203,7 @@ SPEC CHECKSUMS:
   react-native-image-picker: 2fbbafdae7a7c6db9d25df2f2b1db4442d2ca2ad
   react-native-notifications: 4601a5a8db4ced6ae7cfc43b44d35fe437ac50c4
   react-native-safe-area-context: ab8f4a3d8180913bd78ae75dd599c94cce3d5e9a
-  react-native-webview: fbafd1591cd068bd599f0d1afb0ddc19718908fa
+  react-native-webview: 926d2665cf3196e39c4449a72d136d0a53b9df8a
   React-nativeconfig: 4a9543185905fe41014c06776bf126083795aed9
   React-NativeModulesApple: 0506da59fc40d2e1e6e12a233db5e81c46face27
   React-perflogger: 3bbb82f18e9ac29a1a6931568e99d6305ef4403b
@@ -2221,17 +2240,17 @@ SPEC CHECKSUMS:
   RNFBPerf: 9cd7430cb90e4b8aebcd86312f1eb3aae28bd0e7
   RNFBRemoteConfig: bfb9f6a04a0269038a352d8386e5c77f4ff98125
   RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592
-  RNGestureHandler: 939f21fabf5d45a725c0bf175eb819dd25cf2e70
-  RNKeychain: bfe3d12bf4620fe488771c414530bf16e88f3678
-  RNLocalize: 4f22418187ecd5ca693231093ff1d912d1b3c9bc
+  RNGestureHandler: be97a346e113ca17a42658671b80e4f98b5e5d74
+  RNKeychain: 958a200b26c2df5036222105550290ac0ed98c90
+  RNLocalize: 298e85ce16540a11de40c1a588ead39fc5e9a072
   RNReactNativeHapticFeedback: 0d591ea1e150f36cb96d868d4e8d77272243d78a
   RNScreens: 19719a9c326e925498ac3b2d35c4e50fe87afc06
   RNSVG: 963a95f1f5d512a13d11ffd50d351c87fb5c6890
   SDWebImage: 8a6b7b160b4d710e2a22b6900e25301075c34cb3
   SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 1354c027ab07c7736f99a3bef16172d6f1b12b47
+  Yoga: 4ef80d96a5534f0e01b3055f17d1e19a9fc61b63
 
 PODFILE CHECKSUM: 528e5ac3a06c35c8645d8271610e36fdcca33735
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2

VAMobile/ios/VAMobile.xcodeproj/project.pbxproj

@@ -495,6 +495,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/SDWebImage/SDWebImage.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/react-native-blob-util/ReactNativeBlobUtilPrivacyInfo.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
@@ -512,6 +513,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SDWebImage.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ReactNativeBlobUtilPrivacyInfo.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -552,6 +554,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/SDWebImage/SDWebImage.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/react-native-blob-util/ReactNativeBlobUtilPrivacyInfo.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
@@ -569,6 +572,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SDWebImage.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ReactNativeBlobUtilPrivacyInfo.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;

VAMobile/jest/testSetup.ts

@@ -271,11 +271,6 @@ globalAny.FormData = () => ({
   append: jest.fn(),
 })
 
-globalAny.snackBar = {
-  show: jest.fn(),
-  hideAll: jest.fn(),
-}
-
 jest.mock('@react-native-firebase/perf', () => {
   return jest.fn(() => {
     return {

VAMobile/patches/@department-of-veterans-affairs+mobile-component-library+0.27.1.patch

@@ -0,0 +1,43 @@
+diff --git a/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbar.tsx b/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbar.tsx
+index 2e5c464..a696fa9 100644
+--- a/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbar.tsx
++++ b/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbar.tsx
+@@ -1,4 +1,4 @@
+-import { useContext } from 'react'
++import { useCallback, useContext, useMemo } from 'react'
+
+ import * as Toast from 'react-native-toast-notifications'
+
+@@ -22,9 +22,9 @@ export function useSnackbar() {
+     throw new Error('useSnackbar must be used within a SnackbarProvider')
+   }
+
+-  const show = (message: string, snackbarOptions?: SnackbarOptions) => {
+-    const { offset, setOffset } = context
++  const { offset, setOffset } = context
+
++  const show = useCallback((message: string, snackbarOptions?: SnackbarOptions) => {
+     const customOffset = snackbarOptions?.offset
+
+     // Custom offset if provided, else default
+@@ -43,11 +43,13 @@ export function useSnackbar() {
+
+     toast.hideAll()
+     toast.show(message, { data: snackbarOptions, duration })
+-  }
+-
+-  return {
+-    show,
+-    hide: toast.hideAll,
+-    isOpen: toast.isOpen,
+-  }
++  }, [defaultOffset, offset, screenReaderEnabled, setOffset, toast])
++
++  return useMemo(
++    () => ({
++      show,
++      hide: toast.hideAll,
++      isOpen: toast.isOpen,
++    }), [show, toast.hideAll, toast.isOpen]
++  )
+ }

VAMobile/src/App.tsx

@@ -6,9 +6,6 @@ import 'react-native-gesture-handler'
 import KeyboardManager from 'react-native-keyboard-manager'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { enableScreens } from 'react-native-screens'
-import Toast from 'react-native-toast-notifications'
-import ToastContainer from 'react-native-toast-notifications'
-import { ToastProps } from 'react-native-toast-notifications/lib/typescript/toast'
 import { Provider, useSelector } from 'react-redux'
 
 import analytics from '@react-native-firebase/analytics'
@@ -19,16 +16,15 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 
+import { SnackbarProvider } from '@department-of-veterans-affairs/mobile-component-library'
 import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { ThemeProvider } from 'styled-components'
 
 import queryClient from 'api/queryClient'
 import { ClaimData } from 'api/types'
 import { NavigationTabBar } from 'components'
-import SnackBar from 'components/SnackBar'
-import { CloseSnackbarOnNavigation, EnvironmentTypesConstants } from 'constants/common'
-import { SnackBarConstants } from 'constants/common'
+import { EnvironmentTypesConstants } from 'constants/common'
 import { linking } from 'constants/linking'
 import { NAMESPACE } from 'constants/namespaces'
 import { FULLSCREEN_SUBTASK_OPTIONS, LARGE_PANEL_OPTIONS } from 'constants/screens'
@@ -60,7 +56,6 @@ import {
   sendUsesScreenReaderAnalytics,
 } from 'store/slices/accessibilitySlice'
 import { fetchAndActivateRemoteConfig } from 'store/slices/settingsSlice'
-import { SnackBarState } from 'store/slices/snackBarSlice'
 import { useColorScheme } from 'styles/themes/colorScheme'
 import theme, { getTheme, setColorScheme } from 'styles/themes/standardTheme'
 import getEnv from 'utils/env'
@@ -186,7 +181,9 @@ function MainApp() {
                         barStyle={theme.mode === 'dark' ? 'light-content' : 'dark-content'}
                         backgroundColor={currentTheme.colors.background.main}
                       />
-                      <AuthGuard />
+                      <SnackbarProvider>
+                        <AuthGuard />
+                      </SnackbarProvider>
                     </SafeAreaProvider>
                   </NotificationManager>
                 </NavigationContainer>
@@ -217,7 +214,6 @@ export function AuthGuard() {
   const { fontScale, isVoiceOverTalkBackRunning } = useSelector<RootState, AccessibilityState>(
     (state) => state.accessibility,
   )
-  const { bottomOffset } = useSelector<RootState, SnackBarState>((state) => state.snackBar)
   const { firebaseDebugMode } = useSelector<RootState, AnalyticsState>((state) => state.analytics)
   const { t } = useTranslation(NAMESPACE.COMMON)
   const headerStyles = useHeaderStyles()
@@ -228,14 +224,6 @@ export function AuthGuard() {
   const fontScaleFunction = useFontScale()
   const sendUsesLargeTextScal = fontScaleFunction(30)
 
-  const snackBarProps: Partial<ToastProps> = {
-    duration: SnackBarConstants.duration,
-    animationDuration: SnackBarConstants.animationDuration,
-    renderType: {
-      custom_snackbar: (toast) => <SnackBar {...toast} />,
-    },
-    swipeEnabled: false,
-  }
   useEffect(() => {
     // Listener for the current app state, updates the font scale when app state is active and the font scale has changed
     const sub = AppState.addEventListener('change', (newState: AppStateStatus): void =>
@@ -380,16 +368,7 @@ export function AuthGuard() {
       </Stack.Navigator>
     )
   } else if (loggedIn) {
-    content = (
-      <>
-        <AuthedApp />
-        <Toast
-          {...snackBarProps}
-          ref={(ref) => ((global.snackBar as ToastContainer | null) = ref)}
-          offsetBottom={bottomOffset}
-        />
-      </>
-    )
+    content = <AuthedApp />
   } else {
     content = (
       <Stack.Navigator screenOptions={headerStyles} initialRouteName="Login">
@@ -444,19 +423,7 @@ export function AuthedApp() {
 
   return (
     <>
-      <RootNavStack.Navigator
-        screenOptions={{ ...headerStyles, detachPreviousScreen: false }}
-        initialRouteName="Tabs"
-        screenListeners={{
-          transitionStart: (e) => {
-            if (e.data.closing) {
-              CloseSnackbarOnNavigation(e.target)
-            }
-          },
-          blur: (e) => {
-            CloseSnackbarOnNavigation(e.target)
-          },
-        }}>
+      <RootNavStack.Navigator screenOptions={{ ...headerStyles, detachPreviousScreen: false }} initialRouteName="Tabs">
         <RootNavStack.Screen
           name="Tabs"
           component={AppTabs}

VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
-import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
+import { Icon, useSnackbar } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { Box, BoxProps, TextView, TextViewProps, VAScrollView } from 'components'
 import { VAIconProps } from 'components/VAIcon'
@@ -103,6 +103,7 @@ const VAModalPicker: FC<VAModalPickerProps> = ({
   cancelTestID,
   confirmTestID,
 }) => {
+  const snackbar = useSnackbar()
   const [modalVisible, setModalVisible] = useState(false)
   const theme = useTheme()
   const { t } = useTranslation()
@@ -121,12 +122,9 @@ const VAModalPicker: FC<VAModalPickerProps> = ({
     if (!disabled) {
       setIsFocused(true)
       setModalVisible(true)
-      if (!snackBar) {
-        logAnalyticsEvent(Events.vama_snackbar_null('VAModalPicker'))
-      }
-      snackBar?.hideAll()
+      snackbar.hide()
     }
-  }, [disabled, labelKey, testID, t])
+  }, [disabled, labelKey, snackbar, testID, t])
 
   useEffect(() => {
     showModalByDefault && showModal()