📂 React Native + Firebase Storage - Image Upload ও Download (TypeScript)

React Native অ্যাপে Firebase Storage ব্যবহার করে image upload এবং download করা খুব সহজ। এখানে আমরা দেখব কিভাবে ফাইল বেসড অ্যাপ দিয়ে images upload ও download করতে হয় TypeScript সহ।

⚙️ ১. প্রয়োজনীয় Packages ইনস্টল করুন

Firebase ব্যবহার করার জন্য আমাদের react-native-firebase modules লাগবে:

yarn add @react-native-firebase/app
yarn add @react-native-firebase/storage
yarn add react-native-image-picker

নিশ্চিত করুন Android ও iOS এর জন্য proper Firebase configuration করা আছে।

📁 ২. Firebase Storage Setup

Firebase Console থেকে Storage enable করুন এবং rules testing এর জন্য সব খোলা রাখতে পারেন:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

প্রোডাকশন এ অবশ্যই rules secure করুন।

🖼️ ৩. Image Picker & Upload Function

আমরা react-native-image-picker ব্যবহার করে ছবি নির্বাচন করব এবং Firebase Storage-এ upload করব।

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

const FirebaseImageUpload = () => {
  const [imageUrl, setImageUrl] = useState('');

  const pickAndUploadImage = async () => {
    const result = await launchImageLibrary({mediaType: 'photo'});
    if (!result.assets) return;

    const file = result.assets[0];
    const reference = storage().ref(`/images/${file.fileName}`);

    await reference.putFile(file.uri);
    const url = await reference.getDownloadURL();
    setImageUrl(url);
  };

  return (
    <View className="p-4">
      <Button title="Select & Upload Image" onPress={pickAndUploadImage} />
      {imageUrl !== '' && (
        <Image source={{uri: imageUrl}} className="w-full h-64 mt-4 rounded-lg" />
      )}
    </View>
  );
};

export default FirebaseImageUpload;

এখানে আমরা Image Picker ব্যবহার করেছি, Firebase Storage এ upload করেছি এবং download URL set করেছি।

🔄 ৪. Download & Display Image

Firebase থেকে download URL নিয়ে আমরা Image কম্পোনেন্টে প্রদর্শন করতে পারি। উপরের code-এই করা হয়েছে।

যখন setImageUrl(url) কল হয়, তখন React Native স্বয়ংক্রিয়ভাবে Image render করবে।

💡 ৫. গুরুত্বপূর্ণ نکات

• File URI কে সরাসরি Storage-এ upload করতে putFile ব্যবহার করুন।
• Image Picker থেকে only URI নিন, base64 এ convert করলে memory heavy হতে পারে।
• Upload ও Download প্রক্রিয়া async / await ব্যবহার করুন।
• Display করতে Image কম্পোনেন্ট ব্যবহার করুন এবং width/height ঠিক করুন।
• উচ্চ রেজোলিউশন ছবি upload করলে loading time বাড়তে পারে, compression ব্যবহার করুন।

📌 ৬. Output Preview

ব্যবহারকারী Select & Upload Image বাটনে চাপ দিলে:

• Image Picker খুলবে
• ছবি নির্বাচন করলে Firebase Storage-এ upload হবে
• Download URL থেকে React Native অ্যাপে ছবি প্রদর্শিত হবে

✨ Summary

এই টিউটোরিয়ালে আমরা শিখেছি:

• React Native + TypeScript এ Firebase Storage setup করা
• Image Picker দিয়ে ছবি নির্বাচন করা
• Firebase Storage-এ ছবি upload করা
• Download URL নিয়ে অ্যাপে ছবি প্রদর্শন করা
• Performance ও memory optimization এর জন্য best practices

✔ এই পদ্ধতি ফলো করলে আপনার React Native অ্যাপ এ Firebase Storage ব্যবহার করে seamless Image Upload & Download করা সম্ভব।