feat: version 2 - rewritten the library

Author: WrathChaos

example/.gitignore

@@ -1,66 +1,37 @@
-# OSX
-#
-.DS_Store
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-ios/.xcode.env.local
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
 
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-*.hprof
-.cxx/
-*.keystore
-!debug.keystore
-
-# node.js
-#
+# dependencies
 node_modules/
-npm-debug.log
-yarn-error.log
-
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://docs.fastlane.tools/best-practices/source-control/
 
-**/fastlane/report.xml
-**/fastlane/Preview.html
-**/fastlane/screenshots
-**/fastlane/test_output
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
 
-# Bundle artifact
-*.jsbundle
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
 
-# Ruby / CocoaPods
-/ios/Pods/
-/vendor/bundle/
+# macOS
+.DS_Store
+*.pem
 
-# Temporary files created by Metro to check the health of the file watcher
-.metro-health-check*
+# local env files
+.env*.local
 
-# testing
-/coverage
+# typescript
+*.tsbuildinfo

example/App.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import {View, Text, SafeAreaView} from 'react-native';
+import React, { useState } from 'react';
+import { View, Text, SafeAreaView, StyleSheet, ScrollView } from 'react-native';
 import AppleHeader from 'react-native-apple-header';
-import BouncyCheckboxGroup, {CheckboxButton} from './lib/BouncyCheckboxGroup';
+import BouncyCheckboxGroup, { CheckboxButton } from './lib/BouncyCheckboxGroup';
 
 const _iconStyle = (borderColor: string) => ({
   height: 50,
@@ -10,12 +10,55 @@ const _iconStyle = (borderColor: string) => ({
   borderColor: borderColor,
 });
 
-const styles = {
-  container: {marginTop: 24},
-  verticalStyle: {marginTop: 16},
-  textStyle: {textDecorationLine: 'none'},
-  iconImageStyle: {height: 20, width: 20},
-};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  verticalStyle: {
+    marginTop: 16,
+  },
+  textStyle: {
+    textDecorationLine: 'none',
+    fontSize: 16,
+  },
+  iconImageStyle: {
+    height: 20,
+    width: 20,
+  },
+  sectionTitle: {
+    color: '#a8a8ac',
+    fontWeight: '500',
+    fontSize: 16,
+    marginLeft: 32,
+    marginTop: 24,
+  },
+  checkboxContainer: {
+    marginTop: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  verticalCheckboxContainer: {
+    marginTop: 16,
+    marginLeft: 32,
+    justifyContent: 'center',
+  },
+  scrollView: {
+    paddingBottom: 48,
+  },
+  selected: {
+    marginLeft: 32,
+    marginTop: 8,
+    fontSize: 14,
+    color: '#555',
+  },
+  description: {
+    marginLeft: 32,
+    marginTop: 4,
+    fontSize: 12,
+    color: '#888',
+    maxWidth: '90%',
+  },
+});
 
 const staticData: CheckboxButton[] = [
   {
@@ -109,73 +152,147 @@ const verticalStaticData: CheckboxButton[] = [
 ];
 
 const App = () => {
+  const [singleSelected, setSingleSelected] = useState<CheckboxButton | null>(null);
+  const [multipleSelected, setMultipleSelected] = useState<CheckboxButton[]>([]);
+  const [verticalSelected, setVerticalSelected] = useState<CheckboxButton | null>(null);
+  const [fastAnimationSelected, setFastAnimationSelected] = useState<CheckboxButton | null>(null);
+  const [alwaysSelected, setAlwaysSelected] = useState<CheckboxButton | null>(null);
+
   const imageSource = {
     uri: 'https://images.unsplash.com/photo-1499482125586-91609c0b5fd4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80',
   };
 
   const horizontalCheckboxGroupContainer = () => (
     <>
-      <View style={{marginLeft: 32}}>
-        <Text style={{color: '#a8a8ac', fontWeight: '500', fontSize: 16}}>
-          Pick your favorite color
-        </Text>
-      </View>
-      <View
-        style={{
-          marginTop: 16,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
+      <Text style={styles.sectionTitle}>
+        Single Select - Pick your favorite color
+      </Text>
+      <View style={styles.checkboxContainer}>
         <BouncyCheckboxGroup
           data={staticData}
+          spacing={8}
+          initial={0}
           onChange={(selectedItem: CheckboxButton) => {
-            console.log('SelectedItem: ', JSON.stringify(selectedItem));
+            setSingleSelected(selectedItem);
+            console.log('Single Selected: ', JSON.stringify(selectedItem));
           }}
         />
       </View>
+      {singleSelected && (
+        <Text style={styles.selected}>
+          Selected: {singleSelected.id}
+        </Text>
+      )}
     </>
   );
 
-  const verticalCheckboxGroupContainer = () => (
+  const alwaysSelectCheckboxGroupContainer = () => (
     <>
-      <View style={{marginLeft: 32, marginTop: 24}}>
-        <Text style={{color: '#a8a8ac', fontWeight: '500', fontSize: 16}}>
-          Pick your favorite color (Horizontal Style)
+      <Text style={styles.sectionTitle}>
+        Always Selected Mode - Can't deselect
+      </Text>
+      <Text style={styles.description}>
+        Once an option is selected, it can't be deselected. You must select another option to change.
+      </Text>
+      <View style={styles.checkboxContainer}>
+        <BouncyCheckboxGroup
+          data={staticData}
+          spacing={8}
+          initial={0}
+          alwaysSelect={true}
+          onChange={(selectedItem: CheckboxButton) => {
+            setAlwaysSelected(selectedItem);
+            console.log('Always Selected: ', JSON.stringify(selectedItem));
+          }}
+        />
+      </View>
+      {alwaysSelected && (
+        <Text style={styles.selected}>
+          Selected: {alwaysSelected.id}
         </Text>
+      )}
+    </>
+  );
+
+  const multiSelectCheckboxGroupContainer = () => (
+    <>
+      <Text style={styles.sectionTitle}>
+        Multi Select - Choose multiple colors
+      </Text>
+      <View style={styles.checkboxContainer}>
+        <BouncyCheckboxGroup
+          data={staticData}
+          spacing={8}
+          multiple={true}
+          initial={[1, 3]}
+          onChange={(selectedItems: CheckboxButton[]) => {
+            setMultipleSelected(selectedItems);
+            console.log('Multiple Selected: ', JSON.stringify(selectedItems));
+          }}
+        />
       </View>
-      <View
-        style={{
-          marginTop: 16,
-          marginLeft: 32,
-          justifyContent: 'center',
-        }}>
+      {multipleSelected.length > 0 && (
+        <Text style={styles.selected}>
+          Selected: {multipleSelected.map(item => item.id).join(', ')}
+        </Text>
+      )}
+    </>
+  );
+
+  const verticalCheckboxGroupContainer = () => (
+    <>
+      <Text style={styles.sectionTitle}>
+        Vertical Layout - Pick your favorite color
+      </Text>
+      <View style={styles.verticalCheckboxContainer}>
         <BouncyCheckboxGroup
           data={verticalStaticData}
-          style={{flexDirection: 'column'}}
+          style={{ flexDirection: 'column' }}
+          spacing={0}
           onChange={(selectedItem: CheckboxButton) => {
-            console.log('SelectedItem: ', JSON.stringify(selectedItem));
+            setVerticalSelected(selectedItem);
+            console.log('Vertical Selected: ', JSON.stringify(selectedItem));
           }}
         />
       </View>
+      {verticalSelected && (
+        <Text style={styles.selected}>
+          Selected: {verticalSelected.text}
+        </Text>
+      )}
     </>
   );
 
-  return (
+  const fastAnimationCheckboxGroupContainer = () => (
     <>
-      <SafeAreaView>
-        <AppleHeader
-          dateTitle="Apr 19, 2024"
-          largeTitle="Welcome"
-          imageSource={imageSource}
-          onPress={() => {}}
+      <Text style={styles.sectionTitle}>
+        Custom Animation Speed (100ms)
+      </Text>
+      <View style={styles.checkboxContainer}>
+        <BouncyCheckboxGroup
+          data={staticData}
+          spacing={8}
+          animationDuration={100}
+          onChange={(selectedItem: CheckboxButton) => {
+            setFastAnimationSelected(selectedItem);
+          }}
         />
-        <View style={styles.container}>
-          {horizontalCheckboxGroupContainer()}
-          {verticalCheckboxGroupContainer()}
-        </View>
-      </SafeAreaView>
+      </View>
     </>
   );
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      
+      <ScrollView style={styles.container} contentContainerStyle={styles.scrollView}>
+        {horizontalCheckboxGroupContainer()}
+        {alwaysSelectCheckboxGroupContainer()}
+        {multiSelectCheckboxGroupContainer()}
+        {verticalCheckboxGroupContainer()}
+        {fastAnimationCheckboxGroupContainer()}
+      </ScrollView>
+    </SafeAreaView>
+  );
 };
 
 export default App;

example/app.json

@@ -1,4 +1,29 @@
 {
-  "name": "example",
-  "displayName": "example"
+  "expo": {
+    "name": "example",
+    "slug": "example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
 }

example/assets/adaptive-icon.png

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);