StyleSheet — یہ کیا ہے، React Native میں اسٹائل بنانا

StyleSheet کیا ہے؟

StyleSheet — کمپوننٹ اسٹائل کی تعریف کے لیے ایک بلٹ ان React Native API۔ ویب ڈویلپمنٹ میں CSS کے برعکس، RN اسٹائل کی وضاحت کے لیے JavaScript آبجیکٹ استعمال کرتا ہے۔ StyleSheet.create — کلیدی طریقہ — ایک اسٹائل آبجیکٹ قبول کرتا ہے اور عددی شناخت کنندگان کے ساتھ ایک آبجیکٹ لوٹاتا ہے۔

StyleSheet React Native کور کا حصہ ہے اور اضافی پیکجز انسٹال کرنے کی ضرورت نہیں ہے۔ Meta (2026) کے مطابق، 95% React Native پروجیکٹس جامد اسٹائل کے لیے StyleSheet.create استعمال کرتے ہیں۔ متبادل: styled-components، Emotion، NativeWind (RN کے لیے Tailwind) — لیکن بلٹ ان StyleSheet کور کے لیے معیار بنا ہوا ہے۔

تاریخ اور ارتقاء

React Native (2015) کے ابتدائی ورژنز میں، اسٹائل خصوصی طور پر ان لائن آبجیکٹ کے طور پر بیان کیے جاتے تھے۔ StyleSheet.create RN 0.4 میں ایک اصلاح کے طور پر ظاہر ہوا۔ تصور CSS سے لیا گیا ہے: پڑھنے کی اہلیت اور کارکردگی کے لیے اسٹائل کو منطق سے الگ کریں۔ سالوں کے دوران، API میں توسیع ہوئی: absoluteFill، hairlineWidth، flatten شامل کیے گئے۔

StyleSheet.create بمقابلہ ان لائن اسٹائل

StyleSheet.create اور ان لائن اسٹائل کے درمیان فرق کارکردگی کے لیے اہم ہے۔ ان لائن اسٹائل ایک سادہ JavaScript آبجیکٹ ہے جو کمپوننٹ کے ہر رینڈر پر بنایا جاتا ہے۔ StyleSheet.create — ایک آبجیکٹ جو ماڈیول لوڈ ہونے کے دوران ایک بار بنایا جاتا ہے اور عددی ID میں تبدیل ہوتا ہے۔

ان لائن اسٹائل پاس کرتے وقت، React Native ہر بار پورے آبجیکٹ کو JavaScript-Native برج کے ذریعے بھیجتا ہے۔ پیچیدہ اسٹائل والے کمپوننٹ کے لیے، اس کا مطلب ہے ہر رینڈر پر درجنوں خصوصیات کی منتقلی۔ StyleSheet.create صرف ایک عددی شناخت کنندہ پاس کرتا ہے، برج کے بوجھ کو کم کرتا ہے۔

// StyleSheet.create — بہتر طریقہ
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// ان لائن اسٹائل — ہر رینڈر پر نیا آبجیکٹ بناتا ہے
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

ان لائن کب استعمال کریں: حالت پر منحصر متحرک اسٹائل کے لیے (دبایا گیا، منتخب کردہ، فعال)۔ جامد اسٹائل کے لیے، ہمیشہ StyleSheet.create استعمال کریں۔ اصول: جامد → create، متحرک → ان لائن فنکشن۔

StyleSheet کے ساتھ Flexbox لے آؤٹ

Flexbox — React Native میں واحد لے آؤٹ میکانزم (CSS Grid تعاون یافتہ نہیں، float موجود نہیں)۔ StyleSheet.create فلیکس کنٹینرز اور ان کے چائلڈ عناصر کو بیان کرنے کے لیے استعمال ہوتا ہے۔ اہم خصوصیات: flex (بھرنے کا گتانک)، flexDirection (row | column)، justifyContent، alignItems۔

ڈیفالٹ کے طور پر، React Native میں flexDirection column ہے (CSS میں — row)۔ ویب ڈویلپمنٹ سے سوئچ کرتے وقت یہ پہلی چیز ہے جو یاد رکھنی چاہیے۔ تمام View کمپوننٹ ڈیفالٹ طور پر فلیکس کنٹینرز ہیں۔ کسی عنصر کو مرکز میں رکھنے کے لیے، alignItems: 'center' + justifyContent: 'center' استعمال کریں۔

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

اہم: React Native میں، تمام سائز بغیر اکائیوں کے متعین کیے جاتے ہیں (صرف ایک نمبر)۔ فیصد کام کرتے ہیں لیکن صرف والدین کے نسبت چوڑائی اور اونچائی کے لیے۔ margin اور padding نمبر قبول کرتے ہیں۔ ردعمل کے لیے، فیصد کے بجائے flex استعمال کریں — یہ مختلف اسکرینوں پر زیادہ قابل اعتماد ہے۔

StyleSheet API: create، flatten، hairlineWidth، absoluteFill

StyleSheet API میں create کے علاوہ کئی طریقے شامل ہیں۔ StyleSheet.flatten اسٹائل کی ایک صف کو ایک آبجیکٹ میں ضم کرتا ہے — کمپوزیشن اور تیسرے فریق کے کمپوننٹس کو اسٹائل پاس کرنے کے لیے مفید۔ StyleSheet.hairlineWidth ڈیوائس پر کم سے کم نظر آنے والی لائن کی چوڑائی لوٹاتا ہے۔

StyleSheet.absoluteFill — ایک پہلے سے طے شدہ اسٹائل { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }۔ اوورلے پرتوں، موڈل ونڈوز اور پوری اسکرین پر مطلق پوزیشننگ کے لیے استعمال ہوتا ہے۔ StyleSheet.absoluteFillObject — وہی لیکن توسیع کے لیے آبجیکٹ کے طور پر۔

// flatten — اسٹائل ضم کریں
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — کم سے کم لائن
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth جدا کرنے والوں اور بارڈرز کے لیے مفید ہے — یہ اسکرین کثافت سے قطع نظر ہمیشہ 1 فزیکل پکسل کی طرح لگتا ہے۔ Retina ڈسپلے پر یہ 0.5 لاجیکل پوائنٹ ہے، عام ڈسپلے پر — 1 پوائنٹ۔ ان عناصر کے لیے hairlineWidth استعمال نہ کریں جن کا سختی سے مخصوص سائز ہونا چاہیے۔

Dimensions API کے ساتھ ریسپانسیو لے آؤٹ

Dimensions API مختلف اسکرین سائز کے لیے ریسپانسیو لے آؤٹ کے لیے StyleSheet کے ساتھ استعمال ہوتا ہے۔ Dimensions.get('window') ونڈو کی چوڑائی اور اونچائی لوٹاتا ہے۔ اسکرین گھومنے پر ری ایکٹو اپ ڈیٹس کے لیے، React Native سے useWindowDimensions hook استعمال کریں۔

اگرچہ StyleSheet.create CSS کی طرح میڈیا کوریز کو سپورٹ نہیں کرتا، آپ create کے اندر Dimensions کی بنیاد پر اقدار کا حساب لگا سکتے ہیں یا کسی فنکشن کے ذریعے متحرک اسٹائل استعمال کر سکتے ہیں۔ بریک پوائنٹس کے لیے، مختلف چوڑائی کی حدود کے لیے علیحدہ اسٹائل بنائیں۔

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions اسکرین گھومنے اور Split View والے ٹیبلٹس پر ونڈو کے سائز تبدیل ہونے پر خود بخود اپ ڈیٹ ہوتا ہے۔ SSR (React Native Web) کے لیے، یقینی بنائیں کہ سرور اور کلائنٹ کے درمیان تضادات سے بچنے کے لیے کمپوننٹ ماؤنٹ ہونے کے بعد Dimensions.get کو کال کیا گیا ہے۔

پروجیکٹ میں اسٹائل کی تنظیم

StyleSheet تنظیم پروجیکٹ میں برقرار رکھنے کی اہلیت اور کوڈ کے دوبارہ استعمال کو متاثر کرتی ہے۔ تین طریقے: کمپوننٹ کے اندر مقامی اسٹائل (کمپوننٹ کے ساتھ styles.js)، عالمی اسٹائل (رنگ، فاصلہ، نوع نگاری کے مستقلات کے ساتھ theme.js)، اور کمپوزیشن کے ذریعے ماڈیولر اسٹائل۔

تجویز کردہ ڈھانچہ: رنگ، سائز اور نوع نگاری کے مستقلات کے ساتھ theme.js؛ ہر کمپوننٹ کے ساتھ اس کے مخصوص اسٹائل کے لیے Component.styles.js؛ بنیادی اور مخصوص اسٹائل کے امتزاج کے لیے StyleSheet.flatten۔ بڑے پروجیکٹس کے لیے، تھیم جنریشن کے ساتھ ڈیزائن سسٹم استعمال کریں۔

// theme.js — عالمی مستقلات
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

ماڈیولر تنظیم کے فوائد: رنگوں اور فاصلوں کے لیے سچائی کا واحد ذریعہ، آسان ری فیکٹرنگ (primary تبدیل کریں — تمام بٹن اپ ڈیٹ ہو جاتے ہیں)، flatten کے ذریعے اسٹائل کا دوبارہ استعمال، کوڈ کی پڑھنے کی اہلیت اور پیش گوئی۔ TypeScript پروجیکٹس کے لیے، declare module کے ذریعے تھیم کے لیے اقسام شامل کریں۔