├── .DS_Store ├── .babelrc ├── .expo ├── README.md └── settings.json ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc ├── CONTRIBUTING.md ├── LICENSE ├── README-legacy.md ├── README.md ├── components ├── BaseToast.tsx ├── ErrorToast.tsx ├── InfoToast.tsx ├── SuccessToast.tsx ├── ToastManager.tsx ├── WarnToast.tsx └── styles.ts ├── config └── theme.ts ├── index.ts ├── package-lock.json ├── package.json ├── sample ├── .gitignore ├── Another.js ├── App.js ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash-icon.png ├── index.js ├── metro.config.js ├── package-lock.json ├── package.json └── tsconfig.json ├── tsconfig.json └── utils ├── defaultConfig.ts ├── defaultProps.ts ├── helpers.ts └── interfaces.ts /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zahidalidev/toastify-react-native/2410fc40480a56b312f05f27652e61db7fa0cf26/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["module:metro-react-native-babel-preset"] 3 | } 4 | -------------------------------------------------------------------------------- /.expo/README.md: -------------------------------------------------------------------------------- 1 | > Why do I have a folder named ".expo" in my project? 2 | 3 | The ".expo" folder is created when an Expo project is started using "expo start" command. 4 | 5 | > What do the files contain? 6 | 7 | - "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds. 8 | - "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator. 9 | - "settings.json": contains the server configuration that is used to serve the application manifest. 10 | 11 | > Should I commit the ".expo" folder? 12 | 13 | No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine. 14 | 15 | Upon project creation, the ".expo" folder is already added to your ".gitignore" file. 16 | -------------------------------------------------------------------------------- /.expo/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "hostType": "lan", 3 | "lanType": "ip", 4 | "dev": true, 5 | "minify": false, 6 | "urlRandomness": null, 7 | "https": false 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | *.log 3 | npm-debug.log 4 | 5 | # Runtime data 6 | tmp 7 | build 8 | dist 9 | 10 | # Dependency directory 11 | node_modules 12 | react-native-toast-message-main -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | *.log 3 | npm-debug.log 4 | 5 | # Dependency directory 6 | node_modules 7 | 8 | # Runtime data 9 | tmp -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .expo 2 | 3 | /node_modules 4 | /build 5 | 6 | **/package-lock.json 7 | 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "endOfLine": "lf", 4 | "tabWidth": 2, 5 | "indentStyle": "space", 6 | "useTabs": false, 7 | "arrowParens": "always", 8 | "bracketSameLine": false, 9 | "singleQuote": true, 10 | "semi": false, 11 | "bracketSpacing": true, 12 | "jsxSingleQuote": true 13 | } 14 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | 👍🎉 First off, thanks for taking the time to contribute! 🎉👍 4 | 5 | When contributing to this repository, please first discuss the change you wish to make via issue before making a change. 6 | 7 | Please note we have a code of conduct, please follow it in all your interactions with the project. 8 | 9 | ## General Guidelines 10 | 11 | - Ensure that nothing gets broken. You can use the sample project for that 12 | - Use prettier before committing (`npm run prettier`) 13 | - When solving a bug, please provide the steps to reproduce it (codesandbox is our best friend for that) 14 | - Keep it chill 👌 15 | 16 | ## Setup 17 | 18 | ### Pre-requisites 19 | - _Node:_ `>=16.0.0` 20 | - _npm_ or _yarn_ 21 | 22 | ### Install 23 | 24 | Clone the repository and create a local branch: 25 | 26 | ```sh 27 | git clone https://github.com/zahidalidev/toastify-react-native.git 28 | cd toastify-react-native 29 | 30 | git checkout -b my-branch 31 | ``` 32 | 33 | Install dependencies: 34 | 35 | ```sh 36 | npm install 37 | ``` 38 | 39 | ## Developing 40 | 41 | The library doesn't use a state management library like Redux or MobX to dispatch notifications. Instead, it uses a singleton pattern with refs. 42 | 43 | ### Testing with the Sample Project 44 | 45 | We've included a sample project to help you test your changes in a real React Native environment: 46 | 47 | 1. First, install the dependencies for the main package: 48 | ```sh 49 | npm install 50 | ``` 51 | 52 | 2. Navigate to the sample project directory: 53 | ```sh 54 | cd sample 55 | ``` 56 | 57 | 3. Install the sample project dependencies: 58 | ```sh 59 | npm install 60 | ``` 61 | 62 | 4. Start the sample project: 63 | ```sh 64 | npm start 65 | ``` 66 | 67 | 5. Use Expo to run the app on your device or simulator: 68 | ```sh 69 | # For iOS 70 | npm run ios 71 | 72 | # For Android 73 | npm run android 74 | ``` 75 | 76 | The sample project is set up to use the local version of toastify-react-native, so any changes you make to the library code will be reflected in the sample app (If not try reloading it). 77 | 78 | ### Project structure 79 | 80 | #### Main package 81 | 82 | - `/components`: Contains all the toast components 83 | - `/utils`: Helper functions, interfaces, and default configurations 84 | - `/config`: Theme and styling configurations 85 | - `index.ts`: Main entry point for the package 86 | 87 | #### Sample project 88 | 89 | The sample project in the `/sample` directory lets you test your changes in a real React Native environment. It's a great way to verify that your changes work as expected before submitting a pull request. 90 | 91 | ## Making Changes 92 | 93 | 1. Make your changes to the library code 94 | 2. Test your changes using the sample project 95 | 3. Run prettier to format your code: 96 | ```sh 97 | npm run prettier 98 | ``` 99 | 4. Commit your changes with a descriptive commit message 100 | 5. Push your changes to your fork 101 | 6. Submit a pull request 102 | 103 | ## License 104 | 105 | By contributing, you agree that your contributions will be licensed under its MIT License. 106 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Zahid Ali 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README-legacy.md: -------------------------------------------------------------------------------- 1 | # toastify-react-native 2 | 3 | [![npm version](https://badge.fury.io/js/toastify-react-native.svg)](https://badge.fury.io/js/toastify-react-native) 4 | 5 | 🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! 6 | 7 | ## Demo 8 | 9 | ## [View examples on snack.expo.io](https://snack.expo.io/@zahidalidev/toastify-react-native) 10 | 11 | https://user-images.githubusercontent.com/46484008/190667640-02a77a0c-8aed-4dc9-a1d3-abf9cb5b3c0a.mp4 12 | 13 | ## Features 14 | 15 | - Smooth enter/exit animations 16 | - Plain simple and flexible APIs 17 | - Resize itself correctly on device rotation 18 | - Swipeable 19 | - Easy to set up for real, you can make it work in less than 10sec! 20 | - Super easy to customize 21 | - RTL support 22 | - Swipe to close 👌 23 | - Can choose swipe direction 24 | - Super easy to use an animation of your choice. Works well with animate.css for example 25 | - Define behavior per toast 26 | - Pause toast by click on the toast 👁 27 | - Fancy progress bar to display the remaining time 28 | - Possibility to update a toast 29 | - You can control the progress bar a la nprogress 😲 30 | - You can display multiple toast at the same time 31 | - Dark and light mode 🌒 32 | - And much more ! 33 | 34 | ## Installation 35 | 36 | ```sh 37 | $ npm install toastify-react-native 38 | ``` 39 | 40 | ### Required Dependencies 41 | 42 | This package depends on the following packages which need to be installed separately: 43 | 44 | ```sh 45 | $ npm install react-native-modal react-native-vector-icons 46 | ``` 47 | 48 | ## A complete example 49 | 50 | ### App.js 51 | 52 | ```javascript 53 | import React from 'react' 54 | import { StyleSheet, View, TouchableOpacity, Text } from 'react-native' 55 | import ToastManager, { Toast } from 'toastify-react-native' 56 | 57 | import Another from './Another' 58 | 59 | const App = () => { 60 | const showToasts = () => { 61 | Toast.success('Promised is resolved') 62 | } 63 | 64 | return ( 65 | 66 | 67 | 68 | 77 | SHOW SOME AWESOMENESS! 78 | 79 | 80 | ) 81 | } 82 | 83 | const styles = StyleSheet.create({ 84 | container: { 85 | flex: 1, 86 | backgroundColor: '#fff', 87 | alignItems: 'center', 88 | justifyContent: 'center', 89 | }, 90 | }) 91 | 92 | export default App 93 | ``` 94 | 95 | ### Another.js 96 | 97 | ```javascript 98 | import React from 'react' 99 | import { StyleSheet, View, TouchableOpacity, Text } from 'react-native' 100 | import { Toast } from 'toastify-react-native' 101 | const Another = () => ( 102 | 103 | Toast.info('Lorem ipsum info', 'bottom')} 105 | style={styles.buttonStyle} 106 | > 107 | SHOW SOME AWESOMENESS! 108 | 109 | 110 | ) 111 | 112 | const styles = StyleSheet.create({ 113 | container: { 114 | backgroundColor: '#fff', 115 | alignItems: 'center', 116 | justifyContent: 'center', 117 | }, 118 | buttonStyle: { 119 | marginTop: 10, 120 | backgroundColor: 'white', 121 | borderColor: 'green', 122 | borderWidth: 2, 123 | padding: 10, 124 | }, 125 | }) 126 | 127 | export default Another 128 | ``` 129 | 130 | For a more complex example take a look at the `/example` directory. 131 | 132 | ## Available props 133 | 134 | | Name | Type | Default | Description | 135 | | --------------------------- | ---------------------------------------------- | -------------- | ----------------------------------------------- | 136 | | width | number or 'auto' | 256 | Width of toast | 137 | | minHeight | number or 'auto' | 68 | Minimum height of the toast | 138 | | style | any | null | Style applied to the toast | 139 | | textStyle | any | null | Style applied to the toast content | 140 | | position | top, center or bottom | top | Position of toast | 141 | | positionValue | number | 50 | position value of toast | 142 | | duration | number | 3000 | The display time of toast. | 143 | | animationStyle | slideInOut, upInUpOut, rightInOut or zoomInOut | slideInOut | The animation style of toast | 144 | | animationIn | string or object | 'slideInRight' | Toast show animation | 145 | | animationOut | string or object | 'slideOutLeft' | Toast hide animation | 146 | | animationInTiming | number | 300 | Timing for the Toast show animation (in ms) | 147 | | animationOutTiming | number | 300 | Timing for the toast hide animation (in ms) | 148 | | backdropTransitionInTiming | number | 300 | The backdrop show timing (in ms) | 149 | | backdropTransitionOutTiming | number | 300 | The backdrop hide timing (in ms) | 150 | | hasBackdrop | bool | false | Render the backdrop | 151 | | backdropColor | string | 'black' | The backdrop background color | 152 | | backdropOpacity | number | 0.2 | The backdrop opacity when the toast is visible | 153 | | showCloseIcon | boolean | true | Shows the close icon in the right corner | 154 | | showProgressBar | boolean | true | Shows the progress bar in the toast | 155 | | isRTL | boolean | false | Right to left support for languages like Arabic | 156 | 157 | ## Available animations 158 | 159 | Take a look at [react-native-animatable](https://github.com/oblador/react-native-animatable) to see the dozens of animations available out-of-the-box. 160 | 161 | ## Acknowledgements 162 | 163 | Pull requests, feedbacks and suggestions are welcome! 164 | 165 | ## License 166 | 167 | toastify-react-native is [MIT licensed](https://github.com/zahidalidev/toastify-react-native/blob/master/LICENSE) . 168 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # toastify-react-native 2 | 3 | [![npm version](https://badge.fury.io/js/toastify-react-native.svg)](https://badge.fury.io/js/toastify-react-native) 4 | 5 | 🎉 toastify-react-native allows you to add notifications to your React Native app (iOS, Android) with ease. No more nonsense! 6 | 7 | ## Table of Contents 8 | 9 | - [Demo](#demo) 10 | - [Features](#features) 11 | - [Installation](#installation) 12 | - [Basic Usage](#basic-usage) 13 | - [Advanced Usage](#advanced-usage) 14 | - [Modal Behavior](#modal-behavior) 👈 **NEW** 15 | - [Available Props](#available-props) 16 | - [Custom Components](#custom-components) 17 | - [Customizing Icons](#customizing-icons) 18 | - [API Reference](#api-reference) 19 | - [Upgrading from v6.x](#upgrading-from-v6x) 20 | - [Contributing](#contributing) 21 | - [License](#license) 22 | 23 | ## Demo 24 | 25 | ## [View examples on snack.expo.io](https://snack.expo.io/@zahidalidev/toastify-react-native) 26 | 27 | 28 | 29 | ## Features 30 | 31 | - 🚀 **Simple API**: Easy to use with minimal setup 32 | - 🎨 **Highly customizable**: Customize colors, icons, animations, and more 33 | - 🧩 **Custom components**: Create your own toast components 34 | - 🎭 **Custom icons**: Use different icon families, custom icon components, or JSX elements 35 | - 📱 **Responsive**: Adapts to different screen sizes 36 | - 🌓 **Dark & Light mode**: Built-in theme support 37 | - 🔄 **RTL support**: Right-to-left language support 38 | - ⏱️ **Progress bar**: Visual indicator of toast duration 39 | - 🖐️ **Interactive**: Pause on touch, resume on release 40 | - 🔄 **Animation options**: Choose from different animation styles 41 | - 📝 **Multiple lines**: Support for title and description 42 | - 🔍 **TypeScript support**: Full type definitions included 43 | - ✨ **Smooth animations**: Beautiful enter/exit animations 44 | - ⚡ **Quick setup**: Get up and running in less than 10 seconds! 45 | - 🎛️ **Per-toast behavior**: Define different behaviors for each toast 46 | - 📊 **Progress control**: Control the progress bar like nprogress 47 | - 🔧 **Super easy to customize**: Modify every aspect to match your app's design 48 | - 🎭 **And much more!**: Discover all the possibilities! 49 | 50 | ## Installation 51 | 52 | ```sh 53 | npm install toastify-react-native 54 | # or 55 | yarn add toastify-react-native 56 | ``` 57 | 58 | ### Required Dependencies 59 | 60 | This package requires `react-native-vector-icons`: 61 | 62 | ```sh 63 | npm install react-native-vector-icons 64 | # or 65 | yarn add react-native-vector-icons 66 | ``` 67 | 68 | Follow the [react-native-vector-icons installation guide](https://github.com/oblador/react-native-vector-icons#installation) to complete the setup for your platform. 69 | 70 | ## Basic Usage 71 | 72 | ```jsx 73 | import React from 'react' 74 | import { View, Button } from 'react-native' 75 | import ToastManager, { Toast } from 'toastify-react-native' 76 | 77 | export default function App() { 78 | return ( 79 | 80 |