Skip to content

Commit 127ed53

Browse files
WrathChaosWrathChaos
committed
new: TouchableComponent prop is available to customize the TouchableOpacity overriding component with any Touchable component
1 parent 46fe294 commit 127ed53

33 files changed

+6743
-7967
lines changed

‎README.md‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -75,26 +75,27 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
7575

7676
### Configuration - Props
7777

78-
| Property | Type | Default | Description |
79-
| -------------------- | :-------: | :---------: | ------------------------------------------------------------------------------------------------------------------------------------------ |
80-
| text | string | undefined | set the checkbox's text |
81-
| onPress | function | null | set your own onPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false |
82-
| disableText | boolean | false | if you want to use checkbox without text, you can enable it |
83-
| size | number | 25 | size of `width` and `height` of the checkbox |
84-
| style | style | default | set/override the container style |
85-
| textStyle | style | default | set/override the text style |
86-
| iconStyle | style | default | set/override the icon style |
87-
| isChecked | boolean | false | set the default checkbox value |
88-
| fillColor | color | #f09f48 | change the checkbox's filled color |
89-
| unfillColor | color | transparent | change the checkbox's un-filled color when it's not checked |
90-
| useNativeDriver | boolean | true | enable/disable the useNativeDriver for animation |
91-
| iconComponent | component | Icon | set your own icon component |
92-
| checkIconImageSource | image | default | set your own check icon image |
93-
| ImageComponent | component | Image | set your own Image component instead of RN's default Image |
94-
| bounceEffect | number | 1 | change the bounce effect |
95-
| bounceFriction | number | 3 | change the bounce friction |
96-
| disableBuiltInState | boolean | false | if you want to manually handle the `isChecked` prop and disable built in handling |
97-
| textContainerStyle | ViewStyle | default | set/override the text container style |
78+
| Property | Type | Default | Description |
79+
| -------------------- | :-------: | :--------------: | ------------------------------------------------------------------------------------------------------------------------------------------ |
80+
| text | string | undefined | set the checkbox's text |
81+
| onPress | function | null | set your own onPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false |
82+
| disableText | boolean | false | if you want to use checkbox without text, you can enable it |
83+
| size | number | 25 | size of `width` and `height` of the checkbox |
84+
| style | style | default | set/override the container style |
85+
| textStyle | style | default | set/override the text style |
86+
| iconStyle | style | default | set/override the icon style |
87+
| isChecked | boolean | false | set the default checkbox value |
88+
| fillColor | color | #f09f48 | change the checkbox's filled color |
89+
| unfillColor | color | transparent | change the checkbox's un-filled color when it's not checked |
90+
| useNativeDriver | boolean | true | enable/disable the useNativeDriver for animation |
91+
| iconComponent | component | Icon | set your own icon component |
92+
| checkIconImageSource | image | default | set your own check icon image |
93+
| ImageComponent | component | Image | set your own Image component instead of RN's default Image |
94+
| bounceEffect | number | 1 | change the bounce effect |
95+
| bounceFriction | number | 3 | change the bounce friction |
96+
| disableBuiltInState | boolean | false | if you want to manually handle the `isChecked` prop and disable built in handling |
97+
| textContainerStyle | ViewStyle | default | set/override the text container style |
98+
| TouchableComponent | Component | TouchableOpacity | set/override the main TouchableOpacity component with any Touchable Component like Pressable |
9899

99100
## Synthetic Press Functionality with Manual Check State
100101

‎example/.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

‎example/.eslintrc.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
module.exports = {
22
root: true,
33
extends: '@react-native-community',
4-
parser: '@typescript-eslint/parser',
5-
plugins: ['@typescript-eslint'],
64
};

‎example/.gitattributes‎

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

‎example/.gitignore‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@ build/
2929
local.properties
3030
*.iml
3131

32-
# Visual Studio Code
33-
#
34-
.vscode/
35-
3632
# node.js
3733
#
3834
node_modules/

‎example/App.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { View, Text, StatusBar, SafeAreaView, Alert } from "react-native";
2+
import { View, Text, StatusBar, SafeAreaView, Pressable } from "react-native";
33
import AppleHeader from "react-native-apple-header";
44
import BottomSearchBar from "react-native-bottom-search-bar";
55
import BouncyCheckbox from "react-native-bouncy-checkbox";
@@ -16,10 +16,11 @@ export default class App extends React.Component {
1616
<BouncyCheckbox
1717
size={25}
1818
fillColor="red"
19+
TouchableComponent={Pressable}
1920
textStyle={{ fontFamily: "JosefinSans-Regular" }}
2021
iconStyle={{ borderColor: "red" }}
2122
unfillColor="#FFFFFF"
22-
text="Custom Checkbox"
23+
text="Custom Checkbox with Pressable Component"
2324
onPress={(isChecked: boolean) => {}}
2425
/>
2526
</View>

‎example/android/app/build.gradle‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,8 @@ def jscFlavor = 'org.webkit:android-jsc:+'
121121
def enableHermes = project.ext.react.get("enableHermes", false);
122122

123123
android {
124+
ndkVersion rootProject.ext.ndkVersion
125+
124126
compileSdkVersion rootProject.ext.compileSdkVersion
125127

126128
compileOptions {
@@ -169,11 +171,12 @@ android {
169171
variant.outputs.each { output ->
170172
// For each separate APK per architecture, set a unique version code as described here:
171173
// https://developer.android.com/studio/build/configure-apk-splits.html
174+
// Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
172175
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
173176
def abi = output.getFilter(OutputFile.ABI)
174177
if (abi != null) { // null for the universal-debug, universal-release variants
175178
output.versionCodeOverride =
176-
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
179+
defaultConfig.versionCode * 1000 + versionCodes.get(abi)
177180
}
178181

179182
}

‎example/android/app/src/debug/AndroidManifest.xml‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,10 @@
44

55
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
66

7-
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
7+
<application
8+
android:usesCleartextTraffic="true"
9+
tools:targetApi="28"
10+
tools:ignore="GoogleAppIndexingWarning">
11+
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
12+
</application>
813
</manifest>

‎example/android/app/src/main/AndroidManifest.xml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,5 @@
2121
<category android:name="android.intent.category.LAUNCHER" />
2222
</intent-filter>
2323
</activity>
24-
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
2524
</application>
26-
2725
</manifest>

‎example/android/app/src/main/res/values/styles.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<resources>
22

33
<!-- Base application theme. -->
4-
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
4+
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
55
<!-- Customize your theme here. -->
66
<item name="android:textColor">#000000</item>
77
</style>

0 commit comments

Comments
 (0)