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

-3
This file was deleted.

‎.editorconfig

+9
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

-13
This file was deleted.

‎.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto

‎.gitignore

+4-2
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

+4-2
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

+107
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

-163
This file was deleted.

‎config.js

+15
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

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

‎example/.buckconfig

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

0 commit comments

Comments
 (0)