Skip to content

Commit a0ea7a8

Browse files
mukesh-simformmukesh-simform
authored
Merge pull request #47 from SimformSolutionsPvtLtd/feature/update_readme
docs: UNT-T22286: README.md file update
2 parents b1f4d39 + 5f07206 commit a0ea7a8

File tree

5 files changed

+184
-165
lines changed

5 files changed

+184
-165
lines changed

‎CONTRIBUTING.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Contributing
2+
3+
We welcome code changes that improve this library or fix a problem, and please make sure to follow all best practices and test all the changes/fixes before committing and creating a pull request. 🚀 🚀
4+
5+
### Committing and Pushing Changes
6+
7+
Commit messages should be formatted as:
8+
9+
```
10+
<type>[optional scope]: <description>
11+
12+
[optional body]
13+
14+
[optional footer]
15+
```
16+
17+
Where type can be one of the following:
18+
19+
- feat
20+
- fix
21+
- docs
22+
- chore
23+
- style
24+
- refactor
25+
- test
26+
27+
and an optional scope can be a component
28+
29+
```
30+
docs: update contributing guide
31+
```
32+
33+
```
34+
fix(TicketId/Component): layout flicker issue
35+
```

‎README.md‎

Lines changed: 149 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -1,186 +1,170 @@
1-
# react-native-spinner-button [![npm version](https://badge.fury.io/js/react-native-spinner-button.svg)](https://badge.fury.io/js/react-native-spinner-button)
1+
# react-native-spinner-button [![npm version](https://badge.fury.io/js/react-native-spinner-button.svg)](https://badge.fury.io/js/react-native-spinner-button) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)
22
This is a pure javascript and react-native Button component with a Spinner embeded in it.
33
In many of the react-native projects we 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.
44

55
From a developer perspective, it is very painful to manage two different components: a button and a spinner for lots of buttons! So when we came accross this beautiful component [SSspinnerButton](https://github.com/simformsolutions/SSSpinnerButton), we decided to do something like that in react-native.
66

77
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.
88

9-
![Example of react-native-spinner-button](https://github.com/simformsolutions/react-native-spinner-button/blob/master/example.gif)
9+
## 🎬 Preview
1010

11-
## Features
12-
* Drop in replacement for a button and indicator combo
13-
* Very easy to use
14-
* Pure javscript component
15-
* Consistent look and feel on both iOS and Android
16-
* Any spinner from [react-native-indicators](https://github.com/n4kz/react-native-indicators) can be used with most of its properties
17-
* The animations _fadeIn_, _flipInX_ and _flipInY_ can be used from [react-native-animatable](https://github.com/oblador/react-native-animatable)
18-
* Give any style to your button
11+
![Example of react-native-spinner-button](./assets/example.gif)
12+
13+
## Quick Access
14+
15+
- [Installation](#installation) | [Usage and Examples](#usage) | [Properties](#properties) | [Example Code](#example) | [License](#license)
1916

2017
## Getting Started
2118

19+
Here's how to get started with react-native-spinner-button in your React Native project:
20+
21+
### Installation
22+
23+
#### 1. Install the package
24+
25+
```sh
26+
npm install react-native-spinner-button react-native-gradients react-native-svg
27+
```
28+
29+
Using `Yarn`:
30+
31+
```sh
32+
yarn add react-native-spinner-button react-native-gradients react-native-svg
33+
```
34+
35+
##### 2. Install cocoapods in the ios project
36+
2237
```bash
23-
npm i react-native-spinner-button --save
38+
cd ios && pod install
2439
```
2540

41+
42+
##### Know more about [react-native-gradients](https://www.npmjs.com/package/react-native-gradients) and [react-native-svg](https://www.npmjs.com/package/react-native-svg)
43+
44+
2645
## Usage
27-
```javascript
46+
47+
```jsx
48+
import React, {useState, useCallback} from 'react';
49+
import {StyleSheet, Text, View} from 'react-native';
2850
import SpinnerButton from 'react-native-spinner-button';
29-
...
30-
// Your button component
31-
<SpinnerButton
32-
buttonStyle={styles.buttonStyle}
33-
isLoading={this.state.defaultLoading}
34-
onPress={() => {
35-
this.setState({ defaultLoading: true });
36-
}}
37-
indicatorCount={10}
38-
>
39-
<Text style={styles.buttonText}>Default Or Ball SpinnerButton</Text>
40-
</SpinnerButton>
51+
52+
const App: React.FC = () => {
53+
const [isLoading, setLoading] = useState<boolean>(false);
54+
55+
const handleButtonPress = useCallback<() => void>(() => {
56+
setLoading(true);
57+
setTimeout(() => {
58+
setLoading(false);
59+
}, 3000);
60+
}, []);
61+
62+
return (
63+
<View style={styles.screen}>
64+
{/* Your button component */}
65+
<SpinnerButton
66+
buttonStyle={styles.buttonStyle}
67+
isLoading={isLoading}
68+
onPress={() => {
69+
handleButtonPress();
70+
}}
71+
indicatorCount={10}>
72+
<Text style={styles.buttonText}>Default Or Ball SpinnerButton</Text>
73+
</SpinnerButton>
74+
</View>
75+
);
76+
};
77+
78+
export default App;
79+
80+
const styles = StyleSheet.create({
81+
screen: {
82+
flex: 1,
83+
justifyContent: 'center',
84+
alignItems: 'center',
85+
},
86+
buttonStyle: {
87+
borderRadius: 10,
88+
margin: 10,
89+
backgroundColor: '#893346',
90+
},
91+
buttonText: {
92+
fontSize: 20,
93+
textAlign: 'center',
94+
color: 'white',
95+
},
96+
});
4197
```
42-
Don't forget to set the state variable you have given to _isLoading_ prop false when processing is done for the button tap.
43-
44-
## Common properties
45-
1. **animationType**
46-
* Type of animation for the button and spinner.
47-
* Default type: string
48-
* Default value: null | undefined
49-
2. **buttonStyle**
50-
* Its a stylesheet object.
51-
* Default button style
52-
```javascript
53-
defaultButtonStyle: {
54-
height: 50
55-
}
56-
```
57-
3. **borderStyle**
58-
* Its a stylesheet object with support all basic border property like width, radius, color and style(solid, dotted and dashed) etc.
59-
* If you want to need to apply border in your button then you should used like
60-
```javascript
61-
buttonBorderStyle: {
62-
borderWidth: 2,
63-
borderRadius: 10,
64-
borderColor: 'blue',
65-
borderStyle: 'solid'
66-
}
67-
```
68-
4. **spinnerColor**
69-
* The color of the Spinner.
70-
* Default type: string
71-
* Its default value is _white_. You can give spinnerColor in all react-native acceptable formats of color.
72-
5. **spinnerType**
73-
* Type of the spinner.
74-
* Default type: string
75-
* Its default value is _BallIndicator_.
76-
* These are all spinner types:
77-
1. BallIndicator
78-
2. BarIndicator
79-
3. DotIndicator
80-
4. MaterialIndicator
81-
5. PacmanIndicator
82-
6. PulseIndicator
83-
7. SkypeIndicator
84-
8. UIActivityIndicator
85-
9. WaveIndicator
86-
6. **isLoading**
87-
* The flag to render a Button or a Spinner. _false_ will render button and _true_ will render spinner.
88-
* Default type: boolean
89-
* Default value: _false_
90-
7. **onPress**
91-
* The function to execute on tap of the button.
92-
* Default type: function.
93-
* Default value: _nothing is executed_
94-
8. **indicatorCount**
95-
* The count property of react-native-indicators.
96-
* Default type: number
97-
* Default value: null | undefined
98-
9. **size**
99-
* The size of the Spinner.
100-
* Default type: number
101-
* Its default value _veries according to the spinnerType_.
102-
10. **spinnerOptions**
103-
* An object of waveMode for WaveIndicator for WaveIndicator.
104-
* Default type: Object
105-
* For more details about these properties, refer [react-native-indicators](https://github.com/n4kz/react-native-indicators)
106-
11. **gradientType**
107-
* Gradients allow you to show more than one color with a smooth transition between the colors (think Instagram logo).
108-
* They come in handy when trying to create multi-color backgrounds or custom buttons. You can have gradients in different varieties, horizontally, vertically, diagonally, etc.
109-
* Currently, we are supporting two types of gradient 1.Linear Gradient & 2.Radial Gradient.
110-
12. **gradientColors**
111-
* This is how we pass the colors we want to be displayed, colors can be passed in a different format, name, rgba, hex etc.
112-
* The colors should be ordered the way we want them to be displayed.
113-
* Eg. colors={[ “purple”, “white” ]} the gradient will move from purple to white.
114-
13. **gradientColoroffset**
115-
* An array of string that define where each color will stop in the gradient.
116-
* These values are also passed as a percentage of the entire gradient from 0% – 100% and have to map the corresponding colors passed in length and position.
117-
* For colors={[“red”, “yellow”, “green”}] then we’ll have locations={['0%', '50%', '80%']} with first color (red) covering '0%' – '50%', second (yellow) going from '50%' – '80%' and yellow '80%' – '100%'
118-
14. **gradientColorAngle**
119-
* The gradient line's angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.
120-
* The angle range of 0 to 360.
121-
* [More detail to read](https://www.quirksmode.org/css/images/angles.html)
122-
15. **gradientRadialRadius**
123-
* This property used for Radial type gradient in set radius of radial gradient.
124-
16. **gradientButtonHeight**
125-
* The size of the gradient component.
126-
* Default type: number
127-
17. **radialRadiusx**
128-
* The x coordinate of the center of the radial gradient.
129-
18. **radialRadiusy**
130-
* The y coordinate of the center of the radial gradient.
131-
19. **radialRadiusRX**
132-
* The horizontal radius of the radial gradient defining ellipse.
133-
20. **radialRadiusRY**
134-
* The vertical radius of the radial gradient defining ellipse.
135-
21. **animatedDuration**
136-
* Used for animation time, how long you have to execute your animation.
137-
22. **customSpinnerComponent**
138-
* This props will allow you to add your own custom spinner component.
139-
23. **animateWidth**
140-
* This props used to set component width when progress/loading will start..
141-
* If you want to not set this props then identify width and height which is minimum and then used that value.
142-
24. **animateHeight**
143-
* This props used to set component height when progress/loading will start.
144-
* If you want to not set this props then identify width and height which is minimum and then used that value.
145-
25. **animateRadius**
146-
* This props used to set component radius when progress/loading will start.
147-
* If you want to not set this props then create circle shape.
148-
26. **isConnected**
149-
* The flag to identify network connection and based on flag set user iteration. _false_ will render button with disable mode and _true_ will render button with normal mode.
150-
* Default type: boolean
151-
* Default value: _true_
152-
27. **disabled**
153-
* The flag to identify button enable/disable. _true_ will render button with disable mode and _false_ will render button with normal mode.
154-
* Default type: boolean
155-
* Default value: _false_
156-
28. **disableStyle**
157-
* Its a stylesheet object.
158-
* This style apply when identify button disable or if network connect not available.
159-
* Default value: null | undefined
160-
29. **gradientName**
161-
* Its a sample gradient name.
162-
* Default type: string
163-
* Its default value is null | undefined.
164-
* This properties used whenever you want to need gradient but not pass __gradientColors__, __gradientColoroffset__ and __gradientColorAngle__ properties.
165-
* if you want to see color combination of [Sample gradient](https://fx-gradient-previewer.netlify.app/)
166-
30. **disableGradientColors**
167-
* This is how we pass the colors we want to be displayed when button disable, colors can be passed in a different format, name, rgba, hex etc.
168-
* The colors should be ordered the way we want them to be displayed.
169-
* Eg. colors={[ “purple”, “white” ]} the gradient will move from purple to white.
98+
99+
#### 🎬 Preview
100+
101+
## ![Default Modal](./assets/exampleDemo.gif)
102+
103+
104+
## Properties
105+
106+
| Props | Default | Type | Description |
107+
| :-------------------- | :-----: | :---------------------: | :--------------------------------------------------------------------------------------------------- |
108+
| **onPress** | - | function | The function to execute on tap of the button |
109+
| animationType | null or undefined | string | Type of animation for the button and spinner, For more details about properties, refer [react-native-animatable](https://www.npmjs.com/package/react-native-animatable) |
110+
| buttonStyle | {height: 50} | array or object | Styling of button |
111+
| borderStyle | - | array or object | Its a stylesheet object with support all basic border property like width, radius, color and style(solid, dotted and dashed) etc |
112+
| spinnerColor | white | string | The color of the Spinner |
113+
| spinnerType | BallIndicator | string | Type of the spinner (BallIndicator, BarIndicator, DotIndicator, MaterialIndicator, PacmanIndicator, PulseIndicator, SkypeIndicator, UIActivityIndicator, WaveIndicator) |
114+
| isLoading | false | boolean | The flag to render a Button or a Spinner. false will render button and true will render spinner |
115+
| indicatorCount | 8 | number | The count property of react-native-indicators |
116+
| size | 40 | number | The size of the Spinner |
117+
| spinnerOptions | - | object | An object of waveMode for WaveIndicator for WaveIndicator. For more details about these properties, refer [react-native-indicators](https://github.com/n4kz/react-native-indicators) |
118+
| gradientType | - | string | Gradients allow you to show more than one color with a smooth transition between the colors (think Instagram logo). Currently, we are supporting two types of gradient (linear, radial) |
119+
| gradientColors | - | array | Colors can be passed in a different format name, rgba, hex etc. The colors should be ordered the way we want them to be displayed. Eg. colors={[ “purple”, “white” ]} the gradient will move from purple to white |
120+
| gradientColoroffset | - | array | An array of string that define where each color will stop in the gradient. These values are also passed as a percentage of the entire gradient from 0% – 100% and have to map the corresponding colors passed in length and position. For colors={[“red”, “yellow”, “green”}] then we’ll have locations={['0%', '50%', '80%']} with first color (red) covering '0%' – '50%', second (yellow) going from '50%' – '80%' and yellow '80%' – '100%' |
121+
| gradientColorAngle | - | number | The gradient line's angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there. The angle range of 0 to 360. [More detail to read](https://www.quirksmode.org/css/images/angles.html) |
122+
| gradientRadialRadius | - | number | This property used for Radial type gradient in set radius of radial gradient |
123+
| gradientButtonHeight | - | number | The size of the gradient component |
124+
| radialRadiusx | - | string or number | The x coordinate of the center of the radial gradient
125+
| radialRadiusy | - | string or number | The y coordinate of the center of the radial gradient |
126+
| radialRadiusRX | - | string or number | The horizontal radius of the radial gradient defining ellipse |
127+
| radialRadiusRY | - | string or number | The vertical radius of the radial gradient defining ellipse |
128+
| animatedDuration | 300 | number | Used for animation time, how long you have to execute your animation |
129+
| customSpinnerComponent | - | node | This props will allow you to add your own custom spinner component |
130+
| animateWidth | - | number | This props used to set component width when progress/loading will start. If you want to not set this props then identify width and height which is minimum and then used that value |
131+
| animateHeight | - | number | This props used to set component height when progress/loading will start. If you want to not set this props then identify width and height which is minimum and then used that value |
132+
| animateRadius | - | number | This props used to set component radius when progress/loading will start. If you want to not set this props then create circle shape |
133+
| isConnected | true | boolean | The flag to identify network connection and based on flag set user iteration. false will render button with disable mode and true will render button with normal mode |
134+
| disabled | false | boolean | The flag to identify button enable/disable. true will render button with disable mode and false will render button with normal mode |
135+
| disableStyle | - | array or object | Its a stylesheet object. This style apply when identify button disable or if network connect not available |
136+
| gradientName | - | string | This properties used whenever you want to need gradient but not pass gradientColors, gradientColoroffset and gradientColorAngle properties |
137+
| disableGradientColors | - | array | Colors can be passed in a different format name, rgba, hex etc. The colors should be ordered the way we want them to be displayed. Eg. colors={[ “purple”, “white” ]} the gradient will move from purple to white |
138+
170139

171140
## Example
172-
A full working example project is here [Example](https://github.com/simformsolutions/react-native-spinner-button/tree/master/Example)
173-
174-
## Acknowledgments and Big Thanks to
175-
* [react-native-indicators](https://github.com/n4kz/react-native-indicators)
176-
* [react-native-animatable](https://github.com/oblador/react-native-animatable)
177-
* [SSspinnerButton](https://github.com/simformsolutions/SSSpinnerButton)
178-
179-
## Roadmap (What to do in next)
180-
1. Support inbuild different gradient with name.
181-
2. Support result state (InPreogress, InSuccess and InFailure).
182-
3. Neon style apply
183-
4. Button shadow
141+
A full working example project is here [Example](./Example/App/App.tsx)
142+
143+
```sh
144+
yarn
145+
yarn example ios // For ios
146+
yarn example android // For Android
147+
```
148+
149+
150+
## Find this library useful? ❤️
151+
152+
Support it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-spinner-button/stargazers) for this repository.⭐
153+
154+
## Bugs / Feature requests / Feedbacks
155+
156+
For bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-spinner-button/issues/new?labels=bug&late=BUG_REPORT.md&title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-spinner-button/issues/new?labels=enhancement&late=FEATURE_REQUEST.md&title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-spinner-button/issues/new?labels=enhancement&late=FEATURE_REQUEST.md&title=%5BFEEDBACK%5D%3A)
157+
158+
159+
## 🤝 How to Contribute
160+
161+
We'd love to have you improve this library or fix a problem 💪
162+
Check out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.
163+
164+
## Awesome Mobile Libraries
165+
166+
- Check out our other [available awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)
167+
184168
## License
185169

186-
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
170+
- [MIT License](./LICENSE)

‎assets/example.gif‎

924 KB
Loading

‎assets/exampleDemo.gif‎

60.7 KB
Loading

‎example.gif‎

-2.24 MB
Binary file not shown.

0 commit comments

Comments
 (0)