React Native-এ Material Chip View দেখানোর পদ্ধতি

চিপ (Chip) হলো একটি ছোট ইন্টারঅ্যাক্টিভ এলিমেন্ট যা ইনপুট, অ্যাট্রিবিউট বা অ্যাকশন উপস্থাপন করে। React Native-এ react-native-paper লাইব্রেরি দিয়ে Material Design চিপ ব্যবহার করা যায়।

ইনস্টলেশন

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

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

<Chip icon="icon_name" onPress={handler}>Chip Label</Chip>

ইম্পোর্ট

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

মূল প্রপস

উদাহরণ: বিভিন্ন টাইপের চিপ

import * as React from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import { Chip } from 'react-native-paper';

const MyComponent = () => (
  
    {/* ডিজেবল চিপ */}
     console.log('camera')}
    >
      Click Here
    

    {/* আউটলাইনড, সিলেক্টেড চিপ */}
     console.log('apple')}
    >
      Apple Icon
    

    {/* ক্যালেন্ডার চিপ */}
     console.log('calendar')}
    >
      Select Date
    
  
);

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

export default MyComponent;

চিপের ধরন (Material Design অনুযায়ী)

• Input Chip: ব্যবহারকারীর ইনপুট রিপ্রেজেন্ট করে (onClose সহ)।
• Choice Chip: একক সিলেকশন (radio button-এর মতো)।
• Filter Chip: মাল্টিপল সিলেকশন (checkbox-এর মতো)।
• Action Chip: একটি অ্যাকশন ট্রিগার করে (বাটন-এর মতো)।

টিপস

• আইকন নাম পেতে Material Design Icons সাইট দেখুন।
• থিমিং (Theming) ব্যবহার করে গ্লোবালি রঙ কাস্টমাইজ করুন।