Styling in React Native (StyleSheet & Flexbox)

React Native-এ অ্যাপ ডেভেলপ করার সময় UI Design খুব গুরুত্বপূর্ণ একটি অংশ। ওয়েব ডেভেলপমেন্টে আমরা যেভাবে CSS ব্যবহার করি, React Native-এও ঠিক তেমনি style ব্যবহার করা হয়, তবে কিছু পার্থক্য আছে। এখানে styling মূলত দুইভাবে করা হয়:

• StyleSheet API ব্যবহার করে
• Flexbox Layout System ব্যবহার করে

চলুন বিস্তারিতভাবে শিখে নেওয়া যাক।

📌 1. StyleSheet কি?

StyleSheet হলো React Native-এর একটি বিল্ট-ইন API যা দিয়ে stylesheet তৈরি করা হয়। এটি browser CSS না হলেও এর structure CSS-এর মতোই।

🔹 StyleSheet Example

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffffff",
    padding: 20,
  },
  title: {
    fontSize: 24,
    color: "teal",
    fontWeight: "bold",
  },
});
  

উপরের কোডে আমরা দুইটি style তৈরি করেছি — container এবং title।

📌 2. Inline Styling (CSS মতো)

সরাসরি component-এর ভিতরে style object দিয়েও styling করা যায়।

<View style={{ padding: 20, backgroundColor: "#e0f7fa" }}>
  <Text style={{ fontSize: 18, color: "teal" }}>Hello React Native</Text>
</View>
  

তবে বড় project-এ অবশ্যই StyleSheet ব্যবহার করতে হয়।

📌 3. Flexbox কি এবং কেন ব্যবহার করা হয়?

React Native-এ layout তৈরির জন্য Flexbox ব্যবহার করা হয়। এটি responsive layout তৈরি করতে অসাধারণ কাজ করে।

🔹 Flex Direction

Flexbox-এর মাধ্যমে child component গুলো কীভাবে সাজানো হবে তা নির্ধারণ করে।

container: {
  flexDirection: "row",    // row → horizontally
  // flexDirection: "column", // column → vertically (default)
}
  

🔹 Justify Content (Main Axis Control)

Main axis বরাবর content align করতে ব্যবহৃত হয়।

container: {
  justifyContent: "center",
  // Options: "flex-start", "flex-end", "space-between", "space-around"
}
  

🔹 Align Items (Cross Axis Control)

container: {
  alignItems: "center",
  // Options: "flex-start", "flex-end"
}
  

📌 4. Flexbox Full Example (Boxes Layout)

<View style={styles.container}>
  <View style={styles.box}></View>
  <View style={styles.box}></View>
  <View style={styles.box}></View>
</View>

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 20,
  },
  box: {
    width: 80,
    height: 80,
    backgroundColor: "teal",
  },
});
  

এখানে তিনটি box horizontally side-by-side দেখা যাবে।

📌 5. Flex Property (Flexible Layout)

Flex property parent container-এর available space অনুযায়ী child কে space দেয়।

box1: { flex: 1, backgroundColor: "teal" }
box2: { flex: 2, backgroundColor: "gray" }
  

এখানে box2 হবে box1 এর চেয়ে ২ গুণ বড়।

✅ Conclusion

React Native-এর StyleSheet এবং Flexbox আয়ত্ত করতে পারলে আপনি সহজেই সুন্দর ও responsive mobile UI তৈরি করতে পারবেন। UI Clean এবং Professional রাখতে, Flexbox অত্যন্ত গুরুত্বপূর্ণ একটি বিষয়।

👉 পরবর্তী টপিক: Touchable Components & Buttons