আমি gầnে চাকরি পরিবর্তন করলাম, এবং আমার প্রথম টাস্কগুলোর মধ্যে একটি ছিল React Native-এ একটি bottom sheet তৈরি করা।
নেটিভ Android ডেভেলপমেন্ট ব্যাকগ্রাউন্ড থেকে আসায়, আমি ভাবলাম এটি নেটিভ-এ bottom sheet বানানের চেয়ে কঠিন হবে। কিন্তু আমি পুরোপুরি ভুল ছিল! আমি এতটাই মুগ্ধ হয়েছিলাম যে একটি সিম্পল টিউটোরিয়াল লিখতে সিদ্ধান্ত নিলাম React Native-এ bottom sheet তৈরি করার উপর।
Bottom sheet একটি উপযোগী কম্পোনেন্ট যা স্ক্রিনের নিচ থেকে স্লাইড আপ করে এবং সাধারণত বিভিন্ন অপশন ধারণ করে। এটি আধুনিক ডিজাইনে খুব কমন এবং Uber, Zomato, এবং আরও অনেক অ্যাপ দ্বারা ব্যবহৃত হয়।
চূড়ান্ত ফলাফল কেমন দেখাবে সেটি এখানে:
তাহলে দেখি React Native-এ bottom sheet কীভাবে তৈরি করব।
Getting Started
প্রথমে, React Native-এ একটি নতুন প্রজেক্ট তৈরি করুন। আমি expo-cli ব্যবহার করছি। আপনি যদি expo-cli-র সম্পর্কে না জানেন বা React Native-এ নতুন শুরু করছেন, এই লিংকটি চেক করুন।
আমি আমার প্রজেক্টের নাম দিয়েছি BottomSheetDemo।
এরপর, আমাদের react-native-modalbox ইনস্টল করতে হবে। এটি আমাদের অনেক ইনবিল্ট ক্যাপাবিলিটি দেয় যেমন অ্যানিমেশন, পজিশন, ব্যাকড্রপ ইত্যাদি।
$ expo install react-native-modalbox@1.7.1
নোট: ভার্সন 1.7.1 ইনস্টল করতে মনে রাখবেন। লেটেস্ট ভার্সনে একটি বাগ আছে যেখানে backdropPressToClose কাজ করে না।
মডাল তৈরি করা
মডাল তৈরি করার সময়। শুরুতে দেওয়া কোডটি রিমুভ করুন এবং আপনার App.js ফাইলে নিচের কোড যোগ করুন:
এটি আমাদের bottom sheet/modal-এর বেয়ার বোন্স। আমরা শুধু মডালের সেন্টারে একটি টেক্সট দেখাব।
ইন্টারঅ্যাকশন যোগ করা
আমাদের bottom sheet দেখাতে হবে যখন একটি বাটন চাপা হবে। চলুন কিছু ইন্টারঅ্যাকশন যোগ করি।
আমি স্ক্রিনের মাঝপথে একটি সিম্পল বাটন যোগ করছি:
এই বাটনে ক্লিক করলে, আমাদের bottom sheet শো/হাইড করতে হবে। এটি করার জন্য, আমরা React hook useState ব্যবহার করে একটি স্টেট মেইনটেইন করব।
আমাদের মডালে "isOpen" নামক একটি প্রপ আছে যা আমরা টগল করে bottom sheet শো/হাইড করতে পারি। এটি দেখাতে আমরা modalVisible true সেট করব এবং হাইড করতে false।
কিন্তু প্রথমে, আমাদের মডালকে বাকি কোড থেকে আলাদা করি কারণ এটি একটু মেসি হয়ে যাচ্ছে। আমি একটি আলাদা ফাংশন তৈরি করব যা আমার মডাল রিটার্ন করবে।
কোডটি অনেক ক্লিন দেখাচ্ছে এখন। কিন্তু আমাদের bottom sheet এখনও সঠিকভাবে bottom sheet-এর মত দেখাচ্ছে না। আমাদের কিছু স্টাইলিং যোগ করতে হবে।
কিছু স্টাইলিং যোগ করা যাক!
একটি stylesheet তৈরি করুন এবং নিচের স্টাইলগুলো যোগ করুন:
চূড়ান্ত কোডটি এইরকম দেখাবে:
আমরা অবশেষে React Native-এ আমাদের bottom sheet তৈরি করলাম। এটি খুব সিম্পল এবং নেটিভ Android-এর চেয়ে অনেক সহজে তৈরি করা যায়।
আমি iOS সম্পর্কে কমেন্ট করতে পারব না কারণ আমি কখনো ট্রাই করিনি।
তাহলে, আপনি যদি iOS ডেভেলপার হন বা iOS-এ bottom sheet বানানোর অভিজ্ঞতা থাকে, আমাকে জানান আপনার অভিজ্ঞতা কেমন ছিল।
AndroidVille SLACK workspace-এ জয়েন করুন মোবাইল ডেভেলপারদের জন্য যেখানে লোকেরা লেটেস্ট টেক, বিশেষ করে Android Development, RxJava, Kotlin, Flutter, এবং মোবাইল ডেভেলপমেন্ট জেনারেল সম্পর্কে তাদের লার্নিং শেয়ার করে।
এই লিংকে ক্লিক করে workspace-এ জয়েন করুন। এটি সম্পূর্ণ ফ্রি।
পড়ে ভালো লাগলে? এই পোস্টটি Facebook, Whatsapp, এবং LinkedIn-এ শেয়ার করা ভুলবেন না।
আপনি আমাকে LinkedIn, Quora, Twitter, এবং Instagram-এ ফলো করতে পারেন যেখানে আমি মোবাইল ডেভেলপমেন্ট, বিশেষ করে Android এবং Flutter সংক্রান্ত প্রশ্নের উত্তর দিই।
