1.0.7 • Published 13 days ago
@smak021/react-native-toast v1.0.7
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 | - |