-2

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.

enter image description here

Lazy Gyan
  • 27
  • 4
  • 1
    Why don't you just use a radio button? – Rob Aug 19 '22 at 11:35
  • Hi, I have tried to use radio button instead of li but it was got bit of lengthy so I decided to use li as this is for my learning and I want to try how to implement it as a radio button. And, at last I have figured it out. Dont know who has de-voted my question but if you can'nt help someone then please dont de-motivate others. – Lazy Gyan Aug 22 '22 at 12:25

1 Answers1

0

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,
    },
});
Alfonso.b
  • 21
  • 3