├── .gitignore ├── .travis.yml ├── README.md ├── examples └── hud-example.jsx ├── index.js ├── jest-support └── preprocessor.js ├── package.json └── src ├── __mocks__ └── react-native.js ├── __tests__ └── index-test.js ├── images └── index.js ├── index.js └── styles.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Progress HUD 2 | [![npm](https://img.shields.io/npm/v/react-native-progress-hud.svg?style=flat-square)](https://www.npmjs.com/package/react-native-progress-hud) 3 | [![npm downloads](https://img.shields.io/npm/dm/react-native-progress-hud.svg?style=flat-square)](https://www.npmjs.com/package/react-native-progress-hud) 4 | [![Travis](https://img.shields.io/travis/naoufal/react-native-progress-hud/master.svg?style=flat-square)](https://travis-ci.org/naoufal/react-native-progress-hu://travis-ci.org/naoufal/react-native-progress-hud) 5 | [![Code Climate](https://img.shields.io/codeclimate/github/naoufal/react-native-progress-hud.svg?style=flat-square)](https://codeclimate.com/github/naoufal/react-native-progress-hud) 6 | 7 | React Native Progress HUD is a [React Native](https://facebook.github.io/react-native/) port of the popular [`SVProgressHUD`](https://github.com/TransitApp/SVProgressHUD). It is a clean and easy-to-use HUD meant to display the progress of an ongoing task. 8 | 9 | Are you using [React](https://facebook.github.io/react/)? Check out [React Progress HUD](https://github.com/naoufal/react-progress-hud). 10 | 11 | ![progress-hud-screen](https://cloud.githubusercontent.com/assets/1627824/7716549/94f15754-fe61-11e4-9a59-358d460197f2.gif) 12 | 13 | ## Install 14 | ```shell 15 | npm i --save react-native-progress-hud 16 | ``` 17 | 18 | ## Usage 19 | Using the HUD in your app will usually look like this: 20 | ```js 21 | var ProgressHUD = require('react-native-progress-hud'); 22 | 23 | var YourComponent = React.createClass({ 24 | mixins: [ProgressHUD.Mixin], 25 | 26 | ... 27 | 28 | render() { 29 | return ( 30 | 31 | ... 32 | 37 | 38 | ); 39 | } 40 | ``` 41 | 42 | ### Showing the HUD 43 | You can display the HUD by calling: 44 | ```js 45 | this.showProgressHUD(); 46 | ``` 47 | 48 | ### Dismissing the HUD 49 | It can be dismissed by calling: 50 | ```js 51 | this.dismissProgressHUD(); 52 | ``` 53 | 54 | ### Child Components 55 | From time to time, you may need to show the HUD from the a child component. Using the HUD from a child component will look like this: 56 | 57 | ```js 58 | var YourChildComponent = React.createClass({ 59 | render() { 60 | contextTypes: { 61 | showProgressHUD: React.PropTypes.func, 62 | dismissProgressHUD: React.PropTypes.func 63 | }, 64 | 65 | return ( 66 | 67 | ... 68 | 71 | Show Progress HUD 72 | 73 | 74 | ); 75 | } 76 | ``` 77 | 78 | ## Props 79 | The following props can be used to modify the HUD's style and/or behaviour: 80 | 81 | | Prop | Type | Opt/Required | Default | Note | 82 | |---|---|---|---|---| 83 | |__`isVisible`__|_Boolean_|Required|`N/A`|Displays the HUD when set to true. 84 | |__`isDismissible`__|_Boolean_|Optional|`false`|When set to true, the HUD is dismissed on user interaction. 85 | |__`overlayColor`__|_String_|Optional|`rgba(0, 0, 0, 0)`|Sets the color of the overlay. 86 | |__`color`__|_String_|Optional|`#000`|Sets the color of the spinner. 87 | 88 | ## License 89 | Copyright (c) 2015, [Naoufal Kadhom](http://naoufal.com) 90 | 91 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 92 | 93 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 94 | -------------------------------------------------------------------------------- /examples/hud-example.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react-native'); 4 | var ProgressHUD = require('react-native-progress-hud'); 5 | 6 | var { 7 | AppRegistry, 8 | StyleSheet, 9 | Text, 10 | TouchableHighlight, 11 | View, 12 | } = React; 13 | 14 | 15 | var HUD = React.createClass({ 16 | mixins: [ProgressHUD.Mixin], 17 | 18 | clickHandler: function() { 19 | this.showProgressHUD(); 20 | }, 21 | 22 | render: function() { 23 | return ( 24 | 25 | 26 | react-native-progress-hud 27 | 28 | 29 | 30 | github.com/naoufal/react-native-progress-hud 31 | 32 | 33 | 39 | 43 | Show Progress HUD 44 | 45 | 46 | 51 | 52 | ); 53 | } 54 | }); 55 | 56 | var styles = StyleSheet.create({ 57 | container: { 58 | flex: 1, 59 | justifyContent: 'center', 60 | alignItems: 'center', 61 | backgroundColor: '#F5FCFF', 62 | }, 63 | welcome: { 64 | margin: 10, 65 | fontSize: 20, 66 | fontWeight: '600', 67 | textAlign: 'center' 68 | }, 69 | instructions: { 70 | marginBottom: 5, 71 | color: '#333333', 72 | fontSize: 13, 73 | textAlign: 'center' 74 | }, 75 | btn: { 76 | borderRadius: 3, 77 | marginTop: 200, 78 | paddingTop: 15, 79 | paddingBottom: 15, 80 | paddingLeft: 15, 81 | paddingRight: 15, 82 | backgroundColor: '#0391D7', 83 | } 84 | }); 85 | 86 | AppRegistry.registerComponent('HUDExample', () => HUDExample); 87 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/index'); 2 | -------------------------------------------------------------------------------- /jest-support/preprocessor.js: -------------------------------------------------------------------------------- 1 | var babel = require('babel-core'); 2 | 3 | module.exports = { 4 | process: function (src, filename) { 5 | if (filename.match(/node_modules/)) { 6 | return src; 7 | } 8 | 9 | var result = babel.transform(src, {filename: filename}); 10 | return result.code; 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-progress-hud", 3 | "version": "1.0.4", 4 | "description": "A clean and lightweight progress HUD for your React Native app.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/naoufal/react-native-progress-hud.git" 12 | }, 13 | "keywords": [ 14 | "react", 15 | "native", 16 | "progress", 17 | "hud", 18 | "popup", 19 | "spinner", 20 | "loader", 21 | "loading", 22 | "react-component" 23 | ], 24 | "author": "Naoufal Kadhom (https://github.com/naoufal)", 25 | "license": "ISC", 26 | "bugs": { 27 | "url": "https://github.com/naoufal/react-native-progress-hud/issues" 28 | }, 29 | "homepage": "https://github.com/naoufal/react-native-progress-hud", 30 | "dependencies": { 31 | "react-tween-state": "0.0.5" 32 | }, 33 | "devDependencies": { 34 | "babel-core": "5.4.7", 35 | "jest-cli": "0.4.5", 36 | "react": "0.13.1" 37 | }, 38 | "jshintConfig": { 39 | "esnext": true, 40 | "node": true 41 | }, 42 | "jest": { 43 | "scriptPreprocessor": "jest-support/preprocessor.js", 44 | "unmockedModulePathPatterns": [ 45 | "react", 46 | "babel-core" 47 | ], 48 | "testFileExtensions": [ 49 | "js" 50 | ] 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/__mocks__/react-native.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var ReactNative = React; 4 | ReactNative.StyleSheet = { 5 | create: function(styles) { 6 | return styles; 7 | } 8 | }; 9 | 10 | module.exports = ReactNative; 11 | -------------------------------------------------------------------------------- /src/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | jest.dontMock('../index'); 2 | 3 | var React = require('react/addons'); 4 | var TestUtils = React.addons.TestUtils; 5 | var ProgressHUD = require('../index'); 6 | 7 | describe('ProgressHUD', function() { 8 | it('should be a ReactElement', function() { 9 | var is_element = TestUtils.isElement( 10 | /*jshint ignore:start */ 11 | 12 | /*jshint ignore:end */ 13 | ); 14 | 15 | expect(is_element).toBe(true); 16 | }); 17 | 18 | it('should not be dismissible by default', function() { 19 | expect(ProgressHUD.defaultProps.isDismissible).toBe(false); 20 | }); 21 | 22 | it('should default to a black spinner', function() { 23 | expect(ProgressHUD.defaultProps.color).toBe('#000'); 24 | }); 25 | 26 | it('should default to a transparent overlay', function() { 27 | expect(ProgressHUD.defaultProps.overlayColor).toBe('rgba(0, 0, 0, 0)'); 28 | }); 29 | }); 30 | 31 | describe('Mixin', function() { 32 | it('should expose a Mixin', function() { 33 | expect(ProgressHUD.Mixin).toBeTruthy(); 34 | }); 35 | 36 | it('should expose a showProgressHUD method', function() { 37 | expect(ProgressHUD.Mixin.showProgressHUD).toBeTruthy(); 38 | }); 39 | 40 | it('should expose a dismissProgressHUD method', function() { 41 | expect(ProgressHUD.Mixin.dismissProgressHUD).toBeTruthy(); 42 | }); 43 | }); 44 | 45 | -------------------------------------------------------------------------------- /src/images/index.js: -------------------------------------------------------------------------------- 1 | var images = { 2 | "1x": "iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAABjlJREFUaAWVltuS3EQQRHcAY+AVm3f//+c4+At4gwjAl6VOj44iVdM9kiuip25Z1Zmr0di319fXDy8vL69PztfWy5zYPP2Ib7fb59r/vjC/18GvbLUHXu6VY89H/Ydt821xA6DsZW5M3xiPWbtnzz+dAWWM91g3n/rvCiVRvIdhzLx7e3r6Pd5Kl9yMHIOz+rTGE5EEAGM9y7RZH5x1Y/FXfRJjJvPLcQpxCYRmQqxJXN8FOC+evStLomAy/6Y4hUiIBXzleKnSJDbz1DzMp4nP2izuxH2p9fQzPuAVwmWdQBcjofTMkPdTpUt2IFMTz/KlCOYUsro1xRjrJd//AOxS7Gov9Wekz3oPohACsRkZLsMkTixBRaz8wNa/IeLJZ5aEIZeHnoS7z7kRnz0RL1eMHoLEGssURe1MAJgkI9FZzZ4+MXvchUBgb1bMsNZF0JM8PebMmTkT4z1JkLjn4GY154dXSAqAhCZBFmE+BXJJr/wYWHwcSBRmRpY7FKCfze1CJOudKYoFmBhyxYzG9sEyMV1Y4owlzr5nR1x64n5efCJckALIMcm5iLyLoScuRTC/MnYkmZUY7xXb59g/egiRBAUsBbnAnl4x5MxjYuk9E5S4lQDrYImdWfnlE+liWKbgCoexNM1LwIFnx8wkedW7d+W5Y/yDKEGAKQCAObGLrEMkzT77OMx6EpcCvlQjT/bYR+7emWcv9f2JSJhixmCsuZQ+8czAKkQxiZNokjemR+w9enYSY8SezIcQLqSpgANg62WfpWD7yTkwMyHsoSf57ulxxOHzVLrnxsP7q6UI/GjUBwuwXEScWMhCxrkKB16yXQzYz3X0xuSKUEi/t/OpkWGj7q8WlQRKzGX2zfGQ5FKw+pyj1oVAnPNpOwjwgOfkHcZVPvB7yBXCQJIAiFHH0rscrxhJJ3H6PnF2QPi/OIpSwLeIYJ+cRuxFiuiAzB1MT8yRzPcVI4aD/VuHGAwiyP+pwxNBiHNdRLV2onkfdc36yH0iNvUHUBVXOfU8EGInf31E6SH913YQ5NcpZ42rvbyPngZ+t5UQAAfgPnEMOkYy+J/r/FSHJ/JHHYTxRPKvX+nhnr6P/soOWL9agvMrZm3lO5bcml+vN1X7rc7HOu/qkNsTq6/WsJ5bT/+A6U/kAbBNZ904PTFHkuz9sc4vdX6t82cd+uSI8V7wzuKx7rM2ANuHuJG6cAVIsDE+Y8ng+fpwIPu2DsS5g5f77zoYAmdi3JO7wfecGmZ9JFeFMOSgsR4CHvZxFAJperwXiOEdwfh+U0O0s3h3pq/y4W5yDIx241KH9uIWCEwvFu/FEoFUCkEMNbCQ9h9C983E5F5iT4U7cefT7//7PQO6ML0C9CkEQeQKYT9i+NlFkCQQw3EHnjzvybhaew8cNnb1J+IFq2HqXKaXgKTTiwPLpQpxhrpGP4/78XnAmxszN75aXmhD78DMS0afAoitM4tJEjEKcm/2xTE/CJYnTuwsXn61BM+8iyWbxDMWB1FMkopR0L17/ATrfMagkpNiH172BBFjLrSngPRdQM7ct9yFpAhid4rBS5w4+8Y7+a0/ct4RLsUEZmwtiaWAHoNPrPPsxLjUsxLCjOa+xNpPQePnMi8znnkJdvK9nrMSkjw58YwYc9TZh8eoYbkzY3pDUP5qJWAWJ+Hsp7CsSwCvKSi9oiQPVjF695JrQ0Al9MYTsSl45sFQT09sPpuhlpbkjWcinGG3fWLM3Pvu1XoqsydCM0k7JGm99RmW2soU8cz7dFKAcd/LnsOvVhLrseTTE3s6nsusEWtcip2JYC8YBBFj/Wm4H3942bORMYsyP4vZC6ZbiqA3EyPxFGGt7zvks5/fJJoijPWJ6zGXzMR4+ZmILvpUTL4jXg6BK2STvARzR9aMFWCOt8Y+Y4WkgIxzfuxIIRKjYXzFdzx5Gju6JeGMwZk7oyjymRj6l1/2lSCWn/XArEzSenAZm+f8TMyll70TZal/ZXt5kbEYc7wk9WIyN3aOvNtDbfbVktxVzyWJ7Zeac7nEs2YdL0E9eGNnZrXDExGIT2LGWTfWg9EytgaZXs+acXpmydPYMa35RAAD8pBj5vpZjZ71LXwgbV0vYXLj9NTZm6R7Dka7/Q+G5FcOipn+rwAAAABJRU5ErkJggg==" 3 | }; 4 | 5 | module.exports = images; 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react-native'); 4 | var tweenState = require('react-tween-state'); 5 | 6 | var { 7 | Image, 8 | StyleSheet, 9 | TouchableHighlight, 10 | View 11 | } = React; 12 | 13 | var styles = require('./styles'); 14 | var images = require('./images'); 15 | 16 | var SPIN_DURATION = 1000; 17 | 18 | var ProgressHUDMixin = { 19 | getInitialState() { 20 | return { 21 | is_hud_visible: false 22 | }; 23 | }, 24 | 25 | showProgressHUD() { 26 | this.setState({ 27 | is_hud_visible: true 28 | }); 29 | }, 30 | 31 | dismissProgressHUD() { 32 | this.setState({ 33 | is_hud_visible: false 34 | }); 35 | }, 36 | 37 | childContextTypes: { 38 | showProgressHUD: React.PropTypes.func, 39 | dismissProgressHUD: React.PropTypes.func 40 | }, 41 | 42 | getChildContext() { 43 | return { 44 | showProgressHUD: this.showProgressHUD, 45 | dismissProgressHUD: this.dismissProgressHUD 46 | }; 47 | }, 48 | }; 49 | 50 | var ProgressHUD = React.createClass({ 51 | mixins: [tweenState.Mixin], 52 | 53 | contextTypes: { 54 | showProgressHUD: React.PropTypes.func.isRequired, 55 | dismissProgressHUD: React.PropTypes.func 56 | }, 57 | 58 | statics: { 59 | Mixin: ProgressHUDMixin 60 | }, 61 | 62 | propTypes: { 63 | isDismissible: React.PropTypes.bool, 64 | isVisible: React.PropTypes.bool.isRequired, 65 | color: React.PropTypes.string, 66 | overlayColor: React.PropTypes.string 67 | }, 68 | 69 | getDefaultProps() { 70 | return { 71 | isDismissible: false, 72 | color: '#000', 73 | overlayColor: 'rgba(0, 0, 0, 0)' 74 | }; 75 | }, 76 | 77 | getInitialState() { 78 | return { 79 | rotate_deg: 0 80 | }; 81 | }, 82 | 83 | componentDidMount() { 84 | // Kick off rotation animation 85 | this._rotateSpinner(); 86 | 87 | // Set rotation interval 88 | this.interval = setInterval(() => { 89 | this._rotateSpinner(); 90 | }, SPIN_DURATION); 91 | }, 92 | 93 | componentWillUnmount() { 94 | clearInterval(this.interval); 95 | }, 96 | 97 | _rotateSpinner() { 98 | this.tweenState('rotate_deg', { 99 | easing: tweenState.easingTypes.linear, 100 | duration: SPIN_DURATION, 101 | endValue: this.state.rotate_deg === 0 ? 360 : this.state.rotate_deg + 360 102 | }); 103 | }, 104 | 105 | _clickHandler() { 106 | if (this.props.isDismissible) { 107 | this.context.dismissProgressHUD(); 108 | } 109 | }, 110 | 111 | render() { 112 | // Return early if not visible 113 | if (!this.props.isVisible) { 114 | return ; 115 | } 116 | 117 | // Set rotation property value 118 | var deg = Math.floor( 119 | this.getTweeningValue('rotate_deg') 120 | ).toString() + 'deg'; 121 | 122 | return ( 123 | /*jshint ignore:start */ 124 | 133 | 138 | 150 | 151 | 152 | 153 | 154 | 155 | /*jshint ignore:end */ 156 | ); 157 | } 158 | }); 159 | 160 | 161 | module.exports = ProgressHUD; 162 | -------------------------------------------------------------------------------- /src/styles.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react-native'); 4 | 5 | var { StyleSheet } = React; 6 | 7 | var styles = StyleSheet.create({ 8 | overlay: { 9 | alignItems: 'center', 10 | justifyContent: 'center', 11 | flex: 1, 12 | position: 'absolute', 13 | top: 0, 14 | left: 0, 15 | right: 0, 16 | bottom: 0, 17 | }, 18 | container: { 19 | justifyContent: 'center', 20 | alignItems: 'center', 21 | width: 100, 22 | height: 100, 23 | borderRadius: 16, 24 | backgroundColor: '#FFFFFF' 25 | }, 26 | spinner: { 27 | alignItems: 'center', 28 | justifyContent: 'center', 29 | width: 50, 30 | height: 50, 31 | borderRadius: 50 / 2 32 | }, 33 | inner_spinner: { 34 | width: 42, 35 | height: 42, 36 | borderRadius: 42 / 2, 37 | backgroundColor: '#FFFFFF' 38 | } 39 | }); 40 | 41 | module.exports = styles; 42 | --------------------------------------------------------------------------------