🎛️ React Native Picker, Switch & Slider Components (TypeScript)

React Native অ্যাপে Picker, Switch ও Slider খুবই গুরুত্বপূর্ণ UI Components। এগুলো ব্যবহার করে ইউজার সহজে অপশন নির্বাচন, অন/অফ টগল এবং ভ্যালু কন্ট্রোল করতে পারে। এই টিউটোরিয়ালে আমরা TypeScript ব্যবহার করে file-based ভাবে প্রতিটি component বুঝবো।

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

const CustomPicker = (): JSX.Element => {
  const [language, setLanguage] = useState<string>('js');

  return (
    <View>
      <Text>Selected: {language}</Text>
      <Picker
        selectedValue={language}
        onValueChange={(itemValue) => setLanguage(itemValue)}
      >
        <Picker.Item label="JavaScript" value="js" />
        <Picker.Item label="TypeScript" value="ts" />
        <Picker.Item label="Python" value="py" />
      </Picker>
    </View>
  );
};

export default CustomPicker;
    

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

const ThemeSwitch = (): JSX.Element => {
  const [isEnabled, setIsEnabled] = useState<boolean>(false);

  return (
    <View>
      <Text>Dark Mode: {isEnabled ? 'ON' : 'OFF'}</Text>
      <Switch
        value={isEnabled}
        onValueChange={setIsEnabled}
        trackColor={{ false: '#ccc', true: '#0d9488' }}
        thumbColor={isEnabled ? '#14b8a6' : '#f4f3f4'}
      />
    </View>
  );
};

export default ThemeSwitch;
    

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

const VolumeSlider = (): JSX.Element => {
  const [volume, setVolume] = useState<number>(50);

  return (
    <View>
      <Text>Volume: {volume}</Text>
      <Slider
        minimumValue={0}
        maximumValue={100}
        value={volume}
        onValueChange={(value) => setVolume(Math.round(value))}
        minimumTrackTintColor="#14b8a6"
        maximumTrackTintColor="#99f6e4"
      />
    </View>
  );
};

export default VolumeSlider;