1.0.0 • Published 3 years ago

react-native-clipboard-toast v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

npm version npm downloads npm downloads

react-native-clipboard-toast

React Native Clipboard API with Animated toast message component


Support both Android and iOS | Used react native Clipboard | Toast by calling api

react-native-clipboard-toast-gif

Install

npm install react-native-clipboard-toast

or

yarn add react-native-clipboard-toast


Import the package

import ClipboardToast from 'react-native-clipboard-toast';

Calling api
<ClipboardToast
    textToShow={`Top toast with 1 second delay`}
    textToCopy={"Top text"}
    toastText={"Text copied to clipboard!"}
    id={'top'}
    containerStyle={{backgroundColor: "#DDDDDD", padding: 10, borderRadius: 5}}
    textStyle={{ fontSize: 18, color: "#223345" }}
    accessibilityLabel={"click me to copy"}
    toastPosition={'top'}
    toastDelay={1000}
    toastOnShow={()=>{console.log('Is Copied')}}
  />

Reference

Props

NameDefaultTypeDescription
textToShownullStringThe text that will show (clickabily)
textToCopynullStringThe text that will be copied to the clipboard
toastText'Text is copied'StringThe text that will show on the toast
containerStylenullStyleContainer style
textStylenullStyleText style
id'someKey'Number/StringKey of element
accessibilityLabelnullStringAccessibility label text
toastDuration750NumberThe duration of the toast. (milliseconds)
toastPosition'bottom'stringThe position of toast showing on screen (there are 3 options - 'bottom, 'center' and 'top')
toastDelay0NumberThe delay duration before toast start showing on screen.
toastAnimationtrueBoolShould preform an animation on toast showing or disappearing.
toastHideOnPresstrueBoolShould hide toast that showing by pressing on the toast.
toastBackgroundColornullStringThe background color of the toast.
toastTextColornullStringThe text color of the toast.
toastOnShownullFunctionCallback for toast`s appear animation start

Author

Made by Idanlevi1.