Breaking News: Grepper is joining You.com. Read the official announcement!

react native logic example check box

Sore Sardine answered on January 27, 2023 Popularity 1/10 Helpfulness 1/10

answer react native logic example check box

react native logic example check box

Comment

##### Custom Checkbox Component

```

import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import {  colors, gbs, sc } from "../../utils/import/import_options";

type Props = {
    title: string,
    onPress(): void,
    isCheck: string
}

const CheckboxDescriptionComponent = ({title, onPress, isCheck}: Props) => {
    return (
        <View style={[styles.container]}>
            <View style={[styles.checkbox, {backgroundColor: isCheck === title ? "#8F1984" : colors.white}]}>
                <TouchableOpacity  onPress={() => onPress()} style={[gbs.center, {flex: 1}]}>
                   {
                    isCheck === title
                    ?  <View style={[{height: "40%", aspectRatio: 1, backgroundColor: 'white', borderRadius: sc.buttonHeight}]}></View>
                    : <></>
                   }
                </TouchableOpacity>
            </View>
            <Text style={[gbs.bodyTrirong, {color: colors.white}]}>{title}</Text>
        </View>
    );
}

export default CheckboxDescriptionComponent;


const styles = StyleSheet.create({
    container: {
        height: sc.checkboxHeight,
        flexDirection: 'row',
        alignItems: 'center',
    },
    checkbox: {
        height: '80%',
        aspectRatio: 1,
        borderRadius: sc.navBarHeight,
        marginRight: sc.padMid,
        borderWidth: sc.midSpace,
        borderColor: "#8F1984"
    }
});


```


##### Usage

```

import React, { useState } from "react";
import {View} from 'react-native';
import CheckboxDescriptionComponent from "../../../components/checkbox/checkbox_description_component";

const Test = () => {

  const [choose, setChoose] = useState<string>("something")
  return (  
    <View style={[{ flex: 6 }]}>

    {
      dataModels.map((item) => (
        <CheckboxDescriptionComponent
          key={item.id}
          title={item.title}
          isCheck={choose}
          onPress={() => { setChoose(item.title) }}
        />
      ))
    }

  </View>
  );
}

export default Test;


```

##### Custom Component
### <CheckboxDescriptionComponent />

```

import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import {  colors, gbs, sc } from "../../utils/import/import_options";

type Props = {
    title: string,
    onPress(): void,
    isCheck: string
}

const CheckboxDescriptionComponent = ({title, onPress, isCheck}: Props) => {
    return (
        <View style={[styles.container]}>
            <View style={[styles.checkbox, {backgroundColor: isCheck === title ? "#8F1984" : colors.white}]}>
                <TouchableOpacity  onPress={() => onPress()} style={[gbs.center, {flex: 1}]}>
                   {
                    isCheck === title
                    ?  <View style={[{height: "40%", aspectRatio: 1, backgroundColor: 'white', borderRadius: sc.buttonHeight}]}></View>
                    : <></>
                   }
                </TouchableOpacity>
            </View>
            <Text style={[gbs.bodyTrirong, {color: colors.white}]}>{title}</Text>
        </View>
    );
}

export default CheckboxDescriptionComponent;


const styles = StyleSheet.create({
    container: {
        height: sc.checkboxHeight,
        flexDirection: 'row',
        alignItems: 'center',
    },
    checkbox: {
        height: '80%',
        aspectRatio: 1,
        borderRadius: sc.navBarHeight,
        marginRight: sc.padMid,
        borderWidth: sc.midSpace,
        borderColor: "#8F1984"
    }
});


```

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: Grepper

Tags: box logic react-native typescript

Link to this answer
Share Copy Link

Contributed on Jan 27 2023

Sore Sardine

0 Answers Avg Quality 2/10

react native logic example check box

Contents

More Related Answers

react native logic example check box

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.