Use flash message instead of toast

package.json

@@ -69,6 +69,7 @@
     "react-native-blurhash": "^1.0.29",
     "react-native-fast-image": "^8.3.4",
     "react-native-feather": "^1.0.2",
+    "react-native-flash-message": "^0.1.23",
     "react-native-gesture-handler": "~1.9.0",
     "react-native-htmlview": "^0.16.0",
     "react-native-reanimated": "^2.0.0-rc.2",
@@ -78,7 +79,6 @@
     "react-native-swipe-list-view": "^3.2.6",
     "react-native-tab-view": "^2.15.2",
     "react-native-tab-view-viewpager-adapter": "^1.1.0",
-    "react-native-toast-message": "^1.4.3",
     "react-native-unimodules": "~0.12.0",
     "react-query": "^3.12.0",
     "react-redux": "^7.2.2",

src/Screens.tsx

@@ -1,4 +1,4 @@
-import { toast, toastConfig } from '@components/toast'
+import { displayMessage, Message } from '@components/Message'
 import {
   NavigationContainer,
   NavigationContainerRef
@@ -20,7 +20,6 @@ import React, { createRef, useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Platform, StatusBar } from 'react-native'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
-import Toast from 'react-native-toast-message'
 import { useDispatch, useSelector } from 'react-redux'
 import * as Sentry from 'sentry-expo'
 
@@ -77,11 +76,12 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
   useEffect(() => {
     const showLocalCorrect = () => {
       if (localCorrupt) {
-        toast({
+        displayMessage({
-          type: 'error',
+          autoHide: false,
           message: t('index.localCorrupt'),
           description: localCorrupt.length ? localCorrupt : undefined,
-          autoHide: false
+          type: 'error',
+          mode
         })
         navigationRef.current?.navigate('Screen-Tabs', {
           screen: 'Tab-Me'
@@ -178,9 +178,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
           />
         </Stack.Navigator>
 
-        {Platform.select({
+        <Message />
-          ios: <Toast ref={Toast.setRef} config={toastConfig} />
-        })}
       </NavigationContainer>
     </>
   )

src/components/Message.tsx

@@ -0,0 +1,100 @@
+import Icon from '@components/Icon'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import { getTheme } from '@utils/styles/themes'
+import React from 'react'
+import FlashMessage, { showMessage } from 'react-native-flash-message'
+import haptics from './haptics'
+
+const displayMessage = ({
+  autoHide = true,
+  message,
+  description,
+  onPress,
+  mode,
+  type
+}:
+  | {
+      autoHide?: boolean
+      message: string
+      description?: string
+      onPress?: () => void
+      mode?: undefined
+      type?: undefined
+    }
+  | {
+      autoHide?: boolean
+      message: string
+      description?: string
+      onPress?: () => void
+      mode: 'light' | 'dark'
+      type: 'success' | 'error' | 'warning'
+    }) => {
+  enum iconMapping {
+    success = 'CheckCircle',
+    error = 'XCircle',
+    warning = 'AlertCircle'
+  }
+  enum colorMapping {
+    success = 'blue',
+    error = 'red',
+    warning = 'secondary'
+  }
+
+  if (type && type === 'error') {
+    haptics('Error')
+  }
+
+  showMessage({
+    autoHide,
+    message,
+    description,
+    onPress,
+    ...(mode &&
+      type && {
+        renderFlashMessageIcon: props => {
+          console.log(props)
+          return (
+            <Icon
+              name={iconMapping[type]}
+              size={StyleConstants.Font.LineHeight.M}
+              color={getTheme(mode)[colorMapping[type]]}
+              style={{ marginRight: StyleConstants.Spacing.S }}
+            />
+          )
+        }
+      })
+  })
+}
+
+const Message = React.memo(
+  () => {
+    const { mode, theme } = useTheme()
+
+    return (
+      <FlashMessage
+        icon='auto'
+        position='top'
+        floating
+        style={{
+          backgroundColor: theme.background,
+          shadowColor: theme.primary,
+          shadowOffset: { width: 0, height: 0 },
+          shadowOpacity: mode === 'light' ? 0.16 : 0.32,
+          shadowRadius: 4
+        }}
+        titleStyle={{
+          color: theme.primary,
+          ...StyleConstants.FontStyle.M,
+          fontWeight: StyleConstants.Font.Weight.Bold
+        }}
+        textStyle={{ color: theme.primary, ...StyleConstants.FontStyle.M }}
+        // @ts-ignore
+        textProps={{ numberOfLines: 2 }}
+      />
+    )
+  },
+  () => true
+)
+
+export { Message, displayMessage }

src/components/Relationship/Incoming.tsx

@@ -1,13 +1,14 @@
 import analytics from '@components/analytics'
 import Button from '@components/Button'
 import haptics from '@components/haptics'
-import { toast } from '@components/toast'
+import { displayMessage } from '@components/Message'
 import {
   QueryKeyRelationship,
   useRelationshipMutation
 } from '@utils/queryHooks/relationship'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'
@@ -18,6 +19,7 @@ export interface Props {
 }
 
 const RelationshipIncoming: React.FC<Props> = ({ id }) => {
+  const { mode } = useTheme()
   const { t } = useTranslation()
 
   const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id }]
@@ -36,8 +38,9 @@ const RelationshipIncoming: React.FC<Props> = ({ id }) => {
     },
     onError: (err: any, { type }) => {
       haptics('Error')
-      toast({
+      displayMessage({
         type: 'error',
+        mode,
         message: t('common:toastMessage.error.message', {
           function: t(`relationship:${type}.function`)
         }),

src/components/Relationship/Outgoing.tsx

@@ -1,13 +1,14 @@
 import analytics from '@components/analytics'
 import Button from '@components/Button'
 import haptics from '@components/haptics'
-import { toast } from '@components/toast'
+import { displayMessage } from '@components/Message'
 import {
   QueryKeyRelationship,
   useRelationshipMutation,
   useRelationshipQuery
 } from '@utils/queryHooks/relationship'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
@@ -18,6 +19,7 @@ export interface Props {
 
 const RelationshipOutgoing = React.memo(
   ({ id }: Props) => {
+    const { mode } = useTheme()
     const { t } = useTranslation('componentRelationship')
 
     const query = useRelationshipQuery({ id })
@@ -37,8 +39,8 @@ const RelationshipOutgoing = React.memo(
         }
       },
       onError: (err: any, { payload: { action } }) => {
-        haptics('Error')
+        displayMessage({
-        toast({
+          mode,
           type: 'error',
           message: t('common:toastMessage.error.message', {
             function: t(`${action}.function`)

src/components/Timeline/Shared/Actions.tsx

@@ -1,7 +1,6 @@
 import analytics from '@components/analytics'
-import haptics from '@components/haptics'
 import Icon from '@components/Icon'
-import { toast } from '@components/toast'
+import { displayMessage } from '@components/Message'
 import { useNavigation } from '@react-navigation/native'
 import {
   MutationVarsTimelineUpdateStatusProperty,
@@ -32,7 +31,7 @@ const TimelineActions: React.FC<Props> = ({
 }) => {
   const navigation = useNavigation()
   const { t } = useTranslation('componentTimeline')
-  const { theme } = useTheme()
+  const { mode, theme } = useTheme()
   const iconColor = theme.secondary
   const iconColorAction = (state: boolean) =>
     state ? theme.primary : theme.secondary
@@ -84,8 +83,8 @@ const TimelineActions: React.FC<Props> = ({
     },
     onError: (err: any, params, oldData) => {
       const correctParam = params as MutationVarsTimelineUpdateStatusProperty
-      haptics('Error')
+      displayMessage({
-      toast({
+        mode,
         type: 'error',
         message: t('common:toastMessage.error.message', {
           function: t(

src/components/Timeline/Shared/HeaderConversation.tsx

@@ -1,8 +1,7 @@
 import analytics from '@components/analytics'
-import haptics from '@components/haptics'
 import Icon from '@components/Icon'
+import { displayMessage } from '@components/Message'
 import { ParseEmojis } from '@components/Parse'
-import { toast } from '@components/toast'
 import {
   QueryKeyTimeline,
   useTimelineMutation
@@ -46,6 +45,7 @@ export interface Props {
 
 const HeaderConversation = React.memo(
   ({ queryKey, conversation }: Props) => {
+    const { mode } = useTheme()
     const { t } = useTranslation('componentTimeline')
 
     const queryClient = useQueryClient()
@@ -53,8 +53,8 @@ const HeaderConversation = React.memo(
       queryClient,
       onMutate: true,
       onError: (err: any, _, oldData) => {
-        haptics('Error')
+        displayMessage({
-        toast({
+          mode,
           type: 'error',
           message: t('common:toastMessage.error.message', {
             function: t(`shared.header.conversation.delete.function`)
@@ -65,8 +65,7 @@ const HeaderConversation = React.memo(
             err.data.error &&
             typeof err.data.error === 'string' && {
               description: err.data.error
-            }),
+            })
-          autoHide: false
         })
         queryClient.setQueryData(queryKey, oldData)
       }

src/components/Timeline/Shared/Poll.tsx

@@ -2,9 +2,9 @@ import analytics from '@components/analytics'
 import Button from '@components/Button'
 import haptics from '@components/haptics'
 import Icon from '@components/Icon'
+import { displayMessage } from '@components/Message'
 import { ParseEmojis } from '@components/Parse'
 import RelativeTime from '@components/RelativeTime'
-import { toast } from '@components/toast'
 import {
   MutationVarsTimelineUpdateStatusProperty,
   QueryKeyTimeline,
@@ -61,8 +61,8 @@ const TimelinePoll: React.FC<Props> = ({
     },
     onError: (err: any, params) => {
       const theParams = params as MutationVarsTimelineUpdateStatusProperty
-      haptics('Error')
+      displayMessage({
-      toast({
+        mode,
         type: 'error',
         message: t('common:toastMessage.error.message', {
           // @ts-ignore

src/components/toast.tsx

@@ -1,134 +0,0 @@
-import Icon from '@components/Icon'
-import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@utils/styles/ThemeManager'
-import React from 'react'
-import { Platform, StyleSheet, Text, ToastAndroid, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import Toast from 'react-native-toast-message'
-
-export interface Params {
-  type: 'success' | 'error' | 'warning'
-  position?: 'top' | 'bottom'
-  message: string
-  description?: string
-  autoHide?: boolean
-  onShow?: () => void
-  onHide?: () => void
-}
-
-type Config = {
-  type: Params['type']
-  position: Params['position']
-  text1: Params['message']
-  text2: Params['description']
-}
-
-const toast = ({
-  type,
-  position = 'top',
-  message,
-  description,
-  autoHide = true,
-  onShow,
-  onHide
-}: Params) => {
-  switch (Platform.OS) {
-    case 'ios':
-      return Toast.show({
-        type,
-        position,
-        text1: message,
-        text2: description,
-        visibilityTime: 1500,
-        autoHide,
-        topOffset: 0,
-        bottomOffset: 0,
-        onShow: onShow,
-        onHide: onHide
-      })
-    case 'android':
-      return ToastAndroid.show(message, ToastAndroid.SHORT)
-  }
-}
-
-const ToastBase = ({ config }: { config: Config }) => {
-  const { theme } = useTheme()
-  const iconSet = {
-    success: 'CheckCircle',
-    error: 'XCircle',
-    warning: 'AlertCircle'
-  }
-  enum colorMapping {
-    success = 'blue',
-    error = 'red',
-    warning = 'secondary'
-  }
-
-  return (
-    <SafeAreaView
-      style={[
-        styles.base,
-        { backgroundColor: theme.background, borderBottomColor: theme.primary }
-      ]}
-    >
-      <View style={styles.container}>
-        <Icon
-          name={iconSet[config.type]}
-          size={StyleConstants.Font.Size.M}
-          color={theme[colorMapping[config.type]]}
-        />
-        <View style={styles.texts}>
-          <Text
-            style={[styles.text1, { color: theme.primary }]}
-            numberOfLines={2}
-          >
-            {config.text1}
-          </Text>
-          {config.text2 && (
-            <Text
-              style={[styles.text2, { color: theme.secondary }]}
-              numberOfLines={2}
-            >
-              {config.text2}
-            </Text>
-          )}
-        </View>
-      </View>
-    </SafeAreaView>
-  )
-}
-
-const toastConfig = {
-  success: (config: Config) => <ToastBase config={config} />,
-  warning: (config: Config) => <ToastBase config={config} />,
-  error: (config: Config) => {
-    // Sentry.Native.captureException([config.text1, config.text2])
-    return <ToastBase config={config} />
-  }
-}
-
-const styles = StyleSheet.create({
-  base: {
-    width: '100%',
-    borderBottomWidth: 1
-  },
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: StyleConstants.Spacing.M
-  },
-  texts: {
-    marginLeft: StyleConstants.Spacing.S
-  },
-  text1: {
-    ...StyleConstants.FontStyle.M
-  },
-  text2: {
-    ...StyleConstants.FontStyle.S,
-    marginTop: StyleConstants.Spacing.XS
-  }
-})
-
-export { toast, toastConfig }

src/screens/Actions/Account.tsx

@@ -1,12 +1,12 @@
 import analytics from '@components/analytics'
-import haptics from '@components/haptics'
 import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu'
-import { toast } from '@components/toast'
+import { displayMessage } from '@components/Message'
 import {
   MutationVarsTimelineUpdateAccountProperty,
   QueryKeyTimeline,
   useTimelineMutation
 } from '@utils/queryHooks/timeline'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
@@ -24,6 +24,7 @@ const ActionsAccount: React.FC<Props> = ({
   account,
   dismiss
 }) => {
+  const { mode } = useTheme()
   const { t } = useTranslation('componentTimeline')
 
   const queryClient = useQueryClient()
@@ -31,8 +32,8 @@ const ActionsAccount: React.FC<Props> = ({
     queryClient,
     onSuccess: (_, params) => {
       const theParams = params as MutationVarsTimelineUpdateAccountProperty
-      haptics('Success')
+      displayMessage({
-      toast({
+        mode,
         type: 'success',
         message: t('common:toastMessage.success.message', {
           function: t(
@@ -46,8 +47,8 @@ const ActionsAccount: React.FC<Props> = ({
     },
     onError: (err: any, params) => {
       const theParams = params as MutationVarsTimelineUpdateAccountProperty
-      haptics('Error')
+      displayMessage({
-      toast({
+        mode,
         type: 'error',
         message: t('common:toastMessage.error.message', {
           function: t(

src/screens/Actions/Domain.tsx

@@ -2,11 +2,12 @@ import analytics from '@components/analytics'
 import MenuContainer from '@components/Menu/Container'
 import MenuHeader from '@components/Menu/Header'
 import MenuRow from '@components/Menu/Row'
-import { toast } from '@components/toast'
+import { displayMessage } from '@components/Message'
 import {
   QueryKeyTimeline,
   useTimelineMutation
 } from '@utils/queryHooks/timeline'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert } from 'react-native'
@@ -25,12 +26,14 @@ const ActionsDomain: React.FC<Props> = ({
   domain,
   dismiss
 }) => {
+  const { mode } = useTheme()
   const { t } = useTranslation('componentTimeline')
   const queryClient = useQueryClient()
   const mutation = useTimelineMutation({
     queryClient,
     onSettled: () => {
-      toast({
+      displayMessage({
+        mode,
         type: 'success',
         message: t('common:toastMessage.success.message', {
           function: t(`shared.header.actions.domain.block.function`)

src/screens/Actions/Status.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import { Alert } from 'react-native'
 import { useQueryClient } from 'react-query'
 import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu'
-import { toast } from '@components/toast'
 import {
   MutationVarsTimelineUpdateStatusProperty,
   QueryKeyTimeline,
@@ -12,6 +11,8 @@ import {
 import analytics from '@components/analytics'
 import { StackNavigationProp } from '@react-navigation/stack'
 import deleteItem from '@utils/queryHooks/timeline/deleteItem'
+import { displayMessage } from '@components/Message'
+import { useTheme } from '@utils/styles/ThemeManager'
 
 export interface Props {
   navigation: StackNavigationProp<Nav.RootStackParamList, 'Screen-Actions'>
@@ -28,6 +29,7 @@ const ActionsStatus: React.FC<Props> = ({
   status,
   dismiss
 }) => {
+  const { mode } = useTheme()
   const { t } = useTranslation('componentTimeline')
 
   const queryClient = useQueryClient()
@@ -39,7 +41,8 @@ const ActionsStatus: React.FC<Props> = ({
         .payload
         ? (params as MutationVarsTimelineUpdateStatusProperty).payload.property
         : 'delete'
-      toast({
+      displayMessage({
+        mode,
         type: 'error',
         message: t('common:toastMessage.error.message', {
           function: t(`shared.header.actions.status.${theFunction}.function`)

yarn.lock

@@ -4318,13 +4318,6 @@ escodegen@^1.11.1, escodegen@^1.14.1:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-plugin-prettier@^3.2.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz#7079cfa2497078905011e6f82e8dd8453d1371b7"
-  integrity sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==
-  dependencies:
-    prettier-linter-helpers "^1.0.0"
-
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -4826,11 +4819,6 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
-  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
-
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -8448,13 +8436,6 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-prettier-linter-helpers@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
-  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
-  dependencies:
-    fast-diff "^1.1.2"
-
 pretty-format@^24.0.0, pretty-format@^24.7.0, pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
@@ -8677,6 +8658,14 @@ react-native-feather@^1.0.2:
   resolved "https://registry.yarnpkg.com/react-native-feather/-/react-native-feather-1.0.2.tgz#9b02a32f313088084da5ebb0130659fa582edf43"
   integrity sha512-SxMCMyGQeDtZtl2mhssoFTsfFKh/eH6S11+720BPGYYXz1iaYwQ4G/xqFxWOvQOQK2qtOTvkFOBlabbKwBMuhQ==
 
+react-native-flash-message@^0.1.23:
+  version "0.1.23"
+  resolved "https://registry.yarnpkg.com/react-native-flash-message/-/react-native-flash-message-0.1.23.tgz#50a17201a2d9d6b22a2f174a97b22c30bff15638"
+  integrity sha512-T++KNGpIofXRqj3fT+/zJH/su1VgIjGcwiJerSvRsvEXwai1LdUl+O0tX7dz+Lgxi7yzswXKWcUQmY0dZrbG3g==
+  dependencies:
+    prop-types "^15.7.2"
+    react-native-iphone-x-helper "^1.3.0"
+
 react-native-gesture-handler@~1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.9.0.tgz#e441b1c0277c3fd4ca3e5c58fdd681e2f0ceddf0"
@@ -8750,14 +8739,6 @@ react-native-tab-view@^2.15.2:
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz#4bc7832d33a119306614efee667509672a7ee64e"
   integrity sha512-2hxLkBnZtEKFDyfvNO5EUywhy3f/EiLOBO8SWqKj4BMBTO0QwnybaPE5MVF00Fhz+VA4+h/iI40Dkrrtq70dGg==
 
-react-native-toast-message@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/react-native-toast-message/-/react-native-toast-message-1.4.3.tgz#7cbbb942071bb216b760ba5bb7a9b996baf874e0"
-  integrity sha512-0LG3bMO3TfjntwVt7O4Dr0zzAZDbtkEe5Lg1jGR1Mevm0KGKnr57DCVZYPsu6cCc1iAk9whyc+iTKbKUz/ko7A==
-  dependencies:
-    eslint-plugin-prettier "^3.2.0"
-    prop-types "^15.7.2"
-
 react-native-unimodules@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/react-native-unimodules/-/react-native-unimodules-0.12.0.tgz#f1c92eae92212ca44078c0991c78fa4d13fda0f8"