1- <img alt =" React Native Typescript Library Starter " src =" assets/logo.png " width =" 1050 " />
1+ <img alt =" React Native Bouncy Checkbox Group " src =" assets/logo.png " width =" 1050 " />
22
3- [ ![ Battle Tested ✅] ( https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-typescript-library-starter )
3+ [ ![ 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-group )
44
5- [ ![ React Native Typescript Library Starter ] ( https://img.shields.io/badge/-Extremely%20easy%20to%20create%20a%20React%20Native%20Component%20Library%20with%20both%20Stateful%20and%20Functional%20Component%20Examples-orange?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-typescript-library-starter )
5+ [ ![ React Native Bouncy Checkbox Group ] ( https://img.shields.io/badge/-Extremely%20easy%20to%20create%20a%20React%20Native%20Component%20Library%20with%20both%20Stateful%20and%20Functional%20Component%20Examples-orange?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-bouncy-checkbox-group )
66
7- [ ![ npm version] ( https://img.shields.io/npm/v/react-native-typescript-library-starter .svg?style=for-the-badge )] ( https://www.npmjs.com/package/react-native-typescript-library-starter )
8- [ ![ npm] ( https://img.shields.io/npm/dt/react-native-typescript-library-starter .svg?style=for-the-badge )] ( https://www.npmjs.com/package/react-native-typescript-library-starter )
7+ [ ![ npm version] ( https://img.shields.io/npm/v/react-native-bouncy-checkbox-group .svg?style=for-the-badge )] ( https://www.npmjs.com/package/react-native-bouncy-checkbox-group )
8+ [ ![ npm] ( https://img.shields.io/npm/dt/react-native-bouncy-checkbox-group .svg?style=for-the-badge )] ( https://www.npmjs.com/package/react-native-bouncy-checkbox-group )
99![ Platform - Android and iOS] ( https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge )
1010[ ![ License: MIT] ( https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge )] ( https://opensource.org/licenses/MIT )
1111[ ![ styled with prettier] ( https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge )] ( https://github.com/prettier/prettier )
1212
1313<p align =" center " >
14- <img alt="React Native Typescript Library Starter "
15- src="assets/Screenshots/typescript.jpg " />
14+ <img alt="React Native Bouncy Checkbox Group "
15+ src="assets/Screenshots/react-native-bouncy-checkbox-group.png.gif " />
1616</p >
1717
18- ## Library Usage
19-
20- - ` npm i `
21- - Delete example folder
22- - Delete build folder
23- - Make your own library into the ` lib ` folder
24- - Change package.json
25- - Change README for your own documentation
26- - ` npm run build `
27-
28- ```
29- > react-native-typescript-library-starter@0.1.0 build /Users/kuray/Coursion/MyLibraries/ReactNative/react-native-typescript-library-starter
30- > cd lib && tsc && cp ../package.json ../build/dist/ && Echo Build completed!
31-
32- Build completed!
33- ```
34-
35- - Test your build/dist into the new project
36- - Finally, time to npm publish :)
37-
38- ### Below part is for Documentation ! Remove above Library Usage
39-
4018# Installation
4119
4220Add the dependency:
4321
4422``` bash
45- npm i react-native-typescript-library-starter
23+ npm i react-native-bouncy-checkbox-group
4624```
4725
4826## Peer Dependencies
4927
5028<h5 ><i >IMPORTANT! You need install them</i ></h5 >
5129
5230``` js
53- " react" : " >= 16.x.x" ,
54- " react-native" : " >= 0.55.x" ,
31+ " react-native-bouncy-checkbox" : " >= 2.1.5"
5532```
5633
5734# Usage
5835
5936## Import
6037
6138``` jsx
62- import MyComponent from " react-native-typescript-library-starter" ;
39+ import BouncyCheckboxGroup, {
40+ ICheckboxButton ,
41+ } from " react-native-bouncy-checkbox-group" ;
6342```
6443
6544## Fundamental Usage
6645
6746``` jsx
68- < MyComponent / >
47+ < BouncyCheckboxGroup
48+ data= {staticData}
49+ onChange= {(selectedItem : ICheckboxButton ) => {
50+ console .log (" SelectedItem: " , JSON .stringify (selectedItem));
51+ }}
52+ / >
53+ ```
54+
55+ ## Vertical Usage
56+
57+ ``` jsx
58+ < BouncyCheckboxGroup
59+ data= {verticalStaticData}
60+ style= {{ flexDirection: " column" }}
61+ onChange= {(selectedItem : ICheckboxButton ) => {
62+ console .log (" SelectedItem: " , JSON .stringify (selectedItem));
63+ }}
64+ / >
65+ ```
66+
67+ ## Data Format
68+
69+ You MUST follow this data format as ` ICheckboxButton `
70+
71+ ``` json
72+ [
73+ {
74+ id: 0,
75+ },
76+ {
77+ id: 1,
78+ },
79+ {
80+ id: 2,
81+ },
82+ {
83+ id: 3,
84+ },
85+ ];
6986```
7087
7188## Example Project 😍
@@ -83,35 +100,26 @@ should work of the example project.
83100
84101## Fundamentals
85102
86- | Property | Type | Default | Description |
87- | ----------- | :----: | :-------: | --------------------- |
88- | title | string | undefined | change the title |
89- | description | string | undefined | change the descrition |
103+ | Property | Type | Default | Description |
104+ | -------- | :--------------- : | :-------: | ------------------------------------ --------------------- |
105+ | data | ICheckboxButton [ ] | undefined | set the checkboxes as a data |
106+ | onChange | function | undefined | set your own logic when the group of checkbox is selected |
90107
91108## Customization (Optionals)
92109
93- | Property | Type | Default | Description |
94- | -------------- | :-------: | :-------: | ---------------------------------------------------------------------- |
95- | enableButton | boolean | false | let you enable the button (must use it for button) |
96- | onPress | function | undefined | set your own logic for the button functionality when it is pressed |
97- | buttonText | string | undefined | change the button's text |
98- | style | ViewStyle | default | set or override the style object for the main container |
99- | buttonStyle | ViewStyle | default | set or override the style object for the button style |
100- | ImageComponent | Image | default | set your own component instead of default react-native Image component |
110+ #### [ React Native Bouncy Checkbox Customizations] ( https://github.com/WrathChaos/react-native-bouncy-checkbox#configuration---props )
111+
112+ You can use all of the customiztion options from the rn bouncy checkbox. You NEED to add the styling and props into the ` data ` . Therefore, you can customize each of the checkboxes easly.
101113
102114## Future Plans
103115
104116- [x] ~~ LICENSE~~
105117- [ ] Write an article about the lib on Medium
106118
107- # Change Log
108-
109- Change log will be here !
110-
111119## Author
112120
113121FreakyCoder, kurayogun@gmail.com
114122
115123## License
116124
117- React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.
125+ React Native Bouncy Checkbox Group is available under the MIT license. See the LICENSE file for more info.
0 commit comments