importReactfrom"react";import{SafeAreaView,StyleSheet,Text,TouchableOpacity,View,}from"react-native";importBouncyCheckboxfrom"./lib/BouncyCheckbox";importRNBounceablefrom"@freakycoder/react-native-bounceable";constApp=()=>{letbouncyCheckboxRef:BouncyCheckbox|null=null;const[checkboxState,setCheckboxState]=React.useState(false);return(<SafeAreaViewstyle={{flex:1,alignItems:"center",justifyContent:"center",}}><Viewstyle={styles.checkboxesContainer}><Textstyle={styles.titleSynthetic}>Synthetic Checkbox</Text><Textstyle={styles.checkboxSyntheticSubtitle}>          Control Checkbox with Another Button</Text><Viewstyle={styles.checkboxSyntheticContainer}><BouncyCheckboxref={bouncyCheckboxRef}disableTextfillColor="#9342f5"size={50}iconImageStyle={styles.iconImageStyle}iconStyle={{borderColor:'#9342f5'}}onPress={isChecked=>{Alert.alert(`Checked::${isChecked}`);}}/><RNBounceablestyle={styles.syntheticButton}onPress={()=>{if(bouncyCheckboxRef.current){bouncyCheckboxRef.current.onCheckboxPress();}}}><Textstyle={{color:'#fff',fontWeight:'600'}}>              Change Checkbox</Text></RNBounceable></View></View></SafeAreaView>);};conststyles=StyleSheet.create({});exportdefaultApp;

importReact,{useRef}from'react';import{ImageBackground,StyleSheet,Text,View}from'react-native';importRNBounceablefrom'@freakycoder/react-native-bounceable';importBouncyCheckbox,{BouncyCheckboxHandle}from'./build/dist';constApp=()=>{constbouncyCheckboxRef=useRef<BouncyCheckboxHandle>(null);const[checkboxState,setCheckboxState]=React.useState(false);return(<ImageBackgroundstyle={styles.container}source={require('./assets/bg.jpg')}><Viewstyle={[styles.stateContainer,{backgroundColor:checkboxState ?'#34eb83' :'#eb4034',},]}><Textstyle={styles.stateTextStyle}>{`Check Status:${checkboxState.toString()}`}</Text></View><BouncyCheckboxsize={50}textStyle={styles.textStyle}style={{marginTop:16}}iconImageStyle={styles.iconImageStyle}fillColor={'#00C0EE'}unFillColor={'transparent'}ref={bouncyCheckboxRef}isChecked={checkboxState}text="Synthetic Checkbox"onPress={()=>setCheckboxState(!checkboxState)}/><RNBounceablestyle={styles.syntheticButton}onPress={()=>{bouncyCheckboxRef.current?.onCheckboxPress();}}><Textstyle={{color:'#fff'}}>Synthetic Checkbox Press</Text></RNBounceable></ImageBackground>);};conststyles=StyleSheet.create({container:{flex:1,alignItems:'center',justifyContent:'center',},stateContainer:{height:45,width:175,alignItems:'center',justifyContent:'center',borderRadius:12,marginBottom:12,},stateTextStyle:{color:'#fff',fontWeight:'bold',},syntheticButton:{height:50,marginTop:64,borderRadius:12,width:'60%',alignItems:'center',justifyContent:'center',backgroundColor:'#00C0EE',},iconImageStyle:{width:20,height:20,},textStyle:{color:'#010101',fontWeight:'600',},});exportdefaultApp;

React Native Bouncy Checkbox Group

FAQ

textStyle={{textDecorationLine:"none",}}

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

constdata=[{id:0,isChecked:false,},{id:1,isChecked:false,},{id:2,isChecked:false,},]const[checkBoxes,setCheckBoxes]=useState(data);consthandleCheckboxPress=(checked:boolean,id:number)=>{if(id===0){setCheckBoxes(checkBoxes.map(item=>({          ...item,isChecked:checked,})),);return;}setCheckBoxes(checkBoxes.map(item=>item.id===id ?{...item,isChecked:checked} :item,),);};

Future Plans

Credits

Author

License