Skip to content

Commit d0080f1

Browse files
prscmsprscms
committed
- updating README
1 parent e500766 commit d0080f1

File tree

1 file changed

+87
-48
lines changed

1 file changed

+87
-48
lines changed

‎README.md‎

Lines changed: 87 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,75 @@
66
<a href="https://github.com/prscX/react-native-shine-button#License"><img src="https://img.shields.io/npm/l/react-native-shine-button.svg?style=flat" /></a>
77
</p>
88

9-
109
ReactNative: Native Shine Button (Android/iOS)
1110

1211
If this project has helped you out, please support us with a star 🌟
12+
1313
</h1>
1414

1515
This library is a React Native bridge around native Siri wave animation:
1616

17-
18-
| **[Android: ChadCSong/ShineButton](https://github.com/ChadCSong/ShineButton) & [iOS: imwcl/WCLShineButton](https://github.com/imwcl/WCLShineButton)** |
19-
| ----------------- |
20-
21-
| |
22-
| ----------------- |
23-
| <img src="./assets/hero.gif" /> |
17+
| **[Android: ChadCSong/ShineButton](https://github.com/ChadCSong/ShineButton) & [iOS: imwcl/WCLShineButton](https://github.com/imwcl/WCLShineButton)** |
18+
| ----------------------------------------------------------------------------------------------------------------------------------------------------- |
2419

2520

21+
| |
22+
| ------------------------------- |
23+
| <img src="./assets/hero.gif" /> |
2624

2725
## 📖 Getting started
2826

2927
`$ npm install react-native-shine-button --save`
3028

29+
## **RN61 >= RNBAS V2 >**
30+
31+
- Add `react-native-image-helper` to your app package.json
32+
33+
`$ npm install react-native-image-helper --save`
34+
35+
- Add `react-native-vector-icons` to your app package.json and configure it as per their installation steps
36+
37+
`$ npm install react-native-vector-icons --save`
38+
39+
- **iOS**
40+
41+
- Add the following to your `Podfile` -> `ios/Podfile` and run pod update:
42+
43+
```
44+
use_native_modules!
45+
pod 'RNShineButton', :path => '../node_modules/react-native-shine-button/ios'
46+
47+
use_frameworks!
48+
pod 'WCLShineButton',:git => 'https://github.com/prscX/WCLShineButton.git', :branch =>'master'
49+
```
50+
51+
- **Android**
52+
53+
Please add below snippet into your app `build.gradle`
54+
55+
```
56+
allprojects {
57+
repositories {
58+
maven { url 'https://jitpack.io' }
59+
}
60+
}
61+
```
62+
3163
## **RN61 >= RNBAS V1 >**
3264

3365
> RN61+ please use `react-native-shine-button` V1 and above
3466
3567
- **iOS**
3668

37-
- Add the following to your `Podfile` -> `ios/Podfile` and run pod update:
69+
- Add the following to your `Podfile` -> `ios/Podfile` and run pod update:
3870

39-
```
40-
use_native_modules!
71+
```
72+
use_native_modules!
4173
pod 'RNShineButton', :path => '../node_modules/react-native-shine-button/ios'
4274

4375
use_frameworks!
4476
pod 'WCLShineButton',:git => 'https://github.com/prscX/WCLShineButton.git', :branch =>'master'
45-
```
77+
```
4678

4779
- **Android**
4880

@@ -58,16 +90,14 @@ allprojects {
5890

5991
## **RN60 < RNBAS V1 <**
6092

61-
> RN60 below please use `react-native-bottom-action-sheet` V.0.*
62-
93+
> RN60 below please use `react-native-bottom-action-sheet` V.0.\*
6394
6495
- `$ npm install react-native-shine-button --save`
6596

6697
- `$ react-native link react-native-shine-button`
6798

6899
- `$ react-native link react-native-vector-icons`
69100

70-
71101
#### Android
72102

73103
- Please add below snippet to `defaultConfig` in your app `build.gradle`file. This is with respect to [ISSUE: 1](https://github.com/prscX/react-native-shine-button/issues/1):
@@ -98,45 +128,53 @@ allprojects {
98128
}
99129
}
100130
```
101-
> **Note:** This library is supported on Android SDK 27 > above
102131

132+
> **Note:** This library is supported on Android SDK 27 > above
103133
104134
#### iOS
105-
- After `react-native link react-native-shine-button`, please verify `node_modules/react-native-shine-button/ios/` contains `Pods` folder. If does not exist please execute `pod install` command on `node_modules/react-native-shine-button/ios/`, if any error => try `pod repo update` then `pod install`
106-
- After verification, open your project and create a folder 'RNShineButton' under Libraries.
107-
- Drag `node_modules/react-native-shine-button/ios/pods/Pods.xcodeproject` into RNShineButton, as well as the RNShineButton.xcodeproject if it does not exist.
108-
- Add the `WCLShineButton.framework` into your project's `Embedded Binaries` and make sure the framework is also in linked libraries.
109-
- Go to your project's `Build Settings -> Framework Search Path` and set `$(inherited) to recursive`.
110135

111-
<img src="assets/setup.gif" />
136+
- After `react-native link react-native-shine-button`, please verify `node_modules/react-native-shine-button/ios/` contains `Pods` folder. If does not exist please execute `pod install` command on `node_modules/react-native-shine-button/ios/`, if any error => try `pod repo update` then `pod install`
137+
- After verification, open your project and create a folder 'RNShineButton' under Libraries.
138+
- Drag `node_modules/react-native-shine-button/ios/pods/Pods.xcodeproject` into RNShineButton, as well as the RNShineButton.xcodeproject if it does not exist.
139+
- Add the `WCLShineButton.framework` into your project's `Embedded Binaries` and make sure the framework is also in linked libraries.
140+
- Go to your project's `Build Settings -> Framework Search Path` and set `$(inherited) to recursive`.
112141

142+
<img src="assets/setup.gif" />
113143

114144
## 💻 Usage
115145

116146
```javascript
117-
import RNShineButton from 'react-native-shine-button';
118-
119-
<RNShineButton shape={"heart"} color={"#808080"} fillColor={"#ff0000"} size={100} />
120-
147+
import RNShineButton from 'react-native-shine-button'
148+
;<RNShineButton
149+
shape={'heart'}
150+
color={'#808080'}
151+
fillColor={'#ff0000'}
152+
size={100}
153+
/>
121154
```
122155

123156
## Icons
124157

125158
- **RN Vector Icons:** It supports [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library. Please find below snippet for the usage:
126159

127160
```javascript
128-
import RNShineButton from 'react-native-shine-button';
129-
import Icon from 'react-native-vector-icons/FontAwesome'
161+
import RNShineButton from 'react-native-shine-button'
162+
import Icon from 'react-native-vector-icons/FontAwesome'
130163

131-
let music = <Icon family={"FontAwesome"} name={"music"} color={"#808080"} />;
164+
let music = <Icon family={'FontAwesome'} name={'music'} color={'#808080'} />
132165

133-
<RNShineButton shape={music} color={"#808080"} fillColor={"#ff0000"} size={100} />
166+
;<RNShineButton
167+
shape={music}
168+
color={'#808080'}
169+
fillColor={'#ff0000'}
170+
size={100}
171+
/>
134172
```
135173

136174
> **Note:**
175+
>
137176
> - We have added `family` prop for `Icon` class, please make sure that you pass the props
138177
139-
140178
- **Custom Icons**
141179

142180
> **Note:**
@@ -147,50 +185,51 @@ import RNShineButton from 'react-native-shine-button';
147185

148186
> Please refer example application for the image usage.
149187
150-
151188
## 💡 Props
152189

153-
154-
| Prop | Type | Default | Note |
155-
| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |
156-
| `shape` | `string OR react-native-vector-icons` | | The type of Shine Button you want. It's props are heart, like, star, smile. Even you are specify a react-native-vector-icons |
157-
| `color` | `string: HEX-COLOR` | | Color which you want then the Shine Button is not active |
158-
| `fillColor` | `string: HEX-COLOR` | | Fill Color then the Shine Button is clicked |
159-
| `size` | `number` | | Size of Shine Button | |
160-
| `disabled` | `bool` | | Disabling the Shine Button | |
161-
| `value` | `bool` | | Default value whether it is selected or not
162-
| `onChange` | `func` | | It is invoke then the value of shine button is change
163-
190+
| Prop | Type | Default | Note |
191+
| ----------- | ------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
192+
| `shape` | `string OR react-native-vector-icons` | | The type of Shine Button you want. It's props are heart, like, star, smile. Even you are specify a react-native-vector-icons |
193+
| `color` | `string: HEX-COLOR` | | Color which you want then the Shine Button is not active |
194+
| `fillColor` | `string: HEX-COLOR` | | Fill Color then the Shine Button is clicked |
195+
| `size` | `number` | | Size of Shine Button | |
196+
| `disabled` | `bool` | | Disabling the Shine Button | |
197+
| `value` | `bool` | | Default value whether it is selected or not |
198+
| `onChange` | `func` | | It is invoke then the value of shine button is change |
164199

165200
## ✨ Credits
166201

167-
- Android lib [ChadCSong/ShineButton](https://github.com/ChadCSong/ShineButton) Android implement.
202+
- Android lib [ChadCSong/ShineButton](https://github.com/ChadCSong/ShineButton) Android implement.
168203
- iOS lib [imwcl/WCLShineButton](https://github.com/imwcl/WCLShineButton) iOS implement
169204

170205
## 🤔 How to contribute
206+
171207
Have an idea? Found a bug? Please raise to [ISSUES](https://github.com/prscX/react-native-bottom-action-sheet/issues).
172208
Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.
173209

174210
## 💫 Where is this library used?
175-
If you are using this library in one of your projects, add it in this list below. ✨
176211

212+
If you are using this library in one of your projects, add it in this list below. ✨
177213

178214
## 📜 License
215+
179216
This library is provided under the Apache License.
180217

181218
RNShineButton @ [prscX](https://github.com/prscX)
182219

183220
## 💖 Support my projects
221+
184222
I open-source almost everything I can, and I try to reply everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).
185223

186224
However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:
187-
* Starring and sharing the projects you like 🚀
188-
* If you're feeling especially charitable, please follow [prscX](https://github.com/prscX) on GitHub.
225+
226+
- Starring and sharing the projects you like 🚀
227+
- If you're feeling especially charitable, please follow [prscX](https://github.com/prscX) on GitHub.
189228

190229
<a href="https://www.buymeacoffee.com/prscX" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
191230

192231
Thanks! ❤️
193232
<br/>
194233
[prscX.github.io](https://prscx.github.io)
195234
<br/>
196-
</ Pranav >
235+
</ Pranav >

0 commit comments

Comments
 (0)