1.0.1 • Published 4 years ago

react-native-root-toaster v1.0.1

Weekly downloads
5
License
MIT
Repository
github
Last release
4 years ago

react-native-root-toaster

A toaster on the top of your React Native App

React Native Root Toaster demo

Installation

npm install react-native-root-toaster

or

yarn add react-native-root-toaster

Usage

  1. Add the RootToaster component at the root of your application with optionnale default props
// ...imports
import { RootToaster, Toast } from 'react-native-root-toaster';

export default function App() {
  return (
    <>
      <YourNavigator />
      <RootToaster defaultMessage={'Default message'} />
    <>
  );
}

OR with providers:

import { RootToaster, Toast } from 'react-native-root-toaster';

export default function App() {
  return (
    <ThemeProvider>
      <ReduxProvider>
        <YourNavigator />
        <RootToaster defaultMessage={'Default message'} />
      </ReduxProvider>
    </ThemeProvider>
  );
}
  1. Use the function Toast.show anywhere in a your app
<Button title="Show a toaster" onPress={() => Toast.show("Hello world!")}>

Available props for RootToaster

NameTypeDefaultDescription
defaultDurationnumber  3000How long your toaster will be visible
defaultMessagestring''Default message to show when the toaster is displayed
defaultColorstring'#2e3137'Default color of the toaster
CloseComponentFunctionComponentundefinedDisplays a touchable component to close the toaster before the timer

Toast.show parameters

Toast.show(message: string, duration?: number)

License

MIT