Back to Glossary

React Navigation

التنقل في React Native (React Navigation)

Intermediatemobile1 min read
react-navigationexpo routermobile navigationstack navigatortab navigatordrawer
Official DocsSign in to save & take notes

Definition

The standard navigation library for React Native that handles screen stacks, tabs, drawers, and deep links.

مكتبة التنقل المعيارية لـReact Native التي تتعامل مع مكدسات الشاشة والتبويبات والأدراج والروابط العميقة.

Why It Matters

If 404Fault adds a React Native mobile app (planned in later sprints), React Navigation or Expo Router would handle all navigation — similar to how Next.js handles web routing.

إذا أضافت 404Fault تطبيق React Native للهاتف المحمول (مخطط في سبرينتات لاحقة)، React Navigation أو Expo Router سيتعاملان مع جميع التنقل — مشابه لكيفية تعامل Next.js مع توجيه الويب.

Full Definition

React Navigation is the most popular routing library for React Native apps. It provides: Stack Navigator (push/pop screens), Tab Navigator (bottom/top tabs), Drawer Navigator (hamburger menu), and Modal screens. Expo Router (file-based routing) is the modern alternative that mirrors Next.js App Router conventions. Both use the concept of navigation stacks and screen params for data passing.
React Navigation أشهر مكتبة توجيه لتطبيقات React Native. توفر: Stack Navigator (دفع/سحب الشاشات)، Tab Navigator (تبويبات سفلية/علوية)، Drawer Navigator (قائمة همبرغر). Expo Router (التوجيه القائم على الملفات) هو البديل الحديث الذي يُحاكي اتفاقيات Next.js App Router.

Example Usage

“// Expo Router file-based: // app/(tabs)/glossary.tsx → /glossary tab // app/glossary/[slug].tsx → /glossary/firebase”

“// Expo Router القائم على الملفات: // app/(tabs)/glossary.tsx → تبويب /glossary // app/glossary/[slug].tsx → /glossary/firebase”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using React Navigation:

1

Using web navigation patterns in React Native — back navigation, modals, and links work differently

2

Passing large objects through navigation params — serialize to ID and fetch data in the destination screen

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using React Navigation.

Explain:
1. What is React Navigation and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Using web navigation patterns in React Native — back navigation, modals, and links work differently, Passing large objects through navigation params — serialize to ID and fetch data in the destination screen
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account