├── .babelrc ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── Assets ├── toast-android.gif └── toast-ios.gif ├── README.md ├── ToastExample ├── .babelrc ├── .buckconfig ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .watchmanconfig ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── toastexample │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ ├── keystores │ │ ├── BUCK │ │ └── debug.keystore.properties │ └── settings.gradle ├── app.js ├── app.json ├── index.android.js ├── index.ios.js ├── ios │ ├── ToastExample-tvOS │ │ └── Info.plist │ ├── ToastExample-tvOSTests │ │ └── Info.plist │ ├── ToastExample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── ToastExample-tvOS.xcscheme │ │ │ └── ToastExample.xcscheme │ ├── ToastExample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── ToastExampleTests │ │ ├── Info.plist │ │ └── ToastExampleTests.m ├── main.js ├── package.json ├── reset.sh ├── store.js └── yarn.lock ├── circle.yml ├── index.js ├── package.json ├── src ├── Toast.js ├── Toast.styles.js ├── ToastContainer.js └── redux │ ├── actions.js │ └── reducer.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "es6": true, 4 | "node": true, 5 | "browser": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaFeatures": { 10 | "experimentalObjectRestSpread": true, 11 | "jsx": true 12 | }, 13 | "sourceType": "module" 14 | }, 15 | "plugins": [ 16 | "react", 17 | "prettier", 18 | "flowtype" 19 | ], 20 | "extends": [ 21 | "eslint:recommended", 22 | "airbnb", 23 | "plugin:react/recommended", 24 | "prettier", 25 | "prettier/flowtype", 26 | "prettier/react" 27 | ], 28 | "globals": { 29 | "__DEV__": true, 30 | }, 31 | "rules": { 32 | "prettier/prettier": ["error", { printWidth: 110, singleQuote: true }], 33 | "no-invalid-this": "off", 34 | "no-return-assign": "off", 35 | "no-param-reassign": "off", 36 | "no-nested-ternary": "off", 37 | "react/require-default-props": "off", 38 | "react/jsx-filename-extension": ["error", { "extensions": [".js"] }], 39 | "react/prop-types": [2, { ignore: ["style", "children", "dispatch"] } ], 40 | "import/prefer-default-export": "off", 41 | "import/no-unresolved": "error", 42 | "import/extensions": ["error", { js: "never" }], 43 | "import/named": "error", 44 | "import/default": "error", 45 | "import/namespace": "error", 46 | "import/no-absolute-path": "error" 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Package manager files 2 | node_modules 3 | npm-debug.log 4 | yarn-error.log 5 | 6 | # OSX 7 | .DS_Store 8 | 9 | # Build files 10 | lib 11 | 12 | # Test files 13 | coverage 14 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | ToastExample 2 | /src 3 | index.js 4 | yarn.lock 5 | Assets 6 | -------------------------------------------------------------------------------- /Assets/toast-android.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbalay/react-native-redux-toast/4218228cf68de901c386ca5bb19ca3840308ff1d/Assets/toast-android.gif -------------------------------------------------------------------------------- /Assets/toast-ios.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbalay/react-native-redux-toast/4218228cf68de901c386ca5bb19ca3840308ff1d/Assets/toast-ios.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React Native Redux Toast 2 | ================== 3 | 4 | ## Features 5 | 6 | - Cross platform. 7 | - Triggered dispatching redux actions 8 | - 100% written in js. No need to link native dependencies 9 | - Easy to customize 10 | 11 | Android | iOS 12 | :-------------------------:|:-------------------------: 13 | ![Toast Android](Assets/toast-android.gif "Android") | ![Toast iOS](Assets/toast-ios.gif "iOS") 14 | 15 | ## Installation 16 | 17 | #### npm 18 | ```bash 19 | npm install --save react-native-redux-toast 20 | ``` 21 | 22 | #### yarn 23 | ```bash 24 | yarn add react-native-redux-toast 25 | ``` 26 | 27 | ## Usage 28 | 29 | 1- Add the toast reducer to your store 30 | 31 | ```js 32 | import { createStore, combineReducers } from 'redux'; 33 | import { toastReducer as toast } from 'react-native-redux-toast'; 34 | 35 | const reducers = combineReducers({ 36 | toast 37 | }); 38 | 39 | export default createStore(reducers); 40 | ``` 41 | 42 | 2- Mount the toast component where you want to use it. (Usually at the root level of the app) 43 | 44 | ```js 45 | import React from 'react'; 46 | import { Provider } from 'react-redux'; 47 | import { View } from 'react-native'; 48 | import { Toast } from 'react-native-redux-toast'; 49 | 50 | import store from './store'; 51 | import App from './app'; 52 | 53 | export default function main() { 54 | return ( 55 | 56 | 57 | 58 | 59 | 60 | 61 | ); 62 | } 63 | 64 | ``` 65 | 66 | 3- Dispatch actions 67 | 68 | ```js 69 | class App extends Component { 70 | displayErrorToast = () => { 71 | this.props.dispatch(ToastActionsCreators.displayError('Error toast!')); 72 | }; 73 | 74 | displayWarningToast = () => { 75 | this.props.dispatch(ToastActionsCreators.displayWarning('Warning toast!', 2000)); 76 | }; 77 | 78 | displayInfoToast = () => { 79 | this.props.dispatch(ToastActionsCreators.displayInfo('Info toast!', 5000)); 80 | }; 81 | 82 | render() { 83 | return ( 84 | 85 |