React Native-এ চেকবক্স (Checkbox) দেখানোর পদ্ধতি

React Native-র কোর প্যাকেজে চেকবক্স নেই। react-native-paper লাইব্রেরি থেকে Material Design চেকবক্স ব্যবহার করা যায়।

ইনস্টলেশন

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

বেসিক সিনট্যাক্স

<Checkbox status={checkbox_status} onPress={on_check_func} />

ইম্পোর্ট

import { Checkbox } from 'react-native-paper';

মূল প্রপস

উদাহরণ: স্টেট সহ চেকবক্স

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 (
    
       setChecked(!checked)}
        color="green"
        uncheckColor="red"
      />
      Checkbox
    
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
});

export default MyComponent;

ব্যাখ্যা

• useState(false) দিয়ে ডিফল্ট আনচেকড।
• onPress-এ setChecked(!checked) দিয়ে টগল করা হয়।
• status প্রপে টারনারি অপারেটর দিয়ে ডাইনামিক মান দেওয়া হয়েছে।

Indeterminate স্টেট

"Select All" চেকবক্সের মতো আংশিক সিলেকশনের জন্য:

<Checkbox status="indeterminate" />

অন্যান্য লাইব্রেরি অপশন

• @react-native-community/checkbox (নেটিভ ফিল) - Expo-এ বিল্ট-ইন।
• react-native-checkbox (সিম্পল)।