try making a single component "checkbox" and calling it. Here is mine:
import React, { useState, useEffect } from "react";
import { View, StyleSheet, TouchableOpacity } from "react-native";
import { MaterialCommunityIcons, AntDesign } from "@expo/vector-icons";
import colors from "../colors";
export const Checkbox = (props) => {
const { children, checked, onCheck, style, checkboxStyle, checkedColor, contentStyle } = props;
return (
<TouchableOpacity
style={[{ alignSelf: "flex-start" }, style]}
onPress={() => {
onCheck(!checked);
}}
>
<View style={[styles.wrapper]}>
<View style={[styles.square, { backgroundColor: checked ? colors.black : "transparent", borderColor: checked ? checkedColor : colors.text_secondary }, checkboxStyle]}>
{checked ? <MaterialCommunityIcons name="check" size={14} color="white" /> : null}
</View>
<View style={[styles.text, contentStyle]}>{children}</View>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
wrapper: {
flexDirection: "row",
alignItems: "center",
},
square: {
width: 20,
height: 20,
borderWidth: 1,
alignItems: "center",
justifyContent: "center",
borderRadius: 3,
},
text: {
marginLeft: 10,
},
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.