How to style li in react as a radio button?

Question

I have tried multiple times but could'nt success. How to style li in css as a radio button, below is snapshot of button design.

Answer 1

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,
    },
});