Stack Navigator: یہ کیا ہے، React Native میں اسٹیک نیویگیشن

Stack Navigator کیا ہے؟

Stack Navigator — React Navigation لائبریری کے بنیادی نیویگیٹرز میں سے ایک ہے جو اسکرینوں کا اسٹیک ماڈل نافذ کرتا ہے۔ یہ موبائل صارفین سے واقف نیویگیشن فراہم کرتا ہے: نئی اسکرین کھلنے کے ساتھ دائیں جانب سلائیڈ اینیمیشن ہوتی ہے، اور «واپس» بٹن یا سوائپ جسچر صارف کو پچھلی اسکرین پر واپس لاتا ہے۔ Stack Navigator iOS اور Android کو سپورٹ کرتا ہے، زیادہ سے زیادہ کارکردگی کے لیے پلیٹ فارم کے مقامی اجزاء استعمال کرتا ہے۔

React Navigation React Native کے لیے سب سے مقبول نیویگیشن لائبریری ہے، جو 85% پروجیکٹس میں انسٹال ہے (npm ڈیٹا، 2026 کے مطابق)۔ Stack Navigator اس کے بنیادی حصے کا حصہ ہے اور دو نفاذوں میں دستیاب ہے: createNativeStackNavigator (مقامی، تجویز کردہ) اور createStackNavigator (JavaScript، پیچیدہ کسٹم اینیمیشن کے لیے)۔ مقامی ورژن React Navigation v5 میں ظاہر ہوا اور v6+ میں معیار بن گیا۔

Stack Navigator کا بنیادی فائدہ — iOS اور Android صارفین سے واقف قدرتی رویہ ہے۔ iOS پر، اسٹیک بصری طور پر UINavigationController کے ذریعے پیش کیا جاتا ہے، Android پر — سلائیڈ اینیمیشن کے ساتھ FragmentManager کے ذریعے۔ ڈویلپر کو دستی طور پر اسٹیک منطق لاگو کرنے کی ضرورت نہیں ہے — نیویگیٹر خود بخود اسکرین کی حالتوں، بیک اسٹیک اور اینیمیشن کا انتظام کرتا ہے۔

اسٹیک نیویگیشن کیسے کام کرتی ہے

اسٹیک نیویگیشن LIFO (Last In, First Out) اصول پر مبنی ہے۔ جب صارف نئی اسکرین کھولتا ہے، نیویگیٹر اسے اسٹیک کے اوپر رکھتا ہے۔ «واپس» دبانے پر، اوپری اسکرین ہٹا دی جاتی ہے اور صارف پچھلی اسکرین دیکھتا ہے۔ اسٹیک میں کسی بھی تعداد میں اسکرین ہو سکتی ہیں — واحد حد ڈیوائس میموری ہے۔

اسٹیک میں ہر اسکرین اپنی حالت برقرار رکھتی ہے۔ پچھلی اسکرین پر واپس آنے پر، اس کی حالت خود بخود بحال ہو جاتی ہے۔ یہ اسٹیک کو نیویگیشن کی دوسری قسموں (Tab, Drawer) سے ممتاز کرتا ہے، جہاں اسکرینیں دوبارہ بنائی جا سکتی ہیں۔ React Navigation اپنے نیویگیشن سیاق و سباق کے طریقہ کار کے ذریعے حالت کا انتظام کرتا ہے۔

واپس جانے کے لیے سوائپ جسچر

iOS پر، Stack Navigator واپس جانے کے لیے بائیں کنارے سے سوائپ جسچر کو سپورٹ کرتا ہے — یہ معیاری iOS رویہ ہے جس کی صارفین توقع کرتے ہیں۔ Android پر، جسچر ڈیفالٹ طور پر غیر فعال ہے، لیکن gestureEnabled آپشن کے ذریعے فعال کیا جا سکتا ہے۔ Native Stack میں، جسچر JavaScript تھریڈ میں تاخیر کے بغیر مقامی طور پر کام کرتا ہے۔

Native Stack بمقابلہ JS Stack

React Navigation دو قسم کے Stack Navigator پیش کرتا ہے: Native Stack (createNativeStackNavigator) اور JS Stack (createStackNavigator)۔ بنیادی فرق — اینیمیشن کہاں عمل میں آتی ہے۔ Native Stack iOS اور Android کے مقامی اینیمیشن ڈرائیورز استعمال کرتا ہے، جبکہ JS Stack React Native کے JavaScript تھریڈ کے ذریعے کام کرتا ہے۔ ان کے درمیان انتخاب کارکردگی اور حسب ضرورت کی ضروریات پر منحصر ہے۔

Native Stack زیادہ تر پروجیکٹس کے لیے تجویز کردہ ہے۔ یہ JS تھریڈ کو روکے بغیر ہموار 60 FPS اینیمیشن فراہم کرتا ہے، iOS پر سسٹم سوائپ بیک جسچر کو سپورٹ کرتا ہے اور مقامی ٹرانزیشن استعمال کرتا ہے — iOS پر slide، Android پر fade۔ تاہم، Native Stack اینیمیشن حسب ضرورت میں محدود ہے: صرف پہلے سے طے شدہ ٹرانزیشن کا سیٹ دستیاب ہے۔

JS Stack cardStyleInterpolator کے ذریعے اینیمیشن پر مکمل کنٹرول دیتا ہے۔ ڈویلپر کوئی بھی اینیمیشن بنا سکتا ہے: اسکیلنگ، گردش، پیرالیکس، کسٹم کروز۔ نقصان — اینیمیشن JS تھریڈ میں چلتی ہیں، جو پیچیدہ ٹرانزیشن کے ساتھ کمزور آلات پر فریم ڈراپ کا سبب بن سکتی ہیں۔ 70% پروجیکٹس کے لیے، Native Stack کافی سے زیادہ ہے۔

// Native Stack — تجویز کردہ نفاذ
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

Stack Navigator کی تنصیب اور ترتیب

Stack Navigator کے ساتھ شروع کرنے کے لیے، React Navigation اور اس کے انحصار کو انسٹال کرنا ضروری ہے۔ کم از کم سیٹ میں @react-navigation/native، @react-navigation/native-stack اور react-native-screens شامل ہیں۔ تنصیب کے بعد، ایپلیکیشن کو NavigationContainer میں لپیٹا جاتا ہے — ایک سیاق و سباق جو تمام چائلڈ اجزاء کو نیویگیشن کی حالت فراہم کرتا ہے۔

# React Navigation انحصار کی تنصیب
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# iOS کے لیے — pod کی تنصیب
cd ios && pod install && cd ..

تنصیب کے بعد، Stack.Navigator RootStackParamList میں بیان کردہ مخصوص اسکرینوں کے ساتھ بنایا جاتا ہے۔ ہر اسکرین component prop کے ذریعے React جزو سے منسلک ہوتی ہے۔ نیویگیٹر جڑ یا کسی دوسرے نیویگیٹر (Tab, Drawer) میں نیسٹڈ ہو سکتا ہے۔ ترتیب کے لیے، screenOptions استعمال ہوتی ہیں — تمام اسکرینوں کے لیے مشترکہ یا ہر ایک کے لیے انفرادی۔

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'ہوم' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Stack Navigator کے پیرامیٹرز اور حسب ضرورت

Stack Navigator ظاہری شکل اور رویے کو حسب ضرورت بنانے کے لیے بہت سے اختیارات فراہم کرتا ہے۔ اہم پیرامیٹرز Navigator سطح پر screenOptions یا Screen سطح پر options کے ذریعے متعین کیے جاتے ہیں۔ ڈویلپر ہیڈر، ٹرانزیشن اینیمیشن، سوائپ جسچر، کارڈ اسٹائل اور پس منظر کو مدھم کرنے کو ترتیب دے سکتا ہے۔ ترتیبات کی لچک نیویگیشن کو ایپلیکیشن کے ڈیزائن سسٹم کے مطابق ڈھالنے کی اجازت دیتی ہے۔

CardStyleInterpolator کے ذریعے کسٹم اینیمیشن

JS Stack کے لیے، cardStyleInterpolator اسکرینوں کے درمیان صوابدیدی ٹرانزیشن اینیمیشن بنانے کی اجازت دیتا ہے۔ یہ منفرد بصری اثرات کو لاگو کرنے کے لیے ایک طاقتور ٹول ہے: اسکیلنگ، گردش، پیرالیکس، افقی پلٹائی۔ فنکشن موجودہ اینیمیشن پیش رفت کی قدریں (current, next) وصول کرتا ہے اور اینیمیٹڈ عناصر کے لیے اسٹائل لوٹاتا ہے۔

TypeScript کے ساتھ نیویگیشن ٹائپنگ

Stack Navigator TypeScript کے ذریعے مکمل ٹائپنگ کو سپورٹ کرتا ہے۔ اس کے لیے، RootStackParamList بیان کیا جاتا ہے — ایک آبجیکٹ قسم جہاں کنجیاں اسکرین کے نام اور قدریں پیرامیٹر کی اقسام ہیں۔ ٹائپنگ کے بعد، navigation.navigate اور route.params خودکار تکمیل اور قسم کی جانچ حاصل کرتے ہیں۔ یہ مرتب وقت پر پیرامیٹر منتقلی کی غلطیوں کو ختم کرتا ہے۔

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// ٹائپ شدہ اسکرین
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>پروڈکٹ {id} — {category}</Text>
      <Button title="کارٹ میں شامل کریں"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

جدید منظرنامے: موڈل ونڈوز اور گروپ

Stack Navigator اسکرین گروپنگ اور موڈل ونڈوز کو سپورٹ کرتا ہے۔ گروپ (Screen Group) تکرار کے بغیر متعدد اسکرینوں پر مشترکہ ترتیبات لاگو کرنے کی اجازت دیتے ہیں۔ موڈل ونڈوز stack presentation: 'modal' کے ذریعے لاگو ہوتی ہیں — اسکرین پس منظر مدھم ہونے کے ساتھ نیچے سے کھلتی ہے، جیسے iOS پر سسٹم موڈل۔ یہ آپشن صرف Native Stack میں دستیاب ہے۔

پیچیدہ نیویگیشن کے لیے، Stack Navigator کو Tab Navigator یا Drawer Navigator کے اندر نیسٹڈ کیا جا سکتا ہے۔ مثال کے طور پر، «ہوم» ٹیب میں اسکرینوں کا اپنا اسٹیک ہے اور «پروفائل» ٹیب میں اپنا ہے۔ نیویگیٹرز کی یہ تشکیل پروڈکشن ایپلیکیشنز کے لیے معیاری طریقہ ہے۔ ہر اسٹیک الگ تھلگ ہے: ایک ٹیب کے اندر بیک اسٹیک دوسرے ٹیبز کو متاثر نہیں کرتا۔

// Tab Navigator میں نیسٹڈ اسٹیک
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// مشترکہ اختیارات والے اسکرین گروپ
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>