@dozgrou/react-native-toastr v0.2.0

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

Toastr config

License

MIT