rimiti/react-native-toastify

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

react-native-toastify

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

react-native-toastify's Issues

Typescript definitions

Quick definitions for anyone interested:

EDIT: Definitions merged from PR #7

declare module '@rimiti/react-native-toastify' {
  import { Component } from 'react'
  import { ViewProps, StyleProp } from 'react-native'
  namespace Toast {
    interface ToastProps {
      position?: 'top' | 'center' | 'bottom'
      textStyle?: StyleProp<Text>
      positionValue?: number
      fadeInDuration?: number
      fadeOutDuration?: number
      opacity?: number
      durationShort?: number
      defaultCloseDelay?: number
    }
  }
  class Toast extends Component<Toast.ToastProps & ViewProps> {
    public show(text: string, duration: number): void
  }
  export = Toast
}

Expo - Duplicate module name: react-native

Paths: /Users/user/myapp/app/node_modules/@rimiti/react-native-toastify/node_modules/react-native/package.json collides with /Users/user/myapp/app/node_modules/react-native/package.json

$ expo diagnostics

  Expo CLI 2.21.2 environment info:
    System:
      OS: macOS 10.14.5
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
      Yarn: 1.16.0 - ~/.yarn/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^33.0.0 => 33.0.7 
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz => 0.59.8 
      react-navigation: ^3.3.0 => 3.11.0 
    npmGlobalPackages:
      expo-cli: 2.21.2

"dependencies": {
    "@expo/vector-icons": "^9.0.0",
    "@rimiti/react-native-toastify": "^1.2.0",
    "axios": "^0.18.0",
    "expo": "^33.0.0",
    "expo-linear-gradient": "~5.0.1",
    "formik": "^1.5.1",
    "lodash": "^4.17.11",
    "metro-react-native-babel-preset": "^0.52.0",
    "moment": "^2.24.0",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-datepicker": "^1.7.2",
    "react-native-dotenv": "^0.2.0",
    "react-native-elements": "^1.1.0",
    "react-native-modal-selector": "^1.0.3",
    "react-navigation": "^3.3.0",
    "styled-components": "^4.1.3",
    "yup": "^0.26.10"
  },

$ expo publish                             
Unable to find an existing Expo CLI instance for this directory, starting a new one...
Starting Metro Bundler on port 19001.
Tunnel ready.
Publishing to channel 'default'...
(node:4924) UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision:
  Duplicate module name: react-native
  Paths: /Users/user/myapp/app/node_modules/@rimiti/react-native-toastify/node_modules/react-native/package.json collides with /Users/user/myapp/app/node_modules/react-native/package.json

This error is caused by `hasteImpl` returning the same name for different files.
    at setModule (/Users/user/myapp/app/node_modules/jest-haste-map/build/index.js:569:17)
    at workerReply (/Users/user/myapp/app/node_modules/jest-haste-map/build/index.js:641:9)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:4924) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:4924) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:4924) UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision:
  Duplicate module name: react-native
  **Paths: /Users/user/myapp/app/node_modules/@rimiti/react-native-toastify/node_modules/react-native/package.json collides with /Users/user/myapp/app/node_modules/react-native/package.json**

This error is caused by `hasteImpl` returning the same name for different files.
    at setModule (/Users/user/myapp/app/node_modules/jest-haste-map/build/index.js:569:17)
    at workerReply (/Users/user/myapp/app/node_modules/jest-haste-map/build/index.js:641:9)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:4924) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)

Building iOS bundle
Error: jest-haste-map: Haste module naming collision:
  Duplicate module name: react-native
  Paths: /Users/user/myapp/app/node_modules/@rimiti/react-native-toastify/node_modules/react-native/package.json collides with /Users/user/myapp/app/node_modules/react-native/package.json

This error is caused by `hasteImpl` returning the same name for different files.
    at setModule (/Users/user/myapp/app/node_modules/jest-haste-map/build/index.js:569:17)
    at workerReply (/Users/user/myapp/app/node_modules/jest-haste-map/build/index.js:641:9)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Hi, I downloaded react native toastify, but there is an error that I can't fix

node v12.16.1
react-native-cli 2.0.1

error:

undefined is not an object(evaluating '_reactNative.View.propTypes.style')

Chore - Add namespace

• add npm namespace