NativeBase Toast is placed out of position every time I call this.

Description

Toast is placed out of position every time I call this.

CodeSandbox/Snack link

I am sorry. I don't have it.

Steps to reproduce

Create custom Toast like below.

export const useCustomToastHook = () => {
  const toast = useToast()
  const id = 'result'

  const showToast = ({ variant, message }: ShowToastProps) => {
    const styleMap: StyleMapObj = {
      fontColor: '',
      backgroundColor: '',
    }

    if (variant === 'error') {
      styleMap.fontColor = 'Accent.Normal'
      styleMap.backgroundColor = 'Accent.Light'
    } else if (variant === 'success') {
      styleMap.fontColor = 'Main.Normal'
      styleMap.backgroundColor = 'Main.Light'
    }

    if (!toast.isActive(id)) {
      toast.show({
        placement: 'top',
        render: () => (
          <Box
            bg={styleMap.backgroundColor}
            borderRadius="2xl"
            px="8"
            py="4"
            // top="16"
            _text={{ color: styleMap.fontColor, fontWeight: 'normal' }}
          >
            {message}
          </Box>
        ),
      })
    }
  }

Use toast.show, in my case, showToast() method.
After checking Toast disappears, use toast.show again.
You can see Toast is placed under the position where the Toast which was called in Step2, is set

NativeBase Version

3.3.11

Platform

[ ] Android
[ ] CRA
[X] Expo
[X] iOS
[ ] Next

Other Platform

No response

Additional Information

Hello. I am facing an error which is Toast is placed out of position. Let's say I use Toast multiple times while I use an app. A toast is placed on the right position at the first time. However, if I call that again, this is placed under the position where the previous Toast is set and this behavior is repeated every time I call Toast.

1st time
2nd times
3rd times

After a toast disappears, it still leaves on the screen according to React Native Debugger like that image. components_debugger

I couldn't find solutions in issues and Discord. If it is not a bug, I would like you to tell me some solution. Thank you.

Jun 26 '22 11:06 Toshiyuki023Hori

Hi @Toshiyuki023Hori, Thank you for reaching out to us. We will look into this issue.

Jun 27 '22 05:06 Krithikj20

@Krithikj20 Sure. Thank you.

Jun 27 '22 07:06 Toshiyuki023Hori

I forgot to tell you my environtment. Here is a part of my package.json

    "expo": "~44.0.0",
    "native-base": "^3.3.11",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-maps": "0.29.4",
    "tailwind-rn": "^4.2.0",
    "tailwindcss": "^3.0.23",

Jun 27 '22 12:06 Toshiyuki023Hori

same issue 👀

Jul 19 '22 13:07 jobrach-rbi

same issue in v3.3.7

Jul 22 '22 02:07 achalagarwal

Hi, I'm facing the same issue if the toasts are displayed sequently within < 1s (the first one disappeared but the next one stayed at the lower position, not moved up) native-base: 3.4.9 react-native: 0.68.2

Jul 29 '22 06:07 fleuverouge

Same issue here!! Any workaround on this??

Aug 18 '22 08:08 Linkmetal

+1

Oct 12 '22 03:10 showtan001

+1

Oct 14 '22 13:10 teofilomonteiro

my workaround for this is using Toast component instead of useToast

Dec 02 '22 09:12 venxik

I'm thinking we'll have to use react-native-toast-message instead for now.

Dec 09 '22 21:12 spsaucier

This is still an on going issue.

Dec 14 '22 21:12 thertzelle

Each time a toast is called, it is added to the component tree, but not all of it is removed, there seems to be some cruft left behind.

Dec 14 '22 21:12 goodwid

+1

Jan 01 '23 17:01 VictorAny

I was able to fix this by manually closing all toasts after a time-out. Specifically

Toast.show({
        placement: 'top',
        render: () => <View bg="white" borderColor={"light.300"} borderWidth={"1"} w="95%" flex={1} rounded={"md"} p="3">
          <Text>Test</Text>
        </View>
      })
setTimeout(() => toast.closeAll(), 5000)

Pay attention to the fact that I'm using Toast not toast. It will not work with the useToast() hook and requires the the global variable instead. The version of toast used to call closeAll can either be the useToast() or global variant. The important thing is that you don't change it as it will leave an artifact that pushes the view down.

Also if you have already instantiated any bad toasts with the useToast() version, you'll need to kill the app and re-open as the bad artifacts will already be added to the view

Jan 01 '23 17:01 VictorAny

toast.isActive(id) also comes back as true forever after displaying it once.

Mar 07 '23 19:03 spsaucier

I've also found that Toast.show was causing crashes when called in fairly rapid succession.

Mar 16 '23 15:03 spsaucier

Error still there in version "native-base": "3.4.0",