Skip to content

Commit 09e21ca

Browse files
WrathChaosWrathChaos
committed
New version 2.1.0 with awesome features are here
1 parent dd71275 commit 09e21ca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+3260
-173
lines changed

‎README.md‎

Lines changed: 90 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@ npm i react-native-bouncy-checkbox
3838
- Typescript
3939
- **Zero Dependency**
4040
- More Customization Options
41-
- New customization props are available:
42-
- `iconStyle`
43-
- `bounceEffect`
44-
- `bounceFriction`
41+
- New customization props are available:
42+
- `iconStyle`
43+
- `bounceEffect`
44+
- `bounceFriction`
4545

4646
## Import
4747

@@ -92,11 +92,97 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
9292
| bounceEffect | number | 1 | change the bounce effect |
9393
| bounceFriction | number | 3 | change the bounce friction |
9494

95+
## Synthetic Press Functionality with Manual Check State
96+
97+
<div>
98+
<img alt="React Native Bouncy Checkbox"
99+
src="assets/Screenshots/react-native-bouncy-checkbox-syntetic-onpress.gif" />
100+
</div>
101+
102+
Please check the `example-manual-state` runable project to how to make it work on a real project.
103+
104+
<b><i>Becareful while using `disableBuiltInState` you MUST set the `isChecked` prop to use your own check state manually.</b></i>
105+
106+
Here is the basic implementation:
107+
108+
```jsx
109+
import React from "react";
110+
import {
111+
SafeAreaView,
112+
StyleSheet,
113+
Text,
114+
TouchableOpacity,
115+
View,
116+
} from "react-native";
117+
import BouncyCheckbox from "./lib/BouncyCheckbox";
118+
import RNBounceable from "@freakycoder/react-native-bounceable";
119+
120+
const App = () => {
121+
let bouncyCheckboxRef: BouncyCheckbox | null = null;
122+
const [checkboxState, setCheckboxState] = React.useState(false);
123+
124+
return (
125+
<SafeAreaView
126+
style={{
127+
flex: 1,
128+
alignItems: "center",
129+
justifyContent: "center",
130+
}}
131+
>
132+
<View
133+
style={{
134+
height: 30,
135+
width: 150,
136+
alignItems: "center",
137+
justifyContent: "center",
138+
borderRadius: 12,
139+
backgroundColor: checkboxState ? "#34eb83" : "#eb4034",
140+
}}
141+
>
142+
<Text
143+
style={{ color: "#fff" }}
144+
>{`Check Status: ${checkboxState.toString()}`}</Text>
145+
</View>
146+
<BouncyCheckbox
147+
style={{ marginTop: 16 }}
148+
ref={(ref: any) => (bouncyCheckboxRef = ref)}
149+
isChecked={checkboxState}
150+
text="Synthetic Checkbox"
151+
disableBuiltInState
152+
onPress={(isChecked: boolean = false) =>
153+
setCheckboxState(!checkboxState)
154+
}
155+
/>
156+
<RNBounceable
157+
style={{
158+
marginTop: 16,
159+
height: 50,
160+
width: "90%",
161+
backgroundColor: "#ffc484",
162+
borderRadius: 12,
163+
alignItems: "center",
164+
justifyContent: "center",
165+
}}
166+
onPress={() => bouncyCheckboxRef?.onPress()}
167+
>
168+
<Text style={{ color: "#fff" }}>Synthetic Checkbox Press</Text>
169+
</RNBounceable>
170+
</SafeAreaView>
171+
);
172+
};
173+
174+
const styles = StyleSheet.create({});
175+
176+
export default App;
177+
```
178+
95179
### Future Plans
96180
97181
- [x] ~~LICENSE~~
98182
- [x] ~~Typescript Challange!~~
99183
- [x] ~~Version 2.0.0 is alive 🥳~~
184+
- [x] ~~Synthetic Press Functionality~~
185+
- [x] ~~Disable built-in check state~~
100186
- [ ] Write an article about the lib on Medium
101187
102188
## Author

‎assets/Screenshots/react-native-bouncy-checkbox-syntetic-onpress.gif‎

5.74 MB
Loading

‎example-manual-state/.buckconfig‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎example-manual-state/.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

‎example-manual-state/.gitattributes‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Windows files should use crlf line endings
2+
# https://help.github.com/articles/dealing-with-line-endings/
3+
*.bat text eol=crlf

‎example-manual-state/.gitignore‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
24+
# Android/IntelliJ
25+
#
26+
build/
27+
.idea
28+
.gradle
29+
local.properties
30+
*.iml
31+
32+
# node.js
33+
#
34+
node_modules/
35+
npm-debug.log
36+
yarn-error.log
37+
38+
# BUCK
39+
buck-out/
40+
\.buckd/
41+
*.keystore
42+
!debug.keystore
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://docs.fastlane.tools/best-practices/source-control/
50+
51+
*/fastlane/report.xml
52+
*/fastlane/Preview.html
53+
*/fastlane/screenshots
54+
55+
# Bundle artifact
56+
*.jsbundle
57+
58+
# CocoaPods
59+
/ios/Pods/

‎example-manual-state/.watchmanconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎example-manual-state/App.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from "react";
2+
import { SafeAreaView, StyleSheet, Text, View } from "react-native";
3+
import BouncyCheckbox from "./build/dist/BouncyCheckbox";
4+
import RNBounceable from "@freakycoder/react-native-bounceable";
5+
6+
const App = () => {
7+
let bouncyCheckboxRef: BouncyCheckbox | null = null;
8+
const [checkboxState, setCheckboxState] = React.useState(false);
9+
10+
return (
11+
<SafeAreaView
12+
style={{
13+
flex: 1,
14+
alignItems: "center",
15+
justifyContent: "center",
16+
}}
17+
>
18+
<View
19+
style={{
20+
height: 30,
21+
width: 150,
22+
alignItems: "center",
23+
justifyContent: "center",
24+
borderRadius: 12,
25+
backgroundColor: checkboxState ? "#34eb83" : "#eb4034",
26+
}}
27+
>
28+
<Text
29+
style={{ color: "#fff" }}
30+
>{`Check Status: ${checkboxState.toString()}`}</Text>
31+
</View>
32+
<BouncyCheckbox
33+
style={{ marginTop: 16 }}
34+
ref={(ref: any) => (bouncyCheckboxRef = ref)}
35+
isChecked={checkboxState}
36+
text="Synthetic Checkbox"
37+
disableBuiltInState
38+
onPress={(isChecked: boolean = false) =>
39+
setCheckboxState(!checkboxState)
40+
}
41+
/>
42+
<RNBounceable
43+
style={{
44+
marginTop: 16,
45+
height: 50,
46+
width: "90%",
47+
backgroundColor: "#ffc484",
48+
borderRadius: 12,
49+
alignItems: "center",
50+
justifyContent: "center",
51+
}}
52+
onPress={() => bouncyCheckboxRef?.onPress()}
53+
>
54+
<Text style={{ color: "#fff" }}>Synthetic Checkbox Press</Text>
55+
</RNBounceable>
56+
</SafeAreaView>
57+
);
58+
};
59+
60+
const styles = StyleSheet.create({});
61+
62+
export default App;

‎example-manual-state/__tests__/App-test.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* @format
3+
*/
4+
5+
import 'react-native';
6+
import React from 'react';
7+
import App from '../App';
8+
9+
// Note: test renderer must be required after react-native.
10+
import renderer from 'react-test-renderer';
11+
12+
it('renders correctly', () => {
13+
renderer.create(<App />);
14+
});

‎example-manual-state/_editorconfig‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Windows files
2+
[*.bat]
3+
end_of_line = crlf

0 commit comments

Comments
 (0)