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 :
Pass ToastProps into toastProps object inside your Ficus UI theme.