@nguyentc21/react-native-toast
Simple Toast for React native app
Installation
yarn add @nguyentc21/react-native-toast
Usage
// App.jsx
// ...
import { ToastSection } from '@nguyentc21/react-native-toast';
export function App(props) {
return (
<>
{/* ... */}
<ToastSection
// position="bottom"
/>
</>
)
}
// ANiceView.jsx
// ...
import Toast from '@nguyentc21/react-native-toast';
export function ANiceView(props) {
const _showToast = () => {
Toast.show([
{
content: "A successful message!",
type: "success",
},
{
content: "A danger message!",
type: "danger",
duration: 5000,
},
{
content: "A warning message!",
type: "warning",
textColor: 'red'
},
{
content: "A standard message!",
},
])
}
return (
<>
{/* ... */}
<Pressable
onPress={_showToast}
/>
{/* ... */}
</>
)
}
Props
Customize all your Toast
Name | Type | Default | description |
---|---|---|---|
duration | number | 3000 | Shown time (ms) |
type | 'standard' | 'success' | 'danger' | 'warning' | 'standard' | Default Toast type |
position | 'top' | 'bottom' | 'top' | |
holdable | boolean | true | Allow to hole your Toast by pressing on it |
colors | ColorsType | DEFAULT_COLORS | Background color and text color for each position type. |
toastTextStyle | StyleProp | Default text style of toast | |
toastContainerStyle | StyleProp | Default container style of toast |
** Please find ColorsType
, DEFAULT_COLORS
in source code.
And customize each of your Toast
(ToastItemOptions
)
Name | Type | Default | description |
---|---|---|---|
content | string | Toast message | |
type | 'standard' | 'success' | 'danger' | 'warning' | 'standard' | Toast type |
duration | number | 3000 | Shown time (ms) |
backgroundColor | ColorValue | ||
textColor | ColorValue | Text color of Toast message | |
textStyle | StyleProp | Text style of Toast message | |
AdditionItem | Reactnode | Try it. |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library