ExpoBeginner

StyleSheet ও Flexbox — layout গোছানো

RN-এ styling-এর ধরন ও flexbox-এর মূল নিয়ম — বাংলায়।

6টি অংশবাংলা ভাষায়

RN-এ style দেওয়া হয় object দিয়ে, সাধারণত StyleSheet.create-এ। web-এর মতো className নেই।

components/TaskRow.tsxtsx

tsx

import { View, Text, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  row: { flexDirection: "row", alignItems: "center", gap: 12 },
  card: { padding: 16, borderRadius: 12, backgroundColor: "#f8fafc" },
});

export default function TaskRow() {
  return (
    <View style={[styles.card, styles.row]}>
      <Text style={{ flex: 1 }}>দুধ কিনতে হবে</Text>
      <Text>✔️</Text>
    </View>
  );
}

flexDirection — row / column (default column)
justifyContent / alignItems — axis alignment
flex: 1 — child বসন্ত available space নেয়
gap — items-এর মাঝের ব্যবধান
borderRadius, padding, margin — সচরাচর সব আছে

Array style — [a, b] — একাধিক style apply হয়, শেষেরটা priority:

<View style={[styles.card, isDone && styles.done]} />

flex: 1

flex: 1 মানে child উপলব্ধ space-এর সমপরিমাণ নিতে — screen height শেষ না হওয়া পর্যন্ত দখল করে। না বুঝে layout বিজোড় লাগার অন্যতম কারণ।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।