when use the useToast, state value is initialized

[yunyami0605]

Description

when use the useToast, state value is initialized

CodeSandbox/Snack link

/

Steps to reproduce

Below my code

// useToast.tsx

import React from 'react';
import {useToast} from 'native-base';
import ToastMessage from '~/components/common/toast/ToastMessage';
import {TextStyle, ViewStyle} from 'react-native';

type ToastShowProps = {
  message: string;
  leftElement?: JSX.Element;
  rightElement?: JSX.Element;
  textStyle?: TextStyle;
  viewStyle?: ViewStyle;
  justifyContent?: 'space-between' | 'center';
};

/**
 *@description toast 훅 생성
 */
function useToastShow() {
  const toast = useToast();

  const toastShow = (props: ToastShowProps) => {
    return toast.show({
      render: () => {
        return <ToastMessage {...props} />;
      },
      duration: 3000,
    });
  };

  return {toastShow, toast};
}

export default useToastShow;

// EmailLogin.tsx

import {VStack} from 'native-base';
import React, {useState} from 'react';
import {SafeAreaView} from 'react-native-safe-area-context';
import {colors} from '~/theme/theme';
import {TextInput} from 'react-native';
import RedActiveLargeButton from '~/components/common/button/RedActiveLargeButton';
import {APP_HEIGHT} from '~/utils/dimension';
import {HEADER_HEIGHT} from '~/constants/heights';
import useToastShow from '~/hooks/useToast';

function EmailLogin() {
  const {toastShow} = useToastShow();

  const [loginForm, setLoginForm] = useState<string>('');

  const onLogin = async () => {
    toastShow({
      message: 'Test',
    });
  };

  return (
    <SafeAreaView style={{backgroundColor: colors.grayScale['0']}}>
      <VStack
        bg={colors.grayScale['0']}
        w="100%"
        h={`${APP_HEIGHT - HEADER_HEIGHT}px`}>
        <VStack flex={1} justifyContent={'space-between'} px="18px" mb="40px">
          <VStack>
            <TextInput
              style={{
                borderWidth: 1,
                height: 30,
              }}
              value={loginForm}
              onChangeText={text => setLoginForm(text)}
            />

            <RedActiveLargeButton
              active={true}
              handlePress={onLogin}
              buttonStyle={{marginBottom: 20}}
              text={'토스트 출력'}
            />
          </VStack>
        </VStack>
      </VStack>
    </SafeAreaView>
  );
}

export default EmailLogin;

when

• problem
  If enter the input before click the toast output button, the input state(loginForm) is initialized.

• want
  input state(loginForm) is no initialized

NativeBase Version

3.4.18

Platform

• Android
• CRA
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

No response