npm.io
1.0.7 • Published 2 years ago

@smak021/react-native-toast

Licence
ISC
Version
1.0.7
Deps
0
Size
38 kB
Vulns
0
Weekly
0

React Native Toast

runs with expo

A react native custom toast message viewer .

With logo Large message
Toast with icon Large toast 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 -

Keywords