React Native Toast
React Native JS level toast for both android and IOS which can be called from any component of your app.
Install
npm install @asaeed14/react-native-toast
OR
yarn add @asaeed14/react-native-toast
Example
How to Use
Wrap your application entry point with ToastProvider
.
import { ToastProvider } from '@asaeed14/react-native-toast';
const App = () => {
return (
<ToastProvider
defaultTheme={{
message: 'Hello Toast',
delay: 1000,
position: 'bottom' | 'top',
bottomOffset: 20,
topOffset: 20,
backgroundColor: 'black' | 'rgba(0, 0, 0, 0.75)',
textColor: 'white' | 'black',
type: 'success',
}}
>
<App />
</ToastProvider>
);
};
You can use toast.show()
from any of your component or screen.
// this is jsut an example you can call from anywhere based on your requirement.
import { useToastContext } from '@asaeed14/react-native-toast';
const LoginScreen = () => {
const toast = useToastContext();
useEffect(() => {
if (login.success) {
toast.show({
message: 'Login Successfully',
delay: 3000,
position: 'bottom' | 'top',
bottomOffset: 32,
topOffest: 32,
backgroundColor: 'black' | 'rgba(0, 0, 0, 0.75)',
textColor: 'white' | 'black',
type: 'success',
});
}
}, [login]);
return <View />;
};
ToastProvider Props
Name | Type | Required | default | Description |
---|---|---|---|---|
defaultTheme | object | false | default Props | You can provide default theme to make toast consistent to all over the app, default theme props can be replaced by "show" function props |
Props
Name | Type | Required | default | Description |
---|---|---|---|---|
message | string | false | "Hello Toast" | A message for toast |
delay | number | false | 1000 | Number in miliseconds to delay toast |
position | 'bottom' or 'top' | false | bottom | Position to show toast |
bottomOffset | number | false | 32 | Space from bottom if position is bottom |
topOffset | number | false | 32 | Space from top if position is top |
backgroundColor | string | false | 'rgba(0, 0, 0, 0.75)' | Background color of toast |
textColor | string | false | '#ffffff' | Color of toast message |
type | string | false | '' | Right now just "success" type supported. Icon will be shown on the left of message |