Skip to content
Docs
Hooks
useToast

useToast

Hook to display a Toast component imported from react-native-toast-message library.

https://github.com/calintamas/react-native-toast-message (opens in a new tab)

Import

import { useToast } from 'react-native-ficus-ui';

Usage

const { show, hide } = useToast();
 
<Button
  onPress={() => {
    show({
      type: 'success',
      text1: 'Hello',
      text2: 'This is some something 👋',
    });
  }}
  colorScheme="green"
>
  Show Success
</Button>;

Default config on theme

toastProps: {
    position: 'bottom',
    config: {
        success: ({ text1, text2 }: BaseToastProps) => (
            <Box
                bg="green.500"
                _dark={{ bg: 'green.300' }}
                p="lg"
                borderRadius="lg"
            >
                <Text
                    color="white"
                    _dark={{ color: 'gray.800' }}
                    fontWeight="bold"
                    fontSize="lg"
                >
                    {text1}
                </Text>
                <Text color="white" _dark={{ color: 'gray.800' }}>
                    {text2}
                </Text>
            </Box>
        ),
        error: ({ text1, text2 }: BaseToastProps) => (
            <Box bg="red.500" _dark={{ bg: 'red.300' }} p="lg" borderRadius="lg">
                <Text
                    color="white"
                    _dark={{ color: 'gray.800' }}
                    fontWeight="bold"
                    fontSize="lg"
                >
                    {text1}
                </Text>
                <Text color="white" _dark={{ color: 'gray.800' }}>
                    {text2}
                </Text>
            </Box>
        ),
        warning: ({ text1, text2 }: BaseToastProps) => (
            <Box
                bg="orange.500"
                _dark={{ bg: 'orange.300' }}
                p="lg"
                borderRadius="lg"
            >
                <Text
                    color="white"
                    _dark={{ color: 'gray.800' }}
                    fontWeight="bold"
                    fontSize="lg"
                >
                    {text1}
                </Text>
                <Text color="white" _dark={{ color: 'gray.800' }}>
                    {text2}
                </Text>
            </Box>
        ),
        info: ({ text1, text2 }: BaseToastProps) => (
            <Box bg="blue.500" _dark={{ bg: 'blue.300' }} p="lg" borderRadius="lg">
                <Text
                    color="white"
                    _dark={{ color: 'gray.800' }}
                    fontWeight="bold"
                    fontSize="lg"
                >
                    {text1}
                </Text>
                <Text color="white" _dark={{ color: 'gray.800' }}>
                    {text2}
                </Text>
            </Box>
        ),
    },
},

Custom Toast config

You can edit all Toast props and Toast layout as you want by passing ToastProps to your theme as defined here :

https://github.com/calintamas/react-native-toast-message/blob/main/src/types/index.ts (opens in a new tab)

Pass ToastProps into toastProps object inside your Ficus UI theme.