1- <img alt =" React Native Library Boilerplate " src =" https://github.com/WrathChaos/react-native-library-boilerplate/blob/master/ assets/logo.png" width =" 1050 " />
1+ <img alt =" React Native Bouncy Checkbox " src =" assets/logo.png " width =" 1050 " />
22
33
4- [ ![ Battle Tested ✅] ( https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-library-boilerplate )
4+ [ ![ Battle Tested ✅] ( https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-bouncy-checkbox )
55
66
7- [ ![ React Native Library Boiler Plate ] ( https://img.shields.io/badge/-React%20Native%20Library%20Boilerplate -lightgrey?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-library-boilerplate )
7+ [ ![ Fully customizable animated bouncy checkbox for React Native ] ( https://img.shields.io/badge/-Fully%20customizable%20animated%20bouncy%20checkbox%20for%20React%20Native -lightgrey?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-bouncy-checkbox )
88
99
10- [ ![ npm version] ( https://img.shields.io/npm/v/react-native-library-boilerplate .svg?style=for-the-badge )] ( https://www.npmjs.com/package/react-native-library-boilerplate )
11- [ ![ npm] ( https://img.shields.io/npm/dt/react-native-library-boilerplate .svg?style=for-the-badge )] ( https://www.npmjs.com/package/react-native-library-boilerplate )
10+ [ ![ npm version] ( https://img.shields.io/npm/v/react-native-bouncy-checkbox .svg?style=for-the-badge )] ( https://www.npmjs.com/package/react-native-bouncy-checkbox )
11+ [ ![ npm] ( https://img.shields.io/npm/dt/react-native-bouncy-checkbox .svg?style=for-the-badge )] ( https://www.npmjs.com/package/react-native-bouncy-checkbox )
1212![ Platform - Android and iOS] ( https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge )
1313[ ![ License: MIT] ( https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge )] ( https://opensource.org/licenses/MIT )
1414[ ![ styled with prettier] ( https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge )] ( https://github.com/prettier/prettier )
1515
1616<p align =" center " >
17- <img alt="React Native Library Boilerplate "
18- src="https://github.com/WrathChaos/react-native-library-boilerplate /blob/master/assets/Screenshots/JSLibraryBoilerplate.png " />
17+ <img alt="React Native Bouncy Checkbox "
18+ src="https://github.com/WrathChaos/react-native-bouncy-checkbox /blob/master/assets/Screenshots/JSLibraryBoilerplate.png " />
1919</p >
2020
2121## Installation
@@ -25,7 +25,7 @@ Add the dependency:
2525### React Native:
2626
2727``` ruby
28- npm i react- native- library - boilerplate
28+ npm i react- native- bouncy - checkbox
2929```
3030
3131## Peer Dependencies
@@ -35,57 +35,64 @@ npm i react-native-library-boilerplate
3535```
3636"react": ">= 16.x.x",
3737"react-native": ">= 0.55.x",
38+ "react-native-vector-icons": ">= 6.6.0",
39+ "react-native-dynamic-vector-icons": ">= 0.2.1"
3840```
3941
40- # Your Component Options
41-
42- - Option 1 Component
43- - Option 2 Component
44-
4542## Import
4643
4744``` js
48- import { Component1 , Component2 } from " react-native-library-boilerplate " ;
45+ import BouncyCheckbox from " react-native-bouncy-checkbox " ;
4946```
5047
51- # Component1 Usage
48+ # Usage
5249
50+ ## Basic (Default) Usage
5351``` js
54- < Component1 / >
52+ < BouncyCheckbox / >
5553```
5654
5755
58- # Component2 Usage
56+ ## Customizable Usage
5957
6058``` js
61- < Component2 / >
59+ < BouncyCheckbox
60+ isChecked
61+ textColor= " #000"
62+ fillColor= " red"
63+ iconComponent= {your- own- component}
64+ fontFamily= " JosefinSans-Regular"
65+ text= " Buy tickets for concert 🎉 🎊"
66+ / >
6267```
6368
6469
6570### Configuration - Props
6671
67-
68- | Property | Type | Default | Description |
69- | -------- | :-----: | :-----: | ------------------------------------------------------- |
70- | outline | boolean | true | make the button outline |
71- | solid | boolean | false | make the button with a solid background and a shadow |
72- | gradient | boolean | false | make the button with a gradient background and a shadow |
73- | width | number | 150 | change the button's width |
72+ | Property | Type | Default | Description |
73+ | ------------- | :-------: | :-----------------: | --------------------------------------------------------------------- |
74+ | text | string | Call my mom 😇 | set the checkbox's text |
75+ | textColor | color | #757575 | change the text's color |
76+ | fontFamily | string | JosefinSans-Regular | set your own font family |
77+ | fontSize | number | 16 | change the text's font size |
78+ | isChecked | boolean | false | set the default checkbox value |
79+ | checkboxSize | number | 25 | change the checkbox's size |
80+ | borderRadius | number | size/2 | change the checkbox's border radius if you do not want the circle one |
81+ | borderColor | color | #f09f48 | change the checkbox's border color |
82+ | fillColor | color | #f09f48 | change the checkbox's filled color |
83+ | unfillColor | color | transparent | change the checkbox's un-filled color when it's not checked |
84+ | iconComponent | component | Icon | set your own icon component |
7485
7586
76- ### ToDos
87+ ### Future Plans
7788
7889- [x] LICENSE
7990- [ ] Write an article about the lib on Medium
8091
81- # Change Log
82-
83- Change log will be here !
84-
8592## Author
8693
87948895
8996## License
9097
91- React Native Library Boilerplate is available under the MIT license. See the LICENSE file for more info.
98+ React Native Bouncy Checkbox is available under the MIT license. See the LICENSE file for more info.
0 commit comments