Here is the basic implementation:

1import React from "react";
2import {
3  SafeAreaView,
4  StyleSheet,
5  Text,
6  TouchableOpacity,
7  View,
8} from "react-native";
9import BouncyCheckbox from "./lib/BouncyCheckbox";
10import RNBounceable from "@freakycoder/react-native-bounceable";
11
12const App = () => {
13  let bouncyCheckboxRef: BouncyCheckbox | null = null;
14  const [checkboxState, setCheckboxState] = React.useState(false);
15
16  return (
17    <SafeAreaView
18      style={{
19        flex: 1,
20        alignItems: "center",
21        justifyContent: "center",
22      }}
23    >
24      <View style={styles.checkboxesContainer}>
25        <Text style={styles.titleSynthetic}>Synthetic Checkbox</Text>
26        <Text style={styles.checkboxSyntheticSubtitle}>
27          Control Checkbox with Another Button
28        </Text>
29        <View style={styles.checkboxSyntheticContainer}>
30          <BouncyCheckbox
31                  ref={bouncyCheckboxRef}
32                  disableText
33                  fillColor="#9342f5"
34                  size={50}
35                  iconImageStyle={styles.iconImageStyle}
36                  iconStyle={{borderColor: '#9342f5'}}
37                  onPress={isChecked => {
38                    Alert.alert(`Checked:: ${isChecked}`);
39                  }}
40          />
41          <RNBounceable
42                  style={styles.syntheticButton}
43                  onPress={() => {
44                    if (bouncyCheckboxRef.current) {
45                      bouncyCheckboxRef.current.onCheckboxPress();
46                    }
47                  }}>
48            <Text style={{color: '#fff', fontWeight: '600'}}>
49              Change Checkbox
50            </Text>
51          </RNBounceable>
52        </View>
53      </View>
54    </SafeAreaView>
55  );
56};
57
58const styles = StyleSheet.create({});
59
60export default App;

Another example with isChecked prop:

1import React, {useRef} from 'react';
2import {ImageBackground, StyleSheet, Text, View} from 'react-native';
3import RNBounceable from '@freakycoder/react-native-bounceable';
4import BouncyCheckbox, {BouncyCheckboxHandle} from './build/dist';
5
6const App = () => {
7  const bouncyCheckboxRef = useRef<BouncyCheckboxHandle>(null);
8
9  const [checkboxState, setCheckboxState] = React.useState(false);
10
11  return (
12    <ImageBackground
13      style={styles.container}
14      source={require('./assets/bg.jpg')}>
15      <View
16        style={[
17          styles.stateContainer,
18          {
19            backgroundColor: checkboxState ? '#34eb83' : '#eb4034',
20          },
21        ]}>
22        <Text
23          style={
24            styles.stateTextStyle
25          }>{`Check Status: ${checkboxState.toString()}`}</Text>
26      </View>
27      <BouncyCheckbox
28        size={50}
29        textStyle={styles.textStyle}
30        style={{marginTop: 16}}
31        iconImageStyle={styles.iconImageStyle}
32        fillColor={'#00C0EE'}
33        unFillColor={'transparent'}
34        ref={bouncyCheckboxRef}
35        isChecked={checkboxState}
36        text="Synthetic Checkbox"
37        onPress={() => setCheckboxState(!checkboxState)}
38      />
39      <RNBounceable
40        style={styles.syntheticButton}
41        onPress={() => {
42          bouncyCheckboxRef.current?.onCheckboxPress();
43        }}>
44        <Text style={{color: '#fff'}}>Synthetic Checkbox Press</Text>
45      </RNBounceable>
46    </ImageBackground>
47  );
48};
49
50const styles = StyleSheet.create({
51  container: {
52    flex: 1,
53    alignItems: 'center',
54    justifyContent: 'center',
55  },
56  stateContainer: {
57    height: 45,
58    width: 175,
59    alignItems: 'center',
60    justifyContent: 'center',
61    borderRadius: 12,
62    marginBottom: 12,
63  },
64  stateTextStyle: {
65    color: '#fff',
66    fontWeight: 'bold',
67  },
68  syntheticButton: {
69    height: 50,
70    marginTop: 64,
71    borderRadius: 12,
72    width: '60%',
73    alignItems: 'center',
74    justifyContent: 'center',
75    backgroundColor: '#00C0EE',
76  },
77  iconImageStyle: {
78    width: 20,
79    height: 20,
80  },
81  textStyle: {
82    color: '#010101',
83    fontWeight: '600',
84  },
85});
86
87export default App;

React Native Bouncy Checkbox Group

We have also this library's checkbox group library as well 🍻 Please take a look 😍

FAQ

How to disable strikethrough?

• Simply use the textStyle prop and set the textDecorationLine to none

1textStyle={{
2  textDecorationLine: "none",
3}}

How to make square checkbox?

• Simply use the iconStyle prop and set the borderRadius to 0

1innerIconStyle={{
2  borderRadius: 0, // to make it a little round increase the value accordingly
3}}

How to use multiple checkbox and control all of them with one checkbox?

• You can use isChecked prop to control all of them one by one and with simple handling function to make them all checked or not

1  const data = [
2    {
3      id: 0,
4      isChecked: false,
5    },
6    {
7      id: 1,
8      isChecked: false,
9    },
10    {
11      id: 2,
12      isChecked: false,
13    },
14  ]
15
16  const [checkBoxes, setCheckBoxes] = useState(data);
17
18
19  const handleCheckboxPress = (checked: boolean, id: number) => {
20    if (id === 0) {
21      setCheckBoxes(
22        checkBoxes.map(item => ({
23          ...item,
24          isChecked: checked,
25        })),
26      );
27      return;
28    }
29
30    setCheckBoxes(
31      checkBoxes.map(item =>
32        item.id === id ? {...item, isChecked: checked} : item,
33      ),
34    );
35  };

Please check out the example for this: https://github.com/WrathChaos/react-native-bouncy-checkbox-check-all-with-one-checkbox

Future Plans

• LICENSE
• Typescript Challange!
• Version 2.0.0 is alive 🥳
• Synthetic Press Functionality
• Disable built-in check state
• React Native Bouncy Checkbox Group Library Extension
• New Animation and More Customizable Animation
• Version 3.0.0 is alive 🚀
• Better Documentation
• Version 4.0.0 is alive 🚀
• Get rid of disableBuiltInState prop
• Write an article about the lib on Medium

Credits

Photo by Milad Fakurian on Unsplash

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Bouncy Checkbox is available under the MIT license. See the LICENSE file for more info.