React Native-এ ড্রপডাউন (Picker) দেখানোর পদ্ধতি

React Native-র বিল্ট-ইন Picker কম্পোনেন্ট একটি ড্রপডাউন/স্পিনার UI প্রদান করে যেখানে থেকে ব্যবহারকারী একটি অপশন সিলেক্ট করতে পারে।

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

<Picker selectedValue={selected} onValueChange={onChange}>
  <Picker.Item label="Label" value="value" />
  ...
</Picker>

ইম্পোর্ট

import { Picker } from 'react-native';

মূল প্রপস

উদাহরণ: বেসিক ড্রপডাউন

import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native';

class PickerExample extends Component {
  state = { user: '' };

  updateUser = (user) => {
    this.setState({ user });
  };

  render() {
    return (
      
        
          
          
          
        
        {this.state.user || 'Select a user'}
      
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 20 },
  text: { fontSize: 20, marginTop: 20, textAlign: 'center', color: 'red' }
});

export default PickerExample;

আউটপুট

• Android-এ ডিফল্ট একটি ড্রপডাউন/স্পিনার হিসেবে দেখাবে।
• iOS-এ একটি অ্যাকশন শীট (Action Sheet) হিসেবে স্লাইড আপ হবে।
• সিলেক্ট করলে নিচে নামটি দেখাবে।

সীমাবদ্ধতা এবং বিকল্প

Picker ডিপ্রিকেটেড হলেও এখনও কাজ করে, কিন্তু নতুন প্রজেক্টে নিচের লাইব্রেরিগুলো সুপারিশ করা হয়:

npm install @react-native-picker/picker

import { Picker } from '@react-native-picker/picker';
// বাকি কোড একই