Using Images, SVG & File Upload

React Native: Using Images, SVG & File Upload (বাংলায় সম্পূর্ণ গাইড)

মোবাইল অ্যাপ ডেভেলপমেন্টে Image, SVG এবং File Upload খুব গুরুত্বপূর্ণ বিষয়। এই টপিকে আমরা জানবো—React Native এ কিভাবে লোকাল ইমেজ, নেটওয়ার্ক ইমেজ, SVG ফাইল এবং ইমেজ/ফাইল আপলোড করা যায় সহজভাবে।

📌 1. React Native এ ইমেজ ব্যবহার (Local, Remote, URI)

React Native এ ইমেজ লোড করার তিনটি প্রধান উপায় আছে:

  • Local Image (অ্যাপের ভিতরের ফাইল)
  • Remote Image (ইন্টারনেট থেকে)
  • Base64 / URI Image

✔ Local Image Example

import React from 'react';
import { Image } from 'react-native';

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

✔ Remote Image Example

<Image 
  source={{ uri: 'https://example.com/myimage.jpg' }} 
  style={{ width: 200, height: 200 }}
/>

✔ Image Resize Modes

React Native এ ইমেজ কিভাবে দেখাবে তা নিয়ন্ত্রণের জন্য resizeMode ব্যবহার হয়:

  • cover
  • contain
  • stretch
  • repeat
  • center
<Image 
  resizeMode="cover"
  style={{ width: 300, height: 200 }}
/>

📌 2. React Native এ SVG ব্যবহার

SVG আইকন বা ইলাস্ট্রেশন ব্যবহার করতে সবচেয়ে জনপ্রিয় লাইব্রেরি হলো: react-native-svg

✔ Installation

npm install react-native-svg

✔ Example SVG Component

import Svg, { Circle } from "react-native-svg";

export default function App() {
  return (
    <Svg height="150" width="150">
      <Circle cx="75" cy="75" r="50" stroke="teal" strokeWidth="2.5" fill="lightblue" />
    </Svg>
  );
}

✔ SVG Icon ব্যবহার (react-native-svg-transformer)

যদি আপনি সরাসরি `.svg` ফাইল import করতে চান:

npm install react-native-svg-transformer
Example: 
import Logo from './assets/logo.svg';

📌 3. React Native এ File Upload / Image Upload

File Upload করতে সাধারণত আমরা react-native-image-picker বা expo-image-picker ব্যবহার করি।

✔ Installation (React Native CLI)

npm install react-native-image-picker

✔ Example: Image Picker + Upload

import {launchImageLibrary} from 'react-native-image-picker';

const pickImage = () => {
  launchImageLibrary(
    {mediaType: 'photo'},
    (response) => {
      if (!response.didCancel && !response.errorCode) {
        console.log("Selected Image: ", response.assets[0].uri);
      }
    }
  );
};

✔ Upload Image to Server (Multipart Form Data)

const uploadImage = async (imageUri) => {
  const formData = new FormData();

  formData.append("file", {
    uri: imageUri,
    type: "image/jpeg",
    name: "photo.jpg",
  });

  const res = await fetch("https://your-server.com/upload", {
    method: "POST",
    body: formData,
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });

  console.log(await res.json());
};

📌 4. Expo Users — Image & File Upload

✔ Installation

expo install expo-image-picker

✔ Example

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
  });

  if (!result.cancelled) {
    console.log(result.uri);
  }
};

📌 5. Best Practices

  • ইমেজ compress করে আপলোড করা
  • SVG ব্যবহার করলে অ্যাপ লাইটওয়েট হবে
  • Lazy loading ইমেজ পারফরমেন্স বাড়ায়
  • ক্যাশিং ব্যবহার করলে অ্যাপ দ্রুত চলে

✔ সারসংক্ষেপ

এই টপিকে আমরা শিখলাম—

  • React Native এ Local & Remote Image ব্যবহার
  • SVG ফাইল / আইকন ব্যবহার
  • Image Picker দিয়ে ছবি নির্বাচন
  • Server এ ইমেজ Upload
  • Expo & CLI দুটোতেই কিভাবে কাজ করতে হয়
← Previous Next →
👼 Quiz
/

লোড হচ্ছে...