📁 React Native (TypeScript) – Images, SVG & File Upload

মোবাইল অ্যাপে ইমেজ, SVG আইকন এবং ফাইল আপলোড খুবই গুরুত্বপূর্ণ একটি ফিচার। এই লেসনে আমরা React Native (TypeScript) ব্যবহার করে ধাপে ধাপে শিখবো — Local Image, Network Image, SVG Icon এবং File Upload ।

---

🖼️ 1. Local Image ব্যবহার করা

Local Image মানে হচ্ছে আপনার প্রোজেক্টের ভিতরে থাকা ইমেজ (assets ফোল্ডার)।

📂 Folder Structure:

assets/
 └── images/
     └── logo.png
  

📌 Example (TypeScript):

import { Image, View } from 'react-native';

export default function App() {
  return (
    <View>
      <Image
        source={require('./assets/images/logo.png')}
        style={{ width: 120, height: 120 }}
      />
    </View>
  );
}
  

✔ Output: স্ক্রিনে একটি লোকাল ইমেজ দেখাবে।

---

🌐 2. Network Image ব্যবহার করা

API বা ইন্টারনেট থেকে আসা ইমেজ দেখানোর জন্য Network Image ব্যবহার করা হয়।

<Image
  source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
  style={{ width: 100, height: 100 }}
/>
  

✔ Output: ইন্টারনেট থেকে লোড হওয়া ইমেজ দেখাবে।

---

🎨 3. SVG ব্যবহার করা (Icons & Graphics)

SVG ইমেজ স্কেল করলে কোয়ালিটি নষ্ট হয় না। React Native-এ SVG ব্যবহারের জন্য আলাদা লাইব্রেরি দরকার।

📦 Install Packages:

npm install react-native-svg react-native-svg-transformer
  

📂 SVG Structure:

assets/
 └── icons/
     └── user.svg
  

📌 SVG Usage (TypeScript):

import UserIcon from './assets/icons/user.svg';

export default function App() {
  return (
    <UserIcon width={60} height={60} fill="teal" />
  );
}
  

✔ Output: সুন্দর স্কেলেবল SVG আইকন দেখাবে।

---

📤 4. File Upload (Image Picker)

ব্যবহারকারী যাতে গ্যালারি বা ক্যামেরা থেকে ছবি আপলোড করতে পারে, তার জন্য আমরা Image Picker ব্যবহার করি।

📦 Install:

npm install react-native-image-picker
  

📌 Image Upload Example (TypeScript):

import { launchImageLibrary } from 'react-native-image-picker';
import { Button, Image, View } from 'react-native';
import { useState } from 'react';

export default function UploadImage() {
  const [photo, setPhoto] = useState(null);

  const pickImage = () => {
    launchImageLibrary({ mediaType: 'photo' }, (response) => {
      if (response.assets) {
        setPhoto(response.assets[0].uri || null);
      }
    });
  };

  return (
    <View>
      <Button title="Upload Image" onPress={pickImage} />

      {photo && (
        <Image
          source={{ uri: photo }}
          style={{ width: 200, height: 200, marginTop: 10 }}
        />
      )}
    </View>
  );
}
  

✔ Output: বাটনে ক্লিক করলে গ্যালারি খুলবে এবং নির্বাচিত ছবি স্ক্রিনে দেখাবে।

---

✨ Summary

• Local Image → require() ব্যবহার
• Network Image → uri ব্যবহার
• SVG → react-native-svg
• File Upload → Image Picker
• সব কোড TypeScript friendly

🎯 এই টপিকটি ক্লিয়ার হলে আপনি যেকোনো প্রোডাকশন লেভেলের React Native অ্যাপে ইমেজ, আইকন ও ফাইল আপলোড ফিচার তৈরি করতে পারবেন।