Skip to content

📱 React Native cross-plateform (iOS / Android) Toast component highly customizable.

License

Notifications You must be signed in to change notification settings

rimiti/react-native-toastify

Repository files navigation

react-native-toastify

Build Status Codecov Code Climate score Code Climate coverage Node.js version NPM version MIT License PRs Welcome

Description

React Native cross-platform (iOS/Android) toast notification component highly customizable.

Install

$ yarn add @rimiti/react-native-toastify

Demo

Examples

import React, {Component} from 'react';
import {Button, View} from 'react-native';
import Toast from '@rimiti/react-native-toastify';

export default class Layout extends Component {

	constructor(props) {
		super(props)
	}

	render() {
		return (
			<View style={{paddingTop: 300}}>
				<Button	onPress={() => this.toastify.show('Hello World !', 1000)}	title="Demo" />
				<Toast ref={(c) => this.toastify = c} />
			</View>
		)
	}
}

Documentation

Props                     Type                  Description                                                 Usage
----------------------------------------------------------------------------------------------------------------------
style                     {View}                Style definitions for the global element                    (optional)
position                  {top, center, bottom} Position of toast.                                          (optional)
textStyle                 {Text}                Style definitions for the toast text element                (optional)
positionValue             {number}              Position value of toast                                     (optional)
fadeInDuration            {number}              Duration of fade in                                         (optional)
fadeOutDuration           {number}              Duration of fade out                                        (optional)
opacity                   {number}              Opacity value                                               (optional)
durationShort             {number}              Show duration                                               (optional)
defaultCloseDelay         {number}              Close delay duration                                        (optional)
end                       {number}              End value of animation                                      (optional)

Scripts

Run using npm run <script> command.

clean - remove coverage data, Jest cache and transpiled files,
lint - lint source files and tests,
test - lint, typecheck and run tests with coverage,
test-only - run tests with coverage,
test:watch - interactive watch mode to automatically re-run tests,
build - compile source files,
build:watch - interactive watch mode, compile sources on change.

License

MIT © Dimitri DO BAIRRO