react-native-modern-elements
Version:
A modern, customizable UI component library for React Native
46 lines (45 loc) • 2.01 kB
JavaScript
import React, { memo } from "react";
import { StyleSheet, TouchableOpacity, View, } from "react-native";
const RadioCircle = ({ value, selected, onSelect, containerStyle, circleSize = 24, circleBorderWidth = 2, circleColor = "#ccc", selectedColor = "#4CAF50", activeDotSize, type = "one", }) => {
const isSelected = value === selected;
// Inner dot size (never bigger than outer - border)
const maxInnerSize = circleSize - circleBorderWidth * 2;
const innerSize = Math.min(activeDotSize !== null && activeDotSize !== void 0 ? activeDotSize : circleSize / 2, maxInnerSize);
return (React.createElement(TouchableOpacity, { style: [styles.container, containerStyle], onPress: () => onSelect(value), activeOpacity: 0.8 },
React.createElement(View, { style: [
styles.circle,
{
width: circleSize,
height: circleSize,
borderWidth: type === "one"
? circleBorderWidth
: isSelected
? circleBorderWidth
: 0,
borderColor: circleColor,
borderRadius: circleSize / 2,
},
] }, type === "one" ? (isSelected && (React.createElement(View, { style: {
width: innerSize,
height: innerSize,
backgroundColor: selectedColor,
borderRadius: innerSize / 2,
} }))) : (React.createElement(View, { style: {
width: innerSize,
height: innerSize,
backgroundColor: selectedColor,
borderRadius: innerSize / 2,
} })))));
};
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
circle: {
justifyContent: "center",
alignItems: "center",
},
});
export default memo(RadioCircle);