Skip to content

Commit 9c3ca80

Browse files
BesbashBesbash
committed
initial commit
0 parents  commit 9c3ca80

File tree

7 files changed

+6282
-0
lines changed

7 files changed

+6282
-0
lines changed

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Rupal
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.

‎README.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# react-native-spinner-button
2+
This is a pure javascript and react-native Button component with a Spinner embeded in it.
3+
In many of the react-native projects I have worked on required the button to be disabled when app is processing something on tap of that button, and a loading indicator on it or beside it, so the user can be made aware of app doing some processing.
4+
5+
From a developer perspective, it is very painful to manage two different components: a button and a spinner for lots of buttons! So when I came accross this beautiful component [SSspinnerButton](https://github.com/simformsolutions/SSSpinnerButton), I decided to do something like that in react-native.
6+
7+
By default it will render a Button and you have to pass a boolean _isLoading_ prop to it. When the _isLoading_ will be true, it will render a Spinner in place of the Button and once its false, the Button will be rendered back again.
8+
9+
## Features
10+
* Drop in replacement for a button and indicator combo
11+
* Very easy to use
12+
* Pure javscript component
13+
* Consistent look and feel on both iOS and Android
14+
* Any spinner from [react-native-indicators](https://github.com/n4kz/react-native-indicators) can be used with most of its properties
15+
* The animations _fadeIn_, _flipInX_ and _flipInY_ can be used from [react-native-animatable](https://github.com/oblador/react-native-animatable)
16+
* Give any style to your button
17+
18+
## Getting Started
19+
20+
```bash
21+
npm i https://github.com/rupalpatel0008/react-native-spinner-button
22+
```
23+
24+
## Usage
25+
```javascript
26+
import SpinnerButton from 'react-native-spinner-button';
27+
...
28+
// Your button component
29+
<SpinnerButton
30+
buttonStyle={styles.buttonStyle}
31+
isLoading={this.state.defaultLoading}
32+
onPress={() => {
33+
this.setState({ defaultLoading: true });
34+
}}
35+
indicatorCount={10}
36+
>
37+
<Text style={styles.buttonText}>Default Or Ball SpinnerButton</Text>
38+
</SpinnerButton>
39+
```
40+
Don't forget to set the state variable you have given to _isLoading_ prop false when processing is done for the button tap.
41+
42+
## Common properties
43+
1. **animationType**
44+
* Type of animation for the button and spinner.
45+
* Default type: string
46+
* Default value: _fadeIn_
47+
2. **buttonStyle**
48+
* Its a stylesheet object.
49+
* Default button style
50+
```javascript
51+
defaultButtonStyle: {
52+
justifyContent: 'center',
53+
alignItems: 'center',
54+
height: 50,
55+
backgroundColor: '#25CAC6',
56+
}
57+
```
58+
3. **indicatorCount**
59+
* The count property of react-native-indicators.
60+
* Default type: number
61+
* Default value: _fadeIn_
62+
4. **isLoading**
63+
* The flag to render a Button or a Spinner. _false_ will render button and _true_ will render button.
64+
* Default type: boolean
65+
* Default value: _false_
66+
5. **onPress**
67+
* The function to execute on tap of the button.
68+
* Default type: functin.
69+
* Default value: _nothing is executed_
70+
6. **size**
71+
* The size of the Spinner.
72+
* Default type: number
73+
* Its default value _veries according to the spinnerType_.
74+
7. **spinnerColor**
75+
* The color of the Spinner.
76+
* Default type: string
77+
* Its default value is _white_. You can give spinnerColor in all react-native acceptable formats of color.
78+
8. **spinnerType**
79+
* Type of the spinner.
80+
* Default type: string
81+
* Its default value is _BallIndicator_.
82+
* These are all spinner types:
83+
1. BallIndicator
84+
2. BarIndicator
85+
3. DotIndicator
86+
4. MaterialIndicator
87+
5. PacmanIndicator
88+
6. PulseIndicator
89+
7. SkypeIndicator
90+
8. UIActivityIndicator
91+
9. WaveIndicator
92+
9. **spinnerOptions**
93+
* An object of waveMode for WaveIndicator for WaveIndicator.
94+
* Default type: Object
95+
* For more details about these properties, refer [react-native-indicators](https://github.com/n4kz/react-native-indicators)
96+
97+
## Example
98+
A full working example project is here [react-native-spinner-button-demo](https://github.com/rupalpatel0008/react-native-spinner-button-demo)
99+
100+
## Acknowledgments and Big Thanks to
101+
* [react-native-indicators](https://github.com/n4kz/react-native-indicators)
102+
* [react-native-animatable](https://github.com/oblador/react-native-animatable)
103+
* [SSspinnerButton](https://github.com/simformsolutions/SSSpinnerButton)
104+
105+
## License
106+
107+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

0 commit comments

Comments
 (0)