Skip to content

Commit df800ae

Browse files
niftylettuceniftylettuce
committed
feat: added working example, updated docs, linting
1 parent 8a76c2d commit df800ae

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+20154
-224
lines changed

‎.babelrc

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true

‎.eslintrc

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎.gitattributes

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto

‎.gitignore

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
node_modules
2-
*.log
31
.DS_Store
2+
*.log
3+
.idea
4+
node_modules
45
*.sw*
6+
.cache-loader

‎.npmignore

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
.eslintrc
2-
.babelrc
31
media
2+
favicon.ico
3+
config.js
4+
index.html
5+
example

‎README.md

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# React Native Loading Spinner Overlay
2+
3+
[![code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
4+
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
5+
[![made with lass](https://img.shields.io/badge/made_with-lass-95CC28.svg)](https://github.com/lassjs/lass)
6+
[![license](https://img.shields.io/github/license/joinspontaneous/react-native-loading-spinner-overlay.svg)](LICENSE)
7+
[![npm downloads](https://img.shields.io/npm/dt/react-native-loading-spinner-overlay.svg)](https://npm.im/react-native-loading-spinner-overlay)
8+
9+
<img src="https://cdn.jsdelivr.net/gh/joinspontaneous/react-native-loading-spinner-overlay/media/demo.gif" width="200" height="393.5" alt="" />
10+
11+
12+
## Table of Contents
13+
14+
* [Install](#install)
15+
* [Example](#example)
16+
* [Options](#options)
17+
* [Recommended Implementation](#recommended-implementation)
18+
* [Contributors](#contributors)
19+
* [License](#license)
20+
21+
22+
## Install
23+
24+
[npm][]:
25+
26+
```sh
27+
npm install react-native-loading-spinner-overlay
28+
```
29+
30+
[yarn][]:
31+
32+
```sh
33+
yarn add react-native-loading-spinner-overlay
34+
```
35+
36+
37+
## Example
38+
39+
See [the example App.js file][example] for an example implementation.
40+
41+
42+
## Options
43+
44+
| Property | Type | Default | Description |
45+
| --------------- | ---------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
46+
| cancelable | Boolean | `false` | **Android**: If set to false, it will prevent spinner from hiding when pressing the hardware back button. If set to true, it will allow spinner to hide if the hardware back button is pressed. |
47+
| color | String | `"white"` | Changes the spinner's color (example values are `red`, `#ff0000`, etc). For adjusting the contrast see `overlayColor` prop below. |
48+
| animation | String (enum) `none`, `slide`, `fade` | `"none"` | Changes animation on show and hide spinner's view. |
49+
| overlayColor | String | `rgba(0, 0, 0, 0.25)` | Changes the color of the overlay. |
50+
| size | String (enum) `small`, `normal`, `large` | `"large"` | Sets the spinner's size. No other cross-platform sizes are supported right now. |
51+
| textContent | String | `""` | Optional text field to be shown. |
52+
| textStyle | StyleSheet | `-` | The style to be applied to the `<Text>` that displays the `textContent`. |
53+
| visible | Boolean | `false` | Controls the visibility of the spinner. |
54+
| indicatorStyle | StyleSheet | `undefined` | Additional styles for the [ActivityIndicator](https://facebook.github.io/react-native/docs/activityindicator) to inherit |
55+
| customIndicator | Element | `undefined` | An alternative, custom component to use instead of the default `<ActivityIndicator />` |
56+
| children | Element | `undefined` | Children element(s) to nest inside the spinner |
57+
58+
59+
## Recommended Implementation
60+
61+
We recommend that you follow two rules when implementing this component.
62+
63+
1. Integrate it inside the parent-most/top-level/root component in your app
64+
2. Wrap usage of actions after attempting to stop the spinner with `setTimeout` to avoid [the non-stop spinner issue](https://github.com/joinspontaneous/react-native-loading-spinner-overlay/issues/30):
65+
66+
```js
67+
this.setState({ spinner: false });
68+
69+
setTimeout(() => {
70+
Alert.alert('Oops!', err.message);
71+
}, 100);
72+
```
73+
74+
75+
## Contributors
76+
77+
| Name | Website |
78+
| ------------------- | ------------------------- |
79+
| **Nick Baugh** | <http://niftylettuce.com> |
80+
| **Spencer Snyder** | <http://spencersnyder.io> |
81+
| **Luciano Lima** | |
82+
| **George Savvidis** | |
83+
| **Sandro Machado** | |
84+
| **Ben Sutter** | |
85+
| **Ivan Kuznetsov** | |
86+
| **Darren Camp** | |
87+
| **Rigo B Castro** | |
88+
| **Raj Kissu** | |
89+
| **Ivan Pusic** | |
90+
| **Antonio Grass** | |
91+
| **Vijay Chouhan** | |
92+
| **Jacob Lee** | |
93+
| **Matt Labrum** | |
94+
95+
96+
## License
97+
98+
[MIT](LICENSE) © Nick Baugh
99+
100+
101+
##
102+
103+
[npm]: https://www.npmjs.com/
104+
105+
[yarn]: https://yarnpkg.com/
106+
107+
[example]: https://github.com/joinspontaneous/react-native-loading-spinner-overlay/blob/master/example/App.js

‎Readme.md

Lines changed: 0 additions & 163 deletions
This file was deleted.

‎config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
docute.init({
2+
debug: true,
3+
title: 'React Native Loading Spinner Overlay',
4+
repo: 'joinspontaneous/react-native-loading-spinner-overlay',
5+
'edit-link': 'https://github.com/joinspontaneous/react-native-loading-spinner-overlay/tree/master/',
6+
twitter: 'niftylettuce',
7+
nav: {
8+
default: [
9+
{
10+
title: 'React Native Loading Spinner Overlay',
11+
path: '/'
12+
}
13+
]
14+
}
15+
});

‎example/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["module:metro-react-native-babel-preset"]
3+
}

0 commit comments

Comments
 (0)