🎨 React Native Styling – StyleSheet (TypeScript সহ)

React Native এ UI ডিজাইন করার জন্য সবচেয়ে বেসিক এবং অফিসিয়াল পদ্ধতি হলো StyleSheet। এই অধ্যায়ে আমরা শিখবো কীভাবে file-based StyleSheet ব্যবহার করে clean, reusable এবং performant UI তৈরি করা যায় — TypeScript সহ।

📌 StyleSheet কী?

StyleSheet হলো React Native এর একটি built-in API, যেটা ব্যবহার করে আমরা JavaScript / TypeScript ফাইলের মধ্যে CSS-এর মতো style লিখতে পারি।

• CSS এর মতো syntax
• Inline style এর চেয়ে বেশি performant
• Code reusable ও maintainable হয়

📌 File Based Styling কেন ব্যবহার করবো?

বড় প্রজেক্টে সব style এক ফাইলে রাখলে কোড জটিল হয়ে যায়। তাই আমরা আলাদা styles.ts ফাইল তৈরি করি।

📁 src
 ┣ 📁 screens
 ┃ ┣ 📄 HomeScreen.tsx
 ┃ ┗ 📄 styles.ts
    

📌 StyleSheet Syntax (TypeScript)

import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e0f2f1',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    color: '#0f766e',
    fontWeight: 'bold',
  },
  button: {
    marginTop: 20,
    backgroundColor: '#14b8a6',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 16,
  },
});

📌 Style ব্যবহার করা (HomeScreen.tsx)

import React from 'react';
import { View, Text, Pressable } from 'react-native';
import { styles } from './styles';

const HomeScreen: React.FC = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        Welcome to React Native
      </Text>

      <Pressable style={styles.button}>
        <Text style={styles.buttonText}>
          Get Started
        </Text>
      </Pressable>
    </View>
  );
};

export default HomeScreen;

📌 Output কেমন দেখাবে?

👉 উপরের UI টি একটি center aligned screen, যেখানে একটি title এবং একটি teal বাটন আছে।

📌 StyleSheet এর গুরুত্বপূর্ণ Properties

📌 Inline Style vs StyleSheet

✅ সংক্ষেপে যা শিখলেন

• StyleSheet কী এবং কেন দরকার
• File-based styling structure
• TypeScript সহ StyleSheet ব্যবহার
• Real UI output কেমন হয়