feat: useBuiltinState prop to disable the builtin state control and l…

…et it control fully on dev
WrathChaos · Aug 19, 2024 · cca595b · cca595b
1 parent 9949893
commit cca595b
Show file tree

Hide file tree

Showing 11 changed files with 25,433 additions and 59,666 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,12 +1,6 @@
 module.exports = {
   root: true,
-  extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "@react-native-community",
-    "prettier",
-  ],
+  extends: "@react-native",
   ignorePatterns: [
     "**/*/*.js",
     "*.js",
@@ -25,13 +19,11 @@ module.exports = {
     "react-hooks",
     "@typescript-eslint",
     "promise",
-    "jest",
     "unused-imports",
   ],
   env: {
     browser: true,
     es2021: true,
-    "jest/globals": true,
     "react-native/react-native": true,
   },
   settings: {

diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ Add the dependency:
 npm i react-native-bouncy-checkbox
 ```
 
-## 🥳  <i> Version 4.0.0 is here</i> 🚀 
+## 🥳  <i> Version 4.1.0 is here</i> 🚀 
 
 - **Complete re-written with Modern Functional Component**
 - Fully Refactored with React Hooks
@@ -45,6 +45,7 @@ npm i react-native-bouncy-checkbox
 - `testID` support
 - Finally, get rid of `disableBuiltInState` prop 
 - Cool customizable animation options
+- Control your own check state with `useBuiltInState` to disable
 - Typescript
 - Community Supported Stable Version
 
@@ -77,16 +78,42 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
 />
 ```
 
+## Disable Built-In State
+
+To fully control checkbox state outside with your own state, just set `useBuiltInState` to `false` and send your state value to `isChecked` prop
+
+```tsx
+
+const [localChecked, setLocalChecked] = React.useState(false);
+
+ <BouncyCheckbox
+   isChecked={localChecked}
+   disableText
+   fillColor="green"
+   size={50}
+   useBuiltInState
+   iconImageStyle={styles.iconImageStyle}
+   iconStyle={{borderColor: 'green'}}
+   onPress={(checked: boolean) => {
+         // These two should be same value
+         console.log('::Checked::', checked);
+         console.log('::LocalChecked::', localChecked);
+         setLocalChecked(!localChecked);
+   }}
+/>
+```
+
 ### Configuration - Props
 
 | Property             |   Type    |    Default    | Description                                                                                                                                    |
 |----------------------| :-------: |:-------------:|------------------------------------------------------------------------------------------------------------------------------------------------|
-| **isChecked**        |  **boolean**  | **undefined** | **if you want to control check state yourself, you can use `isChecked` prop now!**                                                                 |
+| **isChecked**        |  **boolean**  | **undefined** | **if you want to control check state yourself, you can use `isChecked` prop now!**                                                             |
 | onPress              | function  |     null      | set your own onPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false     |
 | onLongPress          | function  |     null      | set your own onLongPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false |
 | text                 |  string   |   undefined   | set the checkbox's text                                                                                                                        |
 | textComponent        | component |   undefined   | set the checkbox's text by a React Component                                                                                                   |
 | disableText          |  boolean  |     false     | if you want to use checkbox without text, you can enable it                                                                                    |
+| useBuiltInState          |  boolean  |     false     | to fully control the checkbox itself outside with your own state, just set to `false` and send your state value to `isChecked` prop            |
 | size                 |  number   |      25       | size of `width` and `height` of the checkbox                                                                                                   |
 | style                |   style   |    default    | set/override the container style                                                                                                               |
 | textStyle            |   style   |    default    | set/override the text style                                                                                                                    |

diff --git a/example/App.tsx b/example/App.tsx
@@ -11,16 +11,15 @@ import {
 import AppleHeader from 'react-native-apple-header';
 import BottomSearchBar from 'react-native-bottom-search-bar';
 import RNBounceable from '@freakycoder/react-native-bounceable';
-import BouncyCheckbox, {
-  BouncyCheckboxHandle,
-} from 'react-native-bouncy-checkbox';
+import BouncyCheckbox, {BouncyCheckboxHandle} from './build/dist';
 
 const profilePicUri = {
   uri: 'https://images.unsplash.com/photo-1519865885898-a54a6f2c7eea?q=80&w=1358&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 };
 
 const App: React.FC = () => {
   const bouncyCheckboxRef = useRef<BouncyCheckboxHandle>(null);
+  const [localChecked, setLocalChecked] = React.useState(false);
 
   const renderCheckboxes = () => (
     <View style={styles.checkboxesContainer}>
@@ -133,13 +132,19 @@ const App: React.FC = () => {
           }}
         />
         <BouncyCheckbox
-          isChecked
+          isChecked={localChecked}
           disableText
           fillColor="green"
           size={50}
+          useBuiltInState
           iconImageStyle={styles.iconImageStyle}
           iconStyle={{borderColor: 'green'}}
-          onPress={() => {}}
+          onPress={(checked: boolean) => {
+            // These two should be same value
+            console.log('::Checked::', checked);
+            console.log('::LocalChecked::', localChecked);
+            setLocalChecked(!localChecked);
+          }}
         />
       </View>
     </View>