How to show checkbox in reactnative?

Checkbox is a common component that we often use on UI. We do have some cool ones How to display checkbox in reactnative.

The core react-native package does not support checkboxes, you need to install one software package to use it.

The following packages must be installed to display checkboxes-

npm install --save-dev react-native-paper

The basic checkbox components are as follows-

<Checkbox status={checkboxstatus} onPress={onCheckboxCheckedfunc} />

Now let’s look at some of the checkboxes Important Properties-

##statusThe value that can be set to give the status is Checked, unchecked, and undefined. DisabledThe value is a boolean. Can be used as Enable/disable checkbox. onPressFunction that will be called when the button is pressed The checkbox is checked. ColorThe color assigned to the checkboxuncheckColor

Props th>	Description
Unchecked checkbox s color

This is a simple check box display -

useState is used to set the checked and unchecked status of the check box: display Below -

const [checked, setChecked] = React.useState(false);

status is saved in checked variable, setChecked method is used Update it.

When the user checks/unchecks the checkbox, the checked status will be updated as shown in the figure Below -

onPress={() => {
   setChecked(!checked);
}}

The complete code is as follows -

Example

import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Checkbox } from 'react-native-paper';
const MyComponent = () => {
   const [checked, setChecked] = React.useState(false);
   return (
      <SafeAreaView style={styles.container}>
         <Checkbox
            status={checked ? &#39;checked&#39; : &#39;unchecked&#39;}
            onPress={() => {
               setChecked(!checked);
            }}
            color={&#39;green&#39;}
            uncheckColor={&#39;red&#39;}
         />
      <Text>Checkbox</Text>
      </SafeAreaView>
   );
};
const styles = StyleSheet.create({
   container: {
      flex: 1,
      justifyContent: &#39;center&#39;,
      alignItems: &#39;center&#39;
   },
});
export default MyComponent;

Output

The above is the detailed content of How to show checkbox in reactnative?. For more information, please follow other related articles on the PHP Chinese website!