React Native Toastr
React Native Toastr is strongly inspired by the toastr package.
Installation
yarn add @dozgrou/react-native-toastr
or
npm install @dozgrou/react-native-toastr
Example App
To run the example application, simply clone the repository and then theses commands
cd example
npm install
npm run android OR npm run ios
Usage
First, wrap your entire application with ToastrProvider
component.
import React from 'react';
import {ToastrProvider} from '@dozgrou/react-native-toastr'
class App extends React.Component {
render() {
return (
<ToastrProvider>
// App
</ToastrProvider>
);
}
};
And then use the withToastr
function to access the toastr api.
import React from 'react';
import {Text, TouchableOpacity} from 'react-native';
import {withToastr} from '@dozgrou/react-native-toastr';
class Button extends React.Component {
handlePress() {
this.props.toastr.success('Awesome notification', {
dismissable: false,
});
}
render() {
return (
<TouchableOpacity
onPress={() => this.handlePress()}>
<Text>Click me</Text>
</TouchableOpacity>
);
}
}
//Use the function withToastr to get access to toastr props
//in any component
export default withToastr(Button)
Custom component
import React from 'react'
import {Text, TouchableOpacity, View} from 'react-native';
import {withToastr} from '@dozgrou/react-native-toastr';
const CustomComponent = ({onRemove}) => {
return (
<TouchableOpacity onPress={onRemove}>
<View>
<Text>Awesome custom component</Text>
</View>
</TouchableOpacity>
)
};
const Button = () => {
return (
<TouchableOpacity onPress={toastr.custom(({...config}) => <CustomComponent {...config} />)}>
<View>Click me</View>
</TouchableOpacity>
);
};
export default withToastr(Button);
Methods
Method name | Arguments | Notes |
---|---|---|
success | text: string, config?: ToastrConfig | Show a success message (Green) |
danger | text: string, config?: ToastrConfig | Show a danger message (Red) |
warning | text: string, config?: ToastrConfig | Show a warning message (Yellow) |
info | text: string, config?: ToastrConfig | Show an info message (Blue) |
custom | component: Function(onRemove: Function), config?: ToastrConfig | Show a custom component |
Toastr config
Type | Default | Notes | |
---|---|---|---|
timeout | boolean | true | Set to false to disable the timeout |
timeoutDuration | number | 5000 | The timeout duration in ms |
dismissable | boolean | true | Set to false to disable click to remove |
progressBar | boolean | true | Set to false to deactivate the progress bar |
duplicate | boolean | true | Set to false to not display duplicates toastr |