feat: mobile app package (#1075)

packages/mobile/src/Components/ToastWrapper.tsx

@@ -0,0 +1,53 @@
+import { useToastStyles } from '@Components/ToastWrapper.styled'
+import { useProgressBar } from '@Root/Hooks/useProgessBar'
+import React, { FC, useContext } from 'react'
+import { Animated, StyleSheet, View } from 'react-native'
+import Toast, { ErrorToast, InfoToast, SuccessToast, ToastConfig } from 'react-native-toast-message'
+import { ThemeContext } from 'styled-components'
+
+export const ToastWrapper: FC = () => {
+  const theme = useContext(ThemeContext)
+  const styles = useToastStyles(theme)
+
+  const { updateProgressBar, progressBarWidth } = useProgressBar()
+
+  const toastStyles: ToastConfig = {
+    info: props => {
+      const percentComplete = props.props?.percentComplete || 0
+      updateProgressBar(percentComplete)
+
+      return (
+        <View>
+          <InfoToast {...props} style={styles(props.props).info} />
+          {props.props?.percentComplete !== undefined ? (
+            <View style={[styles(props.props).animatedViewContainer]}>
+              <Animated.View
+                style={[
+                  StyleSheet.absoluteFill,
+                  {
+                    ...styles(props.props).animatedView,
+                    width: progressBarWidth,
+                  },
+                ]}
+              />
+            </View>
+          ) : null}
+        </View>
+      )
+    },
+    success: props => {
+      const percentComplete = props.props?.percentComplete || 0
+      updateProgressBar(percentComplete)
+
+      return <SuccessToast {...props} style={styles(props.props).success} />
+    },
+    error: props => {
+      const percentComplete = props.props?.percentComplete || 0
+      updateProgressBar(percentComplete)
+
+      return <ErrorToast {...props} style={styles(props.props).error} />
+    },
+  }
+
+  return <Toast config={toastStyles} />
+}