Licence
ISC
Version
1.0.7
Deps
0
Size
38 kB
Vulns
0
Weekly
0
React Native Toast
A react native custom toast message viewer .
| With logo | Large message |
|---|---|
![]() |
![]() |
Usage
import Toast,{ ToastProvider } from '@smak021/react-native-toast'
function App(){
return(
<ToastProvider>
// ...Your code goes here
<Toast duration={3000} backgroundColor={'#33333'}/>
</ToastProvider>
)
}
Set toast message in other components using the useToast() hook:
import { useToast } from '@smak021/react-native-toast'
function Component(){
const { setToastMessage } = useToast()
const handleError=()=>{
setToastMessage('Your Toast Message')
}
return(
//..UI
)
}
Props
| Property | Description | Default Value |
|---|---|---|
duration (in milliseconds) |
The amount of time the toast component is visible | 2000 |
type |
Compact or modern | modern |
toastIcon |
(only for modern) Custom icon used in the toast | null |
marqueeDuration (in milliseconds) |
(only for modern) The amount of time required for the text message to complete the marquee animation | 3500 |
marqueeDelay (in milliseconds) |
(only for modern) The delay between each text animation | 500 |
backgroundColor |
Toast background color | #333333 |
showButton |
(only for compact) Shows a button next to message | - |
onPress |
(only for compact) Function for managing the button press | - |
buttonDisabled |
(only for compact) Disables the button | false |
buttonText |
(only for compact) Text rendered on the button | OK |
showButton |
(only for compact) For activating the button | false |
textLeft |
(only for compact) Align text to the left | false |
onAnimationEnd |
Function, which execute after toast is closed | - |

