react-native-modern-elements
Version:
A modern, customizable UI component library for React Native
62 lines (61 loc) • 2.4 kB
JavaScript
import React, { memo, useRef } from "react";
import { Animated, StyleSheet, Text, TouchableWithoutFeedback, View, } from "react-native";
import { colors } from "../constants/theme";
import CheckboxIconSvg from "../assets/svg/CheckboxIconSvg";
const CheckBox = ({ checked = false, onChange, text, containerStyle = {}, checkBoxStyle = {}, iconSize, }) => {
const scaleAnim = useRef(new Animated.Value(1)).current;
const handlePress = () => {
// Reset animation before triggering it
scaleAnim.setValue(1); // Reset the scale to 1
// Animate first
Animated.sequence([
Animated.spring(scaleAnim, {
toValue: 0.9,
useNativeDriver: true,
friction: 3,
}),
Animated.spring(scaleAnim, {
toValue: 0.9,
useNativeDriver: true,
friction: 4,
}),
]).start();
// Then update state
onChange === null || onChange === void 0 ? void 0 : onChange(!checked);
};
return (React.createElement(View, { style: [styles.container, containerStyle] },
React.createElement(TouchableWithoutFeedback, { onPress: handlePress },
React.createElement(Animated.View, { style: [
styles.checkbox,
checkBoxStyle,
{ transform: [{ scale: scaleAnim }] },
checked && styles.checkedBox, // apply bg color if checked
] }, checked && (React.createElement(CheckboxIconSvg, { color: colors.white, width: iconSize, height: iconSize })))),
text ? React.createElement(Text, { style: styles.label }, text) : null));
};
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
gap: 8,
},
checkbox: {
height: 30,
width: 30,
borderRadius: 4,
// borderWidth: 1,
borderColor: colors === null || colors === void 0 ? void 0 : colors.primary,
backgroundColor: "#fff",
justifyContent: "center",
alignItems: "center",
},
checkedBox: {
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.primary, // primary color
// borderColor: "#007BFF",
},
label: {
flexWrap: "nowrap",
fontSize: 14,
},
});
export default memo(CheckBox);