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 |

License

MIT