Picker, Switch & Slider Components in React Native

React Native এ Picker, Switch এবং Slider হলো বহুল ব্যবহৃত input components যা ব্যবহারকারীর কাছ থেকে নির্বাচন, toggle এবং range value নেওয়ার জন্য ব্যবহৃত হয়। এই Chapter-এ আমরা প্রতিটি component বিস্তারিতভাবে শিখবো।

🔶 Picker Component

Picker হলো একটি dropdown selection component যেখানে user একটি option নির্বাচন করতে পারে। এটি Android ও iOS উভয় প্ল্যাটফর্মেই কাজ করে।

📌 Basic Picker Example

import React, { useState } from "react";
import { View, Text } from "react-native";
import { Picker } from "@react-native-picker/picker";

export default function App() {
  const [language, setLanguage] = useState("javascript");

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18 }}>Choose a Language:</Text>

      <Picker
        selectedValue={language}
        onValueChange={(value) => setLanguage(value)}
        style={{ height: 50 }}
      >
        <Picker.Item label="JavaScript" value="javascript" />
        <Picker.Item label="Python" value="python" />
        <Picker.Item label="C++" value="cpp" />
      </Picker>

      <Text style={{ marginTop: 10 }}>Selected: {language}</Text>
    </View>
  );
}

    

✔ Picker Best Use Cases

• Dropdown menu
• Country/Language selector
• Category selection
• Filtering options

---

🔶 Switch Component

Switch হলো একটি toggle button যা সাধারণত settings অথবা ON/OFF state নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

📌 Basic Switch Example

import React, { useState } from "react";
import { View, Text, Switch } from "react-native";

export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18 }}>Enable Notifications:</Text>

      <Switch
        value={isEnabled}
        onValueChange={(value) => setIsEnabled(value)}
        thumbColor={isEnabled ? "teal" : "#f4f3f4"}
        trackColor={{ true: "#80cbc4", false: "#ccc" }}
      />

      <Text style={{ marginTop: 10 }}>Status: {isEnabled ? "ON" : "OFF"}</Text>
    </View>
  );
}

    

✔ Switch Best Use Cases

• Notification toggle
• Dark mode ON/OFF
• WiFi/Bluetooth toggle
• Privacy settings

---

🔶 Slider Component

Slider একটি horizontal bar যার knob drag করে user একটি range-value দিতে পারে। Volume control, rating bar, brightness control-এ এর ব্যবহার সবচেয়ে বেশি।

📌 Basic Slider Example

import React, { useState } from "react";
import { View, Text } from "react-native";
import Slider from "@react-native-community/slider";

export default function App() {
  const [value, setValue] = useState(50);

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18 }}>Volume: {value}</Text>

      <Slider
        style={{ width: "100%", height: 40 }}
        minimumValue={0}
        maximumValue={100}
        value={value}
        minimumTrackTintColor="teal"
        maximumTrackTintColor="#ccc"
        onValueChange={(val) => setValue(Math.floor(val))}
      />
    </View>
  );
}

    

✔ Slider Best Use Cases

• Volume control
• Brightness control
• Price range selection
• Progress adjustment
• Video scrubber

---

🔶 Picker vs Switch vs Slider

Component	Used For	User Input Type
Picker	Dropdown Selection	Single Choice
Switch	Toggle On/Off	Boolean
Slider	Range or percentage input	Floating/Integer Value

📌 Summary

Picker, Switch এবং Slider আপনার React Native অ্যাপে input system আরও smooth এবং flexible করে তোলে। Dropdown, toggle এবং range selection—এই তিন ধরনের important UI interaction আপনি খুব সহজে বাস্তবায়ন করতে পারেন। Real-world অ্যাপ UI তৈরি করতে এগুলো শেখা অত্যন্ত জরুরি।