React Native-এ SwitchSelector কম্পোনেন্ট ব্যবহার করা

SwitchSelector হলো একটি রেডিও-টগল হাইব্রিড কম্পোনেন্ট যা ২-এর অধিক অপশন থেকে একটিই সিলেক্ট করার সুবিধা দেয়। এটি react-native-switch-selector প্যাকেজ থেকে আসে।

ইনস্টলেশন

npm i react-native-switch-selector --save-dev

ইম্পোর্ট

import SwitchSelector from 'react-native-switch-selector';

মূল প্রপস

উদাহরণ ১: জেন্ডার সিলেকশন (২ অপশন, ইমেজসহ)

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from 'react-native-switch-selector';

// ইমেজ পাথ অনুযায়ী ঠিক করুন
const male = require('./assets/male.png');
const female = require('./assets/female.png');

const images = { female, male };

const options = [
  { label: 'Female', value: 'f', imageIcon: images.female },
  { label: 'Male', value: 'm', imageIcon: images.male }
];

export default class MySwitchSelectorComponent extends Component {
  render() {
    return (
      
         this.setState({ gender: value })}
          textColor="#ccceeaa"
          selectedColor="#7a44cf"
          buttonColor="#ccc"
          borderColor="#ccc"
          hasPadding
          options={options}
        />
      
    );
  }
}

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

উদাহরণ ২: তিন অপশন (ইমেজ ছাড়া)

const options = [
  { label: 'First', value: 'a' },
  { label: 'Second', value: 'b' },
  { label: 'Third', value: 'c' }
];

// JSX-এ একই SwitchSelector ব্যবহার করুন, fontSize='30' যোগ করে

ব্যবহারিক টিপস

• value প্রপটি যেকোনো টাইপের হতে পারে (স্ট্রিং, নাম্বার, অবজেক্ট)।
• অপশনগুলো হরিজন্টালি স্ক্রোলable হয় যদি জায়গা কম পড়ে।
• ফর্ম ভ্যালিডেশনের সাথে ইন্টিগ্রেট করতে onPress-এ স্টেট আপডেট করুন।

বিকল্প

• react-native-segmented-control-tab - সিম্পল ট্যাব স্টাইল।
• @react-native-material/segmented-buttons - ম্যাটেরিয়াল ডিজাইন।