{"id":32000,"date":"2026-11-05T21:46:59","date_gmt":"2026-11-05T21:46:59","guid":{"rendered":"https:\/\/umang.pk\/2026\/11\/05\/%d8%b1%db%8c-%d8%a7%db%8c%da%a9%d9%b9-%d9%85%d9%82%d8%a7%d9%85%db%8c-%d8%a7%db%8c%d9%be%d9%84%db%8c-%da%a9%db%8c%d8%b4%d9%86-%d9%85%db%8c%da%ba-shadcn-ui-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85\/"},"modified":"2026-11-05T21:47:00","modified_gmt":"2026-11-05T21:47:00","slug":"%d8%b1%db%8c-%d8%a7%db%8c%da%a9%d9%b9-%d9%85%d9%82%d8%a7%d9%85%db%8c-%d8%a7%db%8c%d9%be%d9%84%db%8c-%da%a9%db%8c%d8%b4%d9%86-%d9%85%db%8c%da%ba-shadcn-ui-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85","status":"publish","type":"post","link":"https:\/\/umang.pk\/en_us\/2026\/11\/05\/%d8%b1%db%8c-%d8%a7%db%8c%da%a9%d9%b9-%d9%85%d9%82%d8%a7%d9%85%db%8c-%d8%a7%db%8c%d9%be%d9%84%db%8c-%da%a9%db%8c%d8%b4%d9%86-%d9%85%db%8c%da%ba-shadcn-ui-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85\/","title":{"rendered":"\u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0645\u0642\u0627\u0645\u06cc \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u0645\u06cc\u06ba shadcn\/ui \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0633\u06d2 \u06a9\u0631\u06cc\u06ba\u06d4 [Full Handbook]"},"content":{"rendered":"\n<div id=\"\">\n<p>\u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u06a9\u0686\u06be React Native \u0627\u06cc\u067e\u0633 \u0628\u0646\u0627\u0626\u06cc \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0622\u067e \u06a9\u06d2 \u0644\u06cc\u06d2 \u0648\u0627\u0642\u0641 \u06c1\u0648\u06ba \u06af\u06d2\u06d4 \u062a\u0645 \u06c1\u0648 <code>colors.ts<\/code> \u0641\u0627\u0626\u0644\u06cc\u06ba \u0627\u0648\u0631 \u0633\u0627\u062f\u06c1 <code>Button<\/code> \u0639\u0646\u0635\u0631 \u067e\u06c1\u0644\u06d2 \u062a\u0648 \u0633\u0628 \u06a9\u0686\u06be \u0679\u06be\u06cc\u06a9 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 \u067e\u06be\u0631 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0645\u06cc\u06ba \u0686\u0646\u062f \u0628\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644\u06cc \u0622\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0686\u06be\u0648\u0679\u06d2 \u0631\u0646\u06af \u06a9\u06d2 \u0688\u06be\u06cc\u0631 \u0628\u0691\u06be\u0646\u06d2 \u0644\u06af\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u0627 \u0628\u0679\u0646 \u06c1\u0631 \u0628\u0627\u0631 \u062c\u0628 \u06a9\u0648\u0626\u06cc \u062a\u06be\u0648\u0691\u0627 \u0645\u062e\u062a\u0644\u0641 \u0627\u0646\u062f\u0627\u0632 \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0631\u06d2 \u06af\u0627 \u062a\u0648 \u0627\u06cc\u06a9 \u0645\u062e\u062a\u0644\u0641 \u0633\u06c1\u0627\u0631\u0627 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06d2 \u06af\u0627\u06d4<\/p>\n<p>\u0633\u06cc\u0679 \u0627\u067e \u067e\u06c1\u0644\u06d2 \u06a9\u0627\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u06a9\u0686\u06be \u0688\u06cc\u0632\u0627\u0626\u0646 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u06d2 \u0628\u0639\u062f\u060c \u06cc\u06c1\u0627\u06ba \u062a\u06a9 \u06a9\u06c1 \u0686\u06be\u0648\u0679\u06d2 \u0627\u067e \u0688\u06cc\u0679\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u067e\u0648\u0631\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0645\u062a\u0639\u062f\u062f \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u0646\u0627 \u06c1\u0648 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06cc\u06a9 \u0639\u0627\u0645 \u0631\u0646\u06af \u06a9\u06cc \u0641\u0627\u0626\u0644 \u0627\u06cc\u06a9 \u0644\u0645\u062d\u06d2 \u0645\u06cc\u06ba \u06a9\u06cc\u0633\u06cc \u062f\u06a9\u06be\u062a\u06cc \u06c1\u06d2:<\/p>\n<pre><code class=\"language-tsx\">export const colors = {\n  primary: '#6e4836',\n  primaryPressed: '#5a3a2b',\n  textPrimary: '#261d16',\n  textSecondary: '#72665e',\n  \/\/ and forty more\n};\n<\/code><\/pre>\n<p>\u0627\u0648\u0631 \u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u0639\u0627\u0645 \u06c1\u06d2\u06d4 <code>Button<\/code> \u06cc\u06c1 \u06a9\u0686\u06be \u062f\u0648\u0628\u0627\u0631\u06c1 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u06a9\u06cc\u0633\u0627 \u0644\u06af\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-tsx\"><button variant=\"primary\" size=\"md\" fullwidth=\"\" loading=\"{busy}\" containerstyle=\"{styles.checkoutButton}\" labelstyle=\"{styles.checkoutLabel}\"\/>\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0627\u06cc\u06a9 \u0622\u0633\u0627\u0646 \u0645\u062b\u0627\u0644 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0622\u067e \u06a9\u0648 \u062e\u06cc\u0627\u0644 \u0622\u062a\u0627 \u06c1\u06d2\u06d4 \u0631\u0646\u06af\u06cc\u0646 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0691\u06be\u062a\u06cc \u0631\u06c1\u062a\u06cc \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0628\u0679\u0646 \u06c1\u0631 \u0646\u0626\u06cc \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0632\u06cc\u062f \u067e\u0631\u067e\u0633 \u062c\u0645\u0639 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06c1\u0631 \u062a\u0628\u062f\u06cc\u0644\u06cc \u0645\u0639\u0642\u0648\u0644 \u0645\u0639\u0644\u0648\u0645 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0644\u06cc\u06a9\u0646 \u067e\u0631\u06cc\u0634\u0627\u0646 \u06a9\u0646 \u062d\u0635\u06c1 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0622\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u06d2 \u0641\u06cc\u0635\u0644\u06d2 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a\u060c \u0622\u067e \u06a9\u0648 \u0645\u062a\u0639\u062f\u062f \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u06cc\u06c1 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u06d2 \u06a9\u06c1 \u06a9\u0686\u06be \u0628\u06be\u06cc \u063a\u06cc\u0631 \u0645\u062a\u0648\u0642\u0639 \u0637\u0648\u0631 \u067e\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u0633\u0626\u0644\u06c1 \u06a9\u0627 \u0627\u06cc\u06a9 \u062d\u0635\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u062a\u0646\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0627\u06ba \u062a\u0642\u0633\u06cc\u0645 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0627\u0646 \u06a9\u0627 \u06a9\u0648\u0688 \u06c1\u06d2 <code>node_modules<\/code>\u0644\u06c1\u0630\u0627 \u0622\u067e \u0627\u0633\u06d2 \u067e\u0631\u0648\u067e\u0633 \u0627\u0648\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0633\u0627\u0645\u0646\u06d2 \u0622\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0622\u067e \u06a9\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0639\u06cc\u0646 \u0645\u0637\u0627\u0628\u0642 \u06a9\u06cc\u0633 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u062f\u0648\u0633\u0631\u0627 \u0633\u06c1\u0627\u0631\u0627 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u06cc\u0627 \u0627\u0633\u06d2 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u06cc\u0688 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0627\u06cc\u0633\u0627 \u06a9\u0631\u062a\u06d2 \u0631\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u062c\u0632 \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0646\u0627 \u0627\u0635\u0644 \u0645\u0633\u0626\u0644\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0634\u06a9\u0644 \u06c1\u0648 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u062c\u0633\u06d2 \u0622\u067e \u062d\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631 \u0631\u06c1\u06d2 \u062a\u06be\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u0627\u0646 \u0648\u062c\u0648\u06c1\u0627\u062a \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06c1\u06d2 \u062c\u0648 \u0645\u062c\u06be\u06d2 shadcn\/ui \u06a9\u0627 \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631 \u067e\u0633\u0646\u062f \u06c1\u06d2\u06d4 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u067e\u06cc\u06a9\u06cc\u062c\u0632 \u06a9\u0648 \u0627\u0646\u0633\u0679\u0627\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0646 \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u067e\u0646 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0645\u0627\u0646\u062a\u0627 \u06c1\u06d2\u06d4 CLI \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0633\u0648\u0631\u0633 \u06a9\u0648\u0688 \u06a9\u0648 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0622\u067e \u0636\u0631\u0648\u0631\u062a \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u06a9\u0631 \u0633\u06a9\u06cc\u06ba\u06d4 React Native \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u0633\u06cc \u062e\u06cc\u0627\u0644 \u067e\u0631 \u0627\u06cc\u06a9 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u062c\u0633\u06d2 React Native Reusables \u06a9\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0633\u06d2 \u0639\u0645\u0644\u06cc \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06c1\u0645 React Native Reusables\u060c Expo\u060c \u0627\u0648\u0631 Uniwind \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4 <strong>\u06a9\u0627\u0641\u06cc \u0634\u0627\u067e \u067e\u0631 \u067e\u06a9 \u0627\u067e \u0622\u0631\u0688\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0631\u0679 \u0627\u0648\u0631 \u0627\u062f\u0627\u0626\u06cc\u06af\u06cc \u06a9\u06cc \u0633\u06a9\u0631\u06cc\u0646<\/strong>. \u0627\u0633 \u0645\u06cc\u06ba \u0645\u0642\u062f\u0627\u0631 \u06a9\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0622\u0631\u0688\u0631 \u06a9\u0627 \u0627\u0646\u062f\u0631\u0627\u062c\u060c \u067e\u06a9 \u0627\u067e \u0679\u0627\u0626\u0645 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646\u060c \u0627\u06cc\u06a9 \u0646\u0627\u0645 \u06a9\u0627 \u0641\u06cc\u0644\u0688\u060c \u0627\u06cc\u06a9 &quot;\u0622\u067e \u06a9\u0627 \u06a9\u067e&#8221; \u0679\u0648\u06af\u0644\u060c \u0628\u0644\u0646\u06af \u06a9\u0627 \u062e\u0644\u0627\u0635\u06c1\u060c \u0646\u06cc\u0686\u06d2 \u0627\u062f\u0627\u0626\u06cc\u06af\u06cc \u06a9\u0627 \u0628\u0627\u0631\u060c \u0627\u0648\u0631 \u0622\u0631\u0688\u0631 \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0627 \u0688\u0627\u0626\u06cc\u0644\u0627\u06af \u0634\u0627\u0645\u0644 \u06c1\u06d2\u06d4 \u0622\u067e \u06cc\u06c1 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 shadcn \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u06a9\u0648 \u0628\u06be\u06cc \u0628\u0631\u0627\u0624\u0632 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0645\u062c\u0645\u0648\u0639\u06cc \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0645\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u062d\u0635\u06d2 \u06a9\u06cc\u0633\u06d2 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06c1\u0645 \u06a9\u0686\u06be \u0627\u06cc\u0633\u06cc \u0686\u06cc\u0632\u0648\u06ba \u06a9\u06cc \u0628\u06be\u06cc \u0646\u0634\u0627\u0646\u062f\u06c1\u06cc \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u062c\u0648 \u0627\u0646 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u06cc\u0627\u062f \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u0648\u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u0628\u0634\u0645\u0648\u0644:<\/p>\n<ul>\n<li>shadcn\/ui \u0627\u0648\u0631 \u0627\u0633 \u06a9\u0627 CLI \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u067e \u062c\u0632\u0648 \u06a9\u0648\u0688 \u06a9\u06d2 \u0645\u0627\u0644\u06a9 \u06a9\u06cc\u0648\u06ba \u06c1\u06cc\u06ba\u06d4<\/li>\n<li>\u0688\u06cc\u0632\u0627\u0626\u0646 \u0679\u0648\u06a9\u0646 (\u0646\u0627\u0645 \u06a9\u06d2 \u0631\u0646\u06af) \u0631\u0646\u06af\u0648\u06ba \u06a9\u06cc \u062c\u06af\u06c1 \u06a9\u06cc\u0633\u06d2 \u0644\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>colors.ts<\/code> \u0641\u0627\u0626\u0644<\/li>\n<li>React Native \u0645\u06cc\u06ba \u0627\u062c\u0632\u0627\u0621 \u062c\u06cc\u0633\u06d2 \u06a9\u0627\u0631\u0688\u060c \u0633\u0644\u06cc\u06a9\u0679\u060c \u0633\u0648\u0626\u0686\u060c \u0627\u0644\u0631\u0679 \u0688\u0627\u0626\u06cc\u0644\u0627\u06af \u0648\u063a\u06cc\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1<\/li>\n<li>\u0645\u0648\u0628\u0627\u0626\u0644 \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642\u06c1 \u0645\u0633\u0627\u0626\u0644 \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0633\u06cc\u0641 \u0627\u06cc\u0631\u06cc\u0627\u060c \u06a9\u06cc \u0628\u0648\u0631\u0688\u060c \u0679\u06cc\u0628 \u0679\u0627\u0631\u06af\u0679 \u0648\u063a\u06cc\u0631\u06c1 \u0633\u06d2 \u06a9\u06cc\u0633\u06d2 \u0646\u0645\u0679\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/li>\n<li>\u0644\u0627\u0626\u0679 \u0627\u0648\u0631 \u0688\u0627\u0631\u06a9 \u0645\u0648\u0688 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u06a9\u06cc\u0633\u06d2 \u0633\u0648\u0626\u0686 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u067e\u0648\u0631\u06cc \u062a\u06be\u06cc\u0645 \u06a9\u0648 \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u06a9\u06cc\u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/li>\n<\/ul>\n<h2 id=\"heading-table-of-contents\">\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n<h2 id=\"heading-prerequisites\">\u0634\u0631\u0637\u06cc\u06ba<\/h2>\n<p>\u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u067e \u06a9\u0648 \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u06af\u06cc:<\/p>\n<ul>\n<li><strong>Node.js 20 \u06cc\u0627 \u0627\u0633 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1\u06d4<\/strong> \u0622\u067e pnpm\u060c npm\u060c Yarn\u060c \u06cc\u0627 Bun \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u06a9\u0645\u0627\u0646\u0688\u0632 pnpm \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u0644\u06c1\u0630\u0627 \u0627\u06af\u0631 \u0622\u067e \u06a9\u0686\u06be \u0627\u0648\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0633\u0627\u0628\u0642\u06c1 \u200b\u200b\u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/li>\n<li><strong>React \u0627\u0648\u0631 TypeScript \u06a9\u0627 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0639\u0644\u0645<\/strong>\u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06c1\u06a9\u0633: <code>useState<\/code>.<\/li>\n<li><strong>React Native \u06a9\u0627 \u06a9\u0686\u06be \u0639\u0644\u0645<\/strong>\u0627\u0633 \u0637\u0631\u062d <code>View<\/code>, <code>Text<\/code>\u0627\u0648\u0631 <code>ScrollView<\/code>. \u0622\u067e \u06a9\u0648 Tailwind \u06a9\u0648 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0645\u062f\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/li>\n<li><strong>\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc:<\/strong> \u0627\u06af\u0631 \u0622\u067e \u0627\u067e\u0646\u06cc \u0627\u06cc\u067e \u06a9\u0648 \u0633\u0645\u06cc\u0644\u06cc\u0679\u0631 \u0645\u06cc\u06ba \u0686\u0644\u0627\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0627\u06cc\u06a9\u0633 \u06a9\u0648\u0688 \u06cc\u0627 \u0627\u06cc\u0646\u0688\u0631\u0627\u0626\u06cc\u0688 \u0627\u0633\u0679\u0648\u0688\u06cc\u0648\u06d4 \u0633\u0628 \u06a9\u0686\u06be \u0627\u06cc\u06a9 \u0648\u06cc\u0628 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0646\u06cc\u0679\u06cc\u0648 \u0648\u06cc\u0628 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0628\u06be\u06cc \u0686\u0644\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0633 \u0637\u0631\u062d \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u06a9\u06d2 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u0679\u0633 \u0644\u06cc\u06d2 \u06af\u0626\u06d2 \u062a\u06be\u06d2\u06d4<\/li>\n<\/ul>\n<p>\u0622\u067e \u06a9\u0648 \u06a9\u0633\u06cc \u0627\u06a9\u0627\u0624\u0646\u0679 \u06cc\u0627 API \u06a9\u0644\u06cc\u062f \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0622\u067e \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0648\u0626\u06cc \u0642\u06cc\u0645\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u067e \u0628\u0646\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0622\u0626\u06cc\u06d2 \u0627\u0633 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06d2 \u0679\u0648\u0644\u0632 \u067e\u0631 \u0627\u06cc\u06a9 \u0646\u0638\u0631 \u0688\u0627\u0644\u06cc\u06ba\u06d4 \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u0627 \u0627\u06cc\u06a9 \u0645\u062e\u0635\u0648\u0635 \u06a9\u0627\u0645 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u06cc\u06c1 \u062c\u0627\u0646\u0646\u06d2 \u0633\u06d2 \u0633\u06cc\u0679 \u0627\u067e \u06a9\u0648 \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<p><strong>shadcn\/ui<\/strong> \u0648\u06cc\u0628 \u06a9\u06d2 \u0644\u06cc\u06d2 UI \u0627\u062c\u0632\u0627\u0621 \u06a9\u0627 \u0645\u062c\u0645\u0648\u0639\u06c1\u06d4 \u0627\u06cc\u06a9 \u067e\u06cc\u06a9\u06cc\u062c \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0646\u0633\u0679\u0627\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0627\u06cc\u06a9 \u06a9\u0645\u0627\u0646\u0688 \u0644\u0627\u0626\u0646 \u0679\u0648\u0644 (CLI) \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u06c1\u0631 \u062c\u0632\u0648 \u06a9\u06d2 \u0633\u0648\u0631\u0633 \u06a9\u0648\u0688 \u06a9\u0648 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u067e\u06be\u0631 \u0622\u067e \u06a9\u0648\u0688 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><strong>\u0645\u0642\u0627\u0645\u06cc \u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u067e\u0631 \u0631\u062f\u0639\u0645\u0644 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u06cc\u06c1 shadcn\/ui \u06a9\u0627 \u0631\u062f \u0639\u0645\u0644 \u06a9\u0627 \u0645\u0642\u0627\u0645\u06cc \u0648\u0631\u0698\u0646 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0628\u0679\u0646\u060c \u06a9\u0627\u0631\u0688\u060c \u0633\u0644\u06cc\u06a9\u0679\u060c \u0627\u0648\u0631 \u0688\u0627\u0626\u06cc\u0644\u0627\u06af \u062c\u06cc\u0633\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0648 React Native \u06a9\u06d2 \u0644\u06cc\u06d2 \u0644\u06a9\u06be\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u0627\u0648\u0631 Tailwind \u0637\u0631\u0632 \u06a9\u06d2 \u06a9\u0644\u0627\u0633 \u0646\u0627\u0645\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0648\u06c1\u06cc CLI \u0622\u0626\u06cc\u0688\u06cc\u0627\u0632 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u06cc\u0633\u06d2 shadcn\/ui\u06d4<\/p>\n<p><strong>\u0622\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632<\/strong> \u06cc\u06c1 Radix UI \u06a9\u0627 \u0627\u06cc\u06a9 React Native \u067e\u0648\u0631\u0679 \u06c1\u06d2\u060c \u0627\u06cc\u06a9 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u062c\u0633\u06d2 shadcn\/ui \u0648\u06cc\u0628 \u067e\u0631 \u0622\u067e\u0631\u06cc\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 &quot;\u0628\u0646\u06cc\u0627\u062f\u06cc&#8221; \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u0627 \u062c\u0632\u0648 \u06c1\u06d2 \u062c\u0648 \u0633\u0644\u0648\u06a9 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u062a\u0627 \u06c1\u06d2 \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u06a9\u0627 \u06a9\u0648\u0626\u06cc \u0627\u0646\u062f\u0627\u0632 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 <code>select<\/code> \u0622\u062f\u0645 \u062c\u0627\u0646\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u06a9\u06cc\u0633\u06d2 \u06a9\u06be\u0644\u062a\u0627 \u0627\u0648\u0631 \u0628\u0646\u062f \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0631\u06cc\u0688\u0631 \u06a9\u0648 \u0627\u0633 \u06a9\u0627 \u0627\u0639\u0644\u0627\u0646 \u06a9\u06cc\u0633\u06d2 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u06a9\u0627 \u06a9\u0648\u0626\u06cc \u0631\u0646\u06af \u06cc\u0627 \u0633\u0631\u062d\u062f \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 React Native Reusables \u0627\u0648\u067e\u0631 \u06a9\u06cc \u0634\u06a9\u0644\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p><strong>\u06cc\u0648\u0646\u06cc \u0648\u0646\u0688<\/strong> \u0627\u06cc\u06a9 \u0679\u0648\u0644 \u062c\u0648 \u0622\u067e \u06a9\u0648 Tailwind CSS \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 React Native \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2: <code>className=\"bg-primary p-4\"<\/code>. \u062c\u0628 \u06a9\u06c1 \u0627\u06cc\u067e \u0628\u0646\u0688\u0644 \u06c1\u06d2\u060c \u06c1\u0645 \u0627\u0633 \u06a9\u06cc \u06a9\u0644\u0627\u0633\u0648\u06ba \u06a9\u0648 \u0633\u0627\u062f\u06c1 React Native \u0627\u0646\u062f\u0627\u0632 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0631\u0646 \u0679\u0627\u0626\u0645 \u067e\u0631 \u06a9\u0648\u0626\u06cc \u0627\u0636\u0627\u0641\u06cc \u06a9\u0627\u0645 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 Nativewind \u06a9\u0686\u06be \u0627\u06cc\u0633\u0627 \u06c1\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 React Native Reusables \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 Uniwind \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><strong>\u0627\u06cc\u06a9\u0633\u067e\u0648 \u0627\u0648\u0631 \u0627\u06cc\u06a9\u0633\u067e\u0648 \u0631\u0627\u0624\u0679\u0631<\/strong> \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0633\u06cc\u0679 \u0627\u067e\u060c \u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0633\u0631\u0648\u0631\u060c \u0627\u0648\u0631 \u0641\u0627\u0626\u0644 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e Next.js \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0627\u06cc\u06a9\u0633\u067e\u0648 \u0631\u0627\u0624\u0679\u0631 \u0627\u0633\u06cc \u0637\u0631\u062d \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-how-shadcnui-works\">shadcn\/ui \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/h2>\n<p>React Native Reusables \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a shadcn \u06a9\u06d2 \u0627\u0642\u062a\u0628\u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u06be\u0644\u062a\u06cc \u06c1\u06cc\u06ba:<\/p>\n<blockquote wp_automatic_readability=\"5\">\n<p>\u06cc\u06c1 \u062c\u0632\u0648\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u0633 \u0637\u0631\u062d \u0622\u067e \u0627\u06cc\u06a9 \u062c\u0632\u0648 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/blockquote>\n<p>shadcn\/ui \u06a9\u0648 \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0634\u0627\u0645\u0644 \u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4 <code>package.json<\/code>. \u06a9\u06c1 <strong>\u0644\u06a9\u06be\u0646\u0627<\/strong> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2. \u0627\u06cc\u06a9 \u0631\u062c\u0633\u0679\u0631\u06cc JSON \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0627 \u0627\u06cc\u06a9 \u0645\u062c\u0645\u0648\u0639\u06c1 \u06c1\u06d2 \u062c\u0648 \u0633\u0631\u0648\u0631 \u067e\u0631 \u06c1\u0648\u0633\u0679 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u06c1\u0631 \u0641\u0627\u0626\u0644 \u062c\u0632\u0648 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0645\u06cc\u06ba \u0648\u06c1 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2 \u062c\u0633 \u06a9\u06cc CLI \u06a9\u0648 \u0627\u0633 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u062c\u0628 \u0622\u067e CLI \u0686\u0644\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06cc\u06c1 \u0645\u062a\u0639\u0644\u0642\u06c1 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0633\u0648\u0631\u0633 \u06a9\u0648\u0688 \u06a9\u0648 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06cc\u0633\u0627 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u060c \u062f\u0631\u062c \u0630\u06cc\u0644 \u0631\u062c\u0633\u0679\u0631\u06cc \u0627\u0646\u062f\u0631\u0627\u062c \u062f\u06cc\u06a9\u06be\u06cc\u06ba: <strong>\u0628\u06cc\u062c<\/strong> \u0639\u0646\u0635\u0631 \u0628\u06cc\u062c \u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u0627 \u0644\u06cc\u0628\u0644 \u06c1\u06d2\u060c \u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u06a9\u0627\u0631\u0679 \u067e\u0631 \u06a9\u0627\u0641\u06cc \u06a9\u06d2 \u0622\u06af\u06d2 &quot;\u0645\u06cc\u0688\u06cc\u0645&#8221; \u0679\u06cc\u06af \u06c1\u06d2 \u062c\u0633\u06d2 \u0622\u067e \u0628\u0639\u062f \u0645\u06cc\u06ba \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4 \u06cc\u06c1 \u0627\u0635\u0644 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0645\u062e\u062a\u0635\u0631 \u0648\u0631\u0698\u0646 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/ui.shadcn.com\/schema\/registry-item.json\",\n  \"name\": \"badge\",\n  \"type\": \"registry:ui\",\n  \"title\": \"Badge\",\n  \"author\": \"@mrzachnugent\",\n  \"description\": \"Displays a badge or a component that looks like a badge.\",\n  \"dependencies\": [\"@rn-primitives\/slot\"],\n  \"registryDependencies\": [\"https:\/\/reactnativereusables.com\/r\/uniwind\/text.json\"],\n  \"files\": [\n    {\n      \"path\": \".\/node_modules\/@rnr\/registry\/src\/uniwind\/components\/ui\/badge.tsx\",\n      \"content\": \"import { TextClassContext } from '@\/components\/ui\/text';nimport ...\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}\n<\/code><\/pre>\n<p>\u0641\u0627\u0626\u0644\u06cc\u06ba \u0639\u0648\u0627\u0645\u06cc \u06c1\u06cc\u06ba \u0644\u06c1\u0630\u0627 \u0622\u067e \u0627\u0646\u06c1\u06cc\u06ba \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">curl https:\/\/reactnativereusables.com\/r\/uniwind\/badge.json\n<\/code><\/pre>\n<p>\u0627\u06c1\u0645 \u0634\u0639\u0628\u0648\u06ba \u06a9\u06d2 \u0645\u0639\u0646\u06cc \u062f\u0631\u062c \u0630\u06cc\u0644 \u06c1\u06cc\u06ba\u06d4<\/p>\n<ul>\n<li><code>content<\/code>    \u0627\u0633 \u0645\u06cc\u06ba \u0633\u0679\u0631\u0646\u06af \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0630\u062e\u06cc\u0631\u06c1 \u0634\u062f\u06c1 \u062c\u0632\u0648 \u06a9\u0627 \u067e\u0648\u0631\u0627 \u0633\u0648\u0631\u0633 \u06a9\u0648\u0688 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/li>\n<li><code>dependencies<\/code>    \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u06a9\u0627\u0631 npm \u067e\u06cc\u06a9\u062c\u0648\u06ba \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a\u06d4 CLI \u0627\u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/li>\n<li><code>registryDependencies<\/code>    \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u06a9\u0627\u0631 \u062f\u06cc\u06af\u0631 \u0631\u062c\u0633\u0679\u0631\u06cc \u0627\u0646\u062f\u0631\u0627\u062c\u0627\u062a \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a\u06d4 \u0627\u0633 \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba\u060c \u0628\u06cc\u062c \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2: <strong>\u0645\u062a\u0646<\/strong> \u0627\u062c\u0632\u0627\u0621 React Native \u06a9\u06d2 \u0627\u0631\u062f \u06af\u0631\u062f \u0686\u06be\u0648\u0679\u06d2 \u0631\u06cc\u067e\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>Text<\/code> \u0622\u067e \u0627\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0645\u0631\u062d\u0644\u06c1 3 \u0645\u06cc\u06ba \u067e\u0691\u06be\u06cc\u06ba \u06af\u06d2\u06d4 \u062c\u0628 \u0622\u067e \u0628\u06cc\u062c \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 CLI \u0686\u0644\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06cc\u06c1 \u0641\u06cc\u0644\u0688 \u0645\u062a\u0646 \u06a9\u0648 \u0628\u06be\u06cc \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0633\u0628\u0628 \u0628\u0646\u06d2 \u06af\u06cc\u06d4<\/li>\n<\/ul>\n<p>\u0627\u0633 \u0637\u0631\u062d \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u0645\u06cc\u06ba \u0631\u062c\u0633\u0679\u0631\u06cc \u0633\u06d2 \u0627\u062c\u0632\u0627\u0621 \u062f\u0631\u0622\u0645\u062f \u06a9\u06cc\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0631\u062c\u0633\u0679\u0631\u06cc \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06a9\u0648 \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 CLI \u0627\u0633\u06d2 \u0630\u062e\u06cc\u0631\u06c1 \u0645\u06cc\u06ba \u0641\u0627\u0626\u0644\u06cc\u06ba \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 React Native Reusables \u067e\u0633 \u0645\u0646\u0638\u0631 \u0645\u06cc\u06ba shadcn CLI \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e React Native \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0627\u0633\u06cc \u0648\u0631\u06a9 \u0641\u0644\u0648 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u067e\u0633 \u0628\u0646\u0627\u062a\u06d2 \u0648\u0642\u062a \u06cc\u06c1 \u0637\u0631\u06cc\u0642\u06c1 \u06a9\u0627\u0631\u0622\u0645\u062f \u06c1\u0648\u0646\u06d2 \u06a9\u06cc \u0686\u0646\u062f \u0648\u062c\u0648\u06c1\u0627\u062a \u06cc\u06c1 \u06c1\u06cc\u06ba:<\/p>\n<ol>\n<li><strong>\u0622\u067e \u062f\u0631\u062c \u0630\u06cc\u0644 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0645\u0627\u0644\u06a9 \u06c1\u06cc\u06ba:<\/strong> \u0627\u062c\u0632\u0627\u0621 \u062c\u06cc\u0633\u06d2: <code>components\/ui\/button.tsx<\/code> \u06cc\u06c1 \u0645\u062e\u0632\u0646 \u0645\u06cc\u06ba \u06c1\u06d2 \u0627\u0648\u0631 Git diff \u0645\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06af\u06c1\u0631\u0627 \u067e\u0631\u06cc\u0633 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0627\u0633 \u0644\u0627\u0626\u0646 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u06cc\u06ba\u06d4 \u0646\u0626\u06d2 \u067e\u0631\u0648\u067e\u0633 \u0628\u0646\u0627\u0646\u06d2\u060c \u06a9\u0627\u0646\u0679\u06d2 \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0646\u06d2\u060c \u06cc\u0627 \u0645\u0633\u0627\u0626\u0644 \u0627\u0679\u06be\u0627\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/li>\n<li><strong>\u0688\u06cc\u0632\u0627\u0626\u0646 \u067e\u0631\u0648\u067e\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0646\u0627\u0645\u0632\u062f \u0631\u0646\u06af\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0632\u0646\u062f\u06c1 \u0622\u062a\u0627 \u06c1\u06d2\u06d4<\/strong> \u0627\u06cc\u06a9 \u0631\u0646\u06af \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0646\u0627\u0645\u0632\u062f \u06a9\u0631\u062f\u0627\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0639\u0644\u0627\u0646 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0637\u0631\u062d: <code>primary<\/code>, <code>muted<\/code>, <code>border<\/code>\u0627\u0648\u0631 <code>destructive<\/code>. \u067e\u06be\u0631 \u0627\u0633\u06d2 \u0627\u067e\u0646\u06cc \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba: <code>className=\"bg-primary\"<\/code>. \u06cc\u06c1 \u06c1\u06d2 <code>colors.ts<\/code> \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0631\u0646\u06af \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u062c\u06af\u06c1 \u06c1\u06d2 \u0627\u0648\u0631 \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627\u0621 \u0648\u06c1\u0627\u06ba \u0633\u06d2 \u067e\u0691\u06be\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u0646\u06d2 \u0627\u0633\u06d2 \u0645\u0631\u062d\u0644\u06c1 2 \u0645\u06cc\u06ba \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0627 \u06c1\u06d2\u06d4<\/li>\n<li><strong>\u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc\u0627\u06ba \u0627\u0644\u06af \u0627\u0644\u06af \u067e\u06cc\u06a9\u062c\u0648\u06ba \u0645\u06cc\u06ba \u0641\u0631\u0627\u06c1\u0645 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/strong> RN Primitives \u0645\u06cc\u06ba \u0641\u0648\u06a9\u0633 \u06c1\u06cc\u0646\u0688\u0644\u0646\u06af\u060c \u0627\u0648\u067e\u0646 \u0627\u0648\u0631 \u06a9\u0644\u0648\u0632 \u0633\u0679\u06cc\u0679\u0633\u060c \u0627\u0648\u0631 \u0633\u06a9\u0631\u06cc\u0646 \u0631\u06cc\u0688\u0631 \u0633\u067e\u0648\u0631\u0679 \u062c\u06cc\u0633\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u0645\u06cc\u06ba \u0645\u0639\u0627\u0648\u0646 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u0648 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0627\u0646\u062f\u0627\u0632 \u0644\u06a9\u06be\u0646\u0627 \u06c1\u06d2\u06d4<\/li>\n<\/ol>\n<p>\u0630\u06c1\u0646 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u0626\u06d2 \u0627\u06cc\u06a9 \u062a\u062c\u0627\u0631\u062a \u06c1\u06d2\u06d4 \u0631\u062c\u0633\u0679\u0631\u06cc \u0627\u067e \u0688\u06cc\u0679\u0633 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0644\u0627\u06af\u0648 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648\u0688 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u06a9\u0627\u067e\u06cc \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u0628\u06af \u06a9\u0648 \u0627\u0648\u067e\u0631 \u06a9\u06cc \u0637\u0631\u0641 \u0637\u06d2 \u06a9\u0631 \u0644\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0622\u067e \u06a9\u0648 CLI \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0686\u0644\u0627\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u06af\u06cc: <code>--overwrite<\/code>. \u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u0627\u0633 \u062c\u0632\u0648 \u06a9\u0648 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0628\u0646\u0627\u06cc\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u067e\u0691 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4 \u0645\u062a\u0639\u062f\u062f \u0627\u062c\u0632\u0627\u0621 \u0645\u06cc\u06ba \u0628\u0691\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0633 \u067e\u0631 \u063a\u0648\u0631 \u06a9\u0631\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-what-react-native-reusables-gives-you\">\u0622\u0628\u0627\u0626\u06cc \u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u06cc \u067e\u06cc\u0634\u06a9\u0634 \u06a9\u06cc\u0627 \u0631\u062f \u0639\u0645\u0644 \u06c1\u06d2<\/h2>\n<p>\u062a\u062d\u0631\u06cc\u0631 \u06a9\u06d2 \u0648\u0642\u062a\u060c React Native Reusables \u0645\u06cc\u06ba 30 \u0627\u062c\u0632\u0627\u0621 \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba: accordion\u060c \u0627\u0644\u0631\u0679\u060c \u0627\u0644\u0631\u0679 \u0688\u0627\u0626\u06cc\u0644\u0627\u06af\u060c \u0627\u0633\u067e\u06cc\u06a9\u0679 \u0631\u06cc\u0634\u0648\u060c \u0627\u0648\u062a\u0627\u0631\u060c \u0628\u06cc\u062c\u060c \u0628\u0679\u0646\u060c \u06a9\u0627\u0631\u0688\u060c \u0686\u06cc\u06a9 \u0628\u0627\u06a9\u0633\u060c \u06a9\u0648\u0644\u0627\u067e\u0633 \u0627\u06cc\u0628\u0644\u060c \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u06a9\u0627 \u0645\u06cc\u0646\u0648\u060c \u0688\u0627\u0626\u06cc\u0644\u0627\u06af\u060c \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u0645\u06cc\u0646\u0648\u060c \u06c1\u0648\u0648\u0631 \u06a9\u0627\u0631\u0688\u060c \u0627\u0646 \u067e\u0679\u060c \u0644\u06cc\u0628\u0644\u060c \u0645\u06cc\u0646\u0648 \u0628\u0627\u0631\u060c \u067e\u0627\u067e \u0627\u0648\u0648\u0631\u060c \u067e\u0631\u0648\u06af\u0631\u06cc\u0633\u060c \u0633\u0644\u06cc\u06a9\u0679 \u06af\u0631\u0648\u067e\u060c \u067e\u0627\u067e \u0627\u0648\u0648\u0631\u060c \u0633\u0644\u06cc\u06a9\u0679 \u06af\u0631\u0648\u067e \u0633\u0648\u0626\u0686\u060c \u0679\u06cc\u0628\u060c \u0679\u06cc\u06a9\u0633\u0679\u060c \u0679\u06cc\u06a9\u0633\u0679\u06cc\u0631\u06cc\u0627\u060c \u0679\u0648\u06af\u0644\u060c \u0679\u0648\u06af\u0644 \u06af\u0631\u0648\u067e\u060c \u0627\u0648\u0631 \u0679\u0648\u0644 \u0679\u0650\u067e\u06d4 \u062f\u0633\u062a\u06cc\u0627\u0628 \u0627\u062c\u0632\u0627\u0621 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0639\u0627\u0645 \u0627\u06cc\u067e \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u06a9\u0627\u0631 \u0628\u06c1\u062a \u0633\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0631\u062f \u0639\u0645\u0644 \u0645\u0642\u0627\u0645\u06cc \u0648\u06cc\u0628 \u0633\u06d2 \u0628\u06c1\u062a \u0633\u06d2 \u0637\u0631\u06cc\u0642\u0648\u06ba \u0633\u06d2 \u0645\u062e\u062a\u0644\u0641 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0648\u06cc\u0628 \u0648\u0631\u0698\u0646 \u06a9\u06cc \u0642\u0637\u0639\u06cc \u06a9\u0627\u067e\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u0633\u06a9\u062a\u06d2\u06d4 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u0645\u06cc\u06ba \u0628\u0646\u06cc\u0627\u062f\u06cc \u0627\u062e\u062a\u0644\u0627\u0641\u0627\u062a \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u062f\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u06cc\u06c1 \u0633\u0628\u0642 \u0622\u067e \u06a9\u0648 \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0644\u06d2 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0648\u06cc\u0628 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 shadcn\/ui \u0628\u06be\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 shadcn \u062c\u0632\u0648 \u0645\u0641\u06cc\u062f \u06c1\u0648 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0622\u067e \u06a9\u0648 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0632\u06cc\u062f \u0631\u06cc\u0688\u06cc \u0645\u06cc\u0688 \u0645\u062b\u0627\u0644\u0648\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u06d4<\/p>\n<table>\n<thead>\n<tr>\n<th>\u0641\u0631\u0642<\/th>\n<th>\u0645\u0639\u0646\u06cc<\/th>\n<th>\u0645\u06cc\u06ba \u0627\u0633\u06d2 \u06a9\u06c1\u0627\u06ba \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u0627 \u06c1\u0648\u06ba\u061f<\/th>\n<\/tr>\n<\/thead>\n<tbody wp_automatic_readability=\"11\">\n<tr wp_automatic_readability=\"7\">\n<td>\u067e\u0648\u0631\u0679\u0644 \u0645\u06cc\u06ba <code>PortalHost<\/code><\/td>\n<td>\u0648\u06cc\u0628 \u067e\u0631\u060c \u062a\u06cc\u0631\u062a\u0627 \u06c1\u0648\u0627 \u0645\u0648\u0627\u062f \u062c\u06cc\u0633\u06d2 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646\u0632 <code>document.body<\/code>. React Native \u0645\u06cc\u06ba \u0646\u06c1\u06cc\u06ba\u06d4 <code>document.body<\/code>\u062a\u0648 \u0622\u067e <code>PortalHost<\/code> \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u062c\u0632\u0648\u06d4<\/td>\n<td>\u0645\u0631\u062d\u0644\u06c1 7<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"4\">\n<td>\u0637\u0631\u0632\u06cc\u06ba \u062c\u06be\u0631\u0646\u0627 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06cc\u06ba\u06d4<\/td>\n<td>\u067e\u06cc\u0631\u0646\u0679 \u0648\u06cc\u0648 \u067e\u0631 \u0633\u06cc\u0679 \u06a9\u0631\u062f\u06c1 \u0679\u06cc\u06a9\u0633\u0679 \u06a9\u0644\u0631 \u0627\u0633 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0645\u0648\u062c\u0648\u062f \u0679\u06cc\u06a9\u0633\u0679 \u062a\u06a9 \u0646\u06c1\u06cc\u06ba \u067e\u06c1\u0646\u0686\u062a\u0627\u060c \u0627\u0633 \u0644\u06cc\u06d2 React Native Reusables <code>Text<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u0627 \u062c\u0632\u0648 \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06a9\u0627\u0645 \u06c1\u06d2\u06d4<\/td>\n<td>\u0645\u0631\u062d\u0644\u06c1 3<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"6\">\n<td>\u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 <code>data-*<\/code> \u0648\u0635\u0641<\/td>\n<td>Web shadcn \u062f\u0631\u062c \u0630\u06cc\u0644 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u0633\u0679\u0627\u0626\u0644 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>data-state<\/code>. React Native \u0645\u06cc\u06ba \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0627 \u0627\u0646\u062d\u0635\u0627\u0631 \u067e\u0631\u067e\u0633 \u0627\u0648\u0631 \u0631\u06cc\u0627\u0633\u062a \u067e\u0631 \u06c1\u06d2\u06d4<\/td>\n<td>\u0645\u0631\u062d\u0644\u06c1 7<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"5\">\n<td>\u0634\u0628\u06cc\u06c1\u06cc\u06ba \u06a9\u0644\u0627\u0633\u0632 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u067e\u0631\u067e\u0633 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/td>\n<td>\u0622\u0626\u06cc\u06a9\u0646 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0633\u06d2 \u06a9\u06cc\u0627 \u062a\u0648\u0642\u0639 \u06a9\u06cc \u062c\u0627\u0626\u06d2\u06d4 <code>color<\/code> \u0627\u0648\u0631 <code>size<\/code> \u0686\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0633\u06c1\u0627\u0631\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u06a9\u0644\u0627\u0633 \u06a9\u0627 \u0646\u0627\u0645 \u0642\u0628\u0648\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u0626\u06cc\u06a9\u0646 \u06a9\u0648 \u0644\u067e\u06cc\u0679 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/td>\n<td>\u0645\u0631\u062d\u0644\u06c1 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"heading-what-youre-building\">\u0622\u067e \u06a9\u06cc\u0627 \u0628\u0646\u0627 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba<\/h2>\n<p>\u06c1\u0645 \u0627\u06cc\u06a9 \u06a9\u0627\u0641\u06cc \u0634\u0627\u067e \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u06a9\u0627\u0631\u0679 \u0627\u0648\u0631 \u0627\u062f\u0627\u0626\u06cc\u06af\u06cc \u06a9\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2 \u062c\u06c1\u0627\u06ba \u06af\u0627\u06c1\u06a9 \u0627\u067e\u0646\u06d2 \u0622\u0631\u0688\u0631 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646\u06c1\u06cc\u06ba \u06a9\u0627\u0624\u0646\u0679\u0631 \u067e\u0631 \u062c\u0645\u0639 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0631\u062c\u0633\u0679\u0631\u06cc \u06a9\u06d2 12 \u0627\u062c\u0632\u0627\u0621 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u062c\u0628 \u06c1\u0645 \u0627\u0633\u06d2 \u0627\u06a9\u0679\u06be\u0627 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06c1\u0645 \u06a9\u0686\u06be React Native \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u06cc \u0628\u06be\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u062c\u0646 \u06a9\u0648 \u06cc\u0627\u062f \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646\u0632 \u06a9\u06cc\u0633\u06d2 \u067e\u06cc\u0634 \u06a9\u06cc\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0645\u062d\u0641\u0648\u0638 \u0639\u0644\u0627\u0642\u06c1 \u06a9\u0633 \u0637\u0631\u062d \u0644\u06d2 \u0622\u0624\u0679 \u06a9\u0648 \u0645\u062a\u0627\u062b\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0628\u0627\u0642\u06cc \u0635\u0641\u062d\u06c1 \u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0686\u06cc\u06a9 \u0622\u0624\u0679 \u0628\u0627\u0631 \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u0645\u0631\u0626\u06cc \u0631\u06a9\u06be\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n<table>\n<thead>\n<tr>\n<th>\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u0627 \u062d\u0635\u06c1<\/th>\n<th>\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0634\u062f\u06c1 \u062d\u0635\u06d2<\/th>\n<th>\u0645\u0648\u0628\u0627\u0626\u0644 \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644 \u06cc\u06c1 \u0633\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/th>\n<\/tr>\n<\/thead>\n<tbody wp_automatic_readability=\"10.5\">\n<tr wp_automatic_readability=\"9\">\n<td>\u0622\u0626\u0679\u0645 \u06a9\u06cc \u0642\u0637\u0627\u0631<\/td>\n<td>\u06a9\u0627\u0631\u0688\u0632\u060c \u0627\u0648\u062a\u0627\u0631\u060c \u0628\u06cc\u062c\u0632\u060c \u0628\u0679\u0646<\/td>\n<td>\u06a9\u0648\u0626\u06cc \u0645\u0631\u062d\u0644\u06c1 \u0648\u0627\u0631 \u0627\u0646\u062f\u0627\u0632 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 <code>truncate<\/code>\u0686\u06be\u0648\u0679\u06d2 \u0679\u06cc\u0628 \u06a9\u0627 \u06c1\u062f\u0641<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"3\">\n<td>\u0645\u0642\u062f\u0627\u0631 stepper<\/td>\n<td>\u0628\u0679\u0646\u060c \u0622\u0626\u06cc\u06a9\u0646<\/td>\n<td>\u0634\u0628\u06cc\u06c1\u06cc\u06ba \u067e\u0631\u067e\u0633 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u06a9\u0644\u0627\u0633\u0632 \u0646\u06c1\u06cc\u06ba\u06d4<\/td>\n<\/tr>\n<tr>\n<td>\u0648\u0642\u062a \u0627\u0679\u06be\u0627\u0624<\/td>\n<td>\u0627\u0646\u062a\u062e\u0627\u0628\u060c \u0644\u06cc\u0628\u0644<\/td>\n<td>\u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0648\u0631\u0679\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"2\">\n<td>\u0646\u0627\u0645 \u06a9\u0627 \u0645\u06cc\u062f\u0627\u0646<\/td>\n<td>\u0627\u0646 \u067e\u0679\u060c \u0644\u06cc\u0628\u0644<\/td>\n<td>\u06a9\u06cc \u0628\u0648\u0631\u0688 \u0641\u06cc\u0644\u0688\u0632 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"2\">\n<td>\u0627\u067e\u0646\u0627 \u06a9\u067e \u0679\u0648\u06af\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/td>\n<td>\u0633\u0648\u0626\u0686\u0632\u060c \u0644\u06cc\u0628\u0644\u0632<\/td>\n<td>\u0644\u06cc\u0628\u0644 \u06a9\u06d2 \u0645\u062a\u0646 \u06a9\u0648 \u0679\u06cc\u067e \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"2\">\n<td>\u0628\u0644<\/td>\n<td>\u0627\u0644\u06af \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u0627\u060c \u0645\u062a\u0646<\/td>\n<td>\u063a\u06cc\u0631 \u062a\u0631\u062a\u06cc\u0628 \u0634\u062f\u06c1 \u0646\u0645\u0628\u0631\u0632<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"3\">\n<td>\u0686\u06cc\u06a9 \u0622\u0624\u0679 \u0628\u0627\u0631<\/td>\n<td>\u0628\u0679\u0646\u060c \u0627\u0644\u0631\u0679 \u0688\u0627\u0626\u06cc\u0644\u0627\u06af<\/td>\n<td>\u0646\u06c1\u06cc\u06ba <code>position: fixed<\/code>\u0627\u0648\u0631 \u06af\u06be\u0631 \u06a9\u06d2 \u0627\u0634\u0627\u0631\u06d2<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u0645\u06a9\u0645\u0644 \u0633\u06a9\u0631\u06cc\u0646 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915218_641_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u0688\u0627\u0631\u06a9 \u0645\u0648\u0688 \u0645\u06cc\u06ba \u0645\u06a9\u0645\u0644 \u06a9\u0627\u0631\u0679 \u0627\u0633\u06a9\u0631\u06cc\u0646\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0627\u067e\u0646\u06d2 \u06a9\u0627\u0645 \u06a9\u0627 \u062d\u062a\u0645\u06cc \u0646\u062a\u06cc\u062c\u06c1 \u0633\u06d2 \u0645\u0648\u0627\u0632\u0646\u06c1 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0645\u06a9\u0645\u0644 \u06a9\u0648\u0688 GitHub \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u0645\u06cc\u06ba \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-1-create-the-app\">\u0645\u0631\u062d\u0644\u06c1 1: \u0627\u06cc\u06a9 \u0627\u06cc\u067e \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u0622\u067e React Native Reusables CLI \u06a9\u0648 \u0627\u06cc\u06a9 \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627\u0646\u06d2 \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06c1\u0645 \u0627\u06cc\u06a9\u0633\u067e\u0648 \u0631\u0627\u0624\u0679\u0631\u060c \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646\u060c \u062a\u06be\u06cc\u0645 \u0641\u0627\u0626\u0644\u0632\u060c \u0627\u0648\u0631 \u06a9\u0686\u06be \u0627\u0633\u0679\u0627\u0631\u0679 \u0627\u067e \u0627\u062c\u0632\u0627\u0621 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba \u06af\u06d2\u06d4 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0645\u0627\u0646\u0688 \u06a9\u0648 \u0686\u0644\u0627\u0626\u06cc\u06ba:<\/p>\n<pre><code class=\"language-bash\">pnpm dlx @react-native-reusables\/cli@latest init\n<\/code><\/pre>\n<h3 id=\"heading-answer-the-clis-questions\">CLI \u0633\u0648\u0627\u0644\u0627\u062a \u06a9\u06d2 \u062c\u0648\u0627\u0628\u0627\u062a<\/h3>\n<p>CLI \u0686\u0627\u0631 \u0633\u0648\u0627\u0644\u0627\u062a \u067e\u0648\u0686\u06be\u062a\u0627 \u06c1\u06d2:<\/p>\n<p><strong>\u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0627 \u0646\u0627\u0645 \u06a9\u06cc\u0627 \u06c1\u06d2\u061f<\/strong> \u0622\u067e \u062c\u0648 \u0646\u0627\u0645 \u062f\u0631\u062c \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0648\u06c1 \u0641\u0648\u0644\u0688\u0631 \u06a9\u0627 \u0646\u0627\u0645 \u0628\u0646 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u062a\u062c\u0648\u06cc\u0632 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 <code>my-app<\/code>.<\/p>\n<p><strong>\u0627\u06cc\u06a9 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u062a\u06cc\u0646 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0622\u067e \u06a9\u0648 \u062c\u0633 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 \u0648\u06c1 \u0688\u06cc\u0641\u0627\u0644\u0679 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0645\u0646\u062a\u062e\u0628 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915218_769_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u0679\u0631\u0645\u06cc\u0646\u0644 \u0645\u06cc\u06ba \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u0633\u0644\u06cc\u06a9\u0634\u0646 \u067e\u0631\u0627\u0645\u067e\u0679\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<pre><code class=\"language-plaintext\">\u276f Minimal (Nativewind)\n  Minimal (Uniwind)\n  Clerk auth (Nativewind)\n<\/code><\/pre>\n<p>\u0646\u06cc\u0686\u06d2 \u062a\u06cc\u0631 \u06a9\u0648 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062f\u0628\u0627\u0626\u06cc\u06ba\u06d4 <strong>\u06a9\u0645 \u0627\u0632 \u06a9\u0645<\/strong>. \u06cc\u06c1 \u0628\u0639\u062f \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0634\u06a9\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06c1\u06d2\u06d4 Nativewind \u0627\u0648\u0631 Uniwind React Native \u0645\u06cc\u06ba Tailwind \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u062f\u0648 \u0637\u0631\u06cc\u0642\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 CLI \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0644\u06af \u0627\u0644\u06af \u0631\u062c\u0633\u0679\u0631\u06cc\u0627\u06ba \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u062c\u0648 \u0627\u062c\u0632\u0627\u0621 \u06cc\u0648\u0646\u06cc \u0648\u0646\u0688 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0644\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u0648\u06c1 \u0627\u0646 \u0633\u06d2 \u0645\u062e\u062a\u0644\u0641 \u06c1\u06cc\u06ba \u062c\u0648 \u0622\u067e Nativewind \u06a9\u06d2 \u0644\u06cc\u06d2 \u0644\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0627\u06af\u0631 \u0622\u067e Nativewind \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u06a9\u0627 \u06a9\u0648\u0688 \u0645\u0645\u0627\u062b\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u06af\u0627\u06d4<\/p>\n<p><strong>\u06a9\u06cc\u0627 \u0622\u067e \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u0648 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u061f<\/strong> \u06c1\u0627\u06ba \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u067e\u06cc\u06a9\u06cc\u062c \u0645\u06cc\u0646\u06cc\u062c\u0631 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba \u062c\u0633\u06d2 \u0622\u067e \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><strong>\u06a9\u06cc\u0627 \u0622\u067e \u0627\u067e\u0646\u06d2 Git \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u0648 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u061f<\/strong> \u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u06c1\u0627\u06ba \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4 \u0645\u06cc\u06ba \u0633\u067e\u0644\u06cc\u0634 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u0648\u06ba \u0627\u0648\u0631 \u0627\u0633 \u06a9\u0627 \u0645\u0648\u0627\u0632\u0646\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0686\u06be \u0648\u0639\u062f\u06d2 \u06a9\u0631\u0646\u0627 \u0645\u062f\u062f\u06af\u0627\u0631 \u062b\u0627\u0628\u062a \u06c1\u0648\u06af\u0627\u06d4<\/p>\n<h3 id=\"heading-look-at-the-project-structure\">\u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u0633\u0627\u062e\u062a \u067e\u0631 \u0627\u06cc\u06a9 \u0646\u0638\u0631 \u0688\u0627\u0644\u06cc\u06ba\u06d4<\/h3>\n<p>CLI \u062f\u0631\u062c \u0630\u06cc\u0644 \u0641\u0627\u0626\u0644\u06cc\u06ba \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-plaintext\">shadcn-react-native-app\/\n\u251c\u2500\u2500 app\/\n\u2502   \u251c\u2500\u2500 _layout.tsx        # ThemeProvider, Stack, and the PortalHost\n\u2502   \u251c\u2500\u2500 +html.tsx          # web only, the root HTML shell\n\u2502   \u251c\u2500\u2500 +not-found.tsx\n\u2502   \u2514\u2500\u2500 index.tsx          # the starter screen\n\u251c\u2500\u2500 components\/ui\/\n\u2502   \u251c\u2500\u2500 button.tsx\n\u2502   \u251c\u2500\u2500 icon.tsx\n\u2502   \u2514\u2500\u2500 text.tsx\n\u251c\u2500\u2500 lib\/\n\u2502   \u251c\u2500\u2500 theme.ts           # the same palette again, in JavaScript\n\u2502   \u2514\u2500\u2500 utils.ts           # cn()\n\u251c\u2500\u2500 global.css             # the theme tokens\n\u251c\u2500\u2500 components.json        # the shadcn config, same as on the web\n\u251c\u2500\u2500 metro.config.js        # withUniwindConfig\n\u2514\u2500\u2500 uniwind-types.d.ts     # generated, do not edit\n<\/code><\/pre>\n<p>\u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u06c1 \u06c1\u0645 \u0622\u06af\u06d2 \u0628\u0691\u06be\u06cc\u06ba\u060c \u0622\u0626\u06cc\u06d2 \u0627\u0633 \u0688\u06be\u0627\u0646\u0686\u06d2 \u06a9\u06cc \u0686\u0646\u062f \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u0627\u0633\u06d2 \u067e\u0648\u0631\u06d2 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<ul>\n<li><code>components.json<\/code>    \u06cc\u06c1 \u0648\u06c1\u06cc shadcn \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646 \u0641\u0627\u0626\u0644 \u06c1\u06d2 \u062c\u0648 \u0648\u06cc\u0628 \u067e\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 CLI \u06a9\u0648 \u0628\u062a\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u062c\u0632\u0648 \u06a9\u06c1\u0627\u06ba \u0631\u06a9\u06be\u0646\u0627 \u06c1\u06d2 (<code>@\/components\/ui<\/code>) \u0627\u0648\u0631 \u06a9\u06c1\u0627\u06ba <code>cn()<\/code> \u0645\u062f\u062f\u06af\u0627\u0631 \u0632\u0646\u062f\u06af\u06cc (<code>@\/lib\/utils<\/code>)\u06d4<\/li>\n<li><code>global.css<\/code>    \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u062a\u06be\u06cc\u0645 \u0679\u0648\u06a9\u0646\u0632 \u06c1\u0648\u06ba \u06af\u06d2 \u062c\u0648 \u0622\u067e \u0645\u0631\u062d\u0644\u06c1 2 \u0645\u06cc\u06ba \u0633\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2\u06d4<\/li>\n<li><code>lib\/utils.ts<\/code>    \u0628\u0631\u0622\u0645\u062f <code>cn()<\/code>\u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645\u0648\u06ba \u06a9\u0648 \u06cc\u06a9\u062c\u0627 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u06a9\u0644\u0627\u0633\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0646\u0627\u0632\u0639\u0627\u062a \u06a9\u0648 \u062d\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u062f\u062f\u06af\u0627\u0631\u06d4<\/li>\n<li><code>app\/_layout.tsx<\/code>    \u0634\u0627\u0645\u0644 <code>PortalHost<\/code> \u0639\u0646\u0635\u0631 \u06cc\u06c1 \u0628\u0686\u0627 \u06c1\u0648\u0627 \u0633\u06c1\u0627\u0631\u0648\u06ba \u06a9\u06cc \u0637\u0631\u062d \u0644\u06af\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633\u06d2 \u062d\u0630\u0641 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u0645\u0631\u062d\u0644\u06c1 7 \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u06cc\u0648\u06ba\u06d4<\/li>\n<\/ul>\n<p>\u06cc\u0648\u0646\u06cc \u0648\u0646\u0688 \u0631\u06cc\u0688\u0646\u06af <code>global.css<\/code> \u0645\u06cc\u0679\u0631\u0648 \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u06a9\u0648 \u0628\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0644\u0627\u0633 \u0633\u0679\u0631\u0646\u06af\u0632 \u06a9\u0648 React \u0645\u0642\u0627\u0645\u06cc \u0637\u0631\u0632 \u06a9\u06cc \u0627\u0634\u06cc\u0627\u0621 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u06d2 \u0648\u0642\u062a \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0627\u0633 \u0645\u06cc\u06ba \u06a9\u0627\u0641\u06cc \u0648\u0642\u062a \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 <code>className<\/code> \u0633\u0679\u0631\u0646\u06af\u0632 \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u06a9\u0648 \u0633\u0633\u062a \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-run-the-app\">\u0627\u06cc\u067e \u0686\u0644\u0627\u0626\u06cc\u06ba<\/h3>\n<p>\u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0633\u0631\u0648\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">pnpm dev\n<\/code><\/pre>\n<p>\u062f\u0628\u0627\u0626\u06cc\u06ba <code>w<\/code> \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u06a9\u06be\u0648\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 <code>i<\/code> iOS \u0633\u0645\u06cc\u0644\u06cc\u0679\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06cc\u0627 <code>a<\/code> \u0627\u06cc\u0646\u0688\u0631\u0627\u0626\u06cc\u0688 \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4 \u0648\u06cc\u0644\u06a9\u0645 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06d2 \u06c1\u06cc\u0688\u0631 \u0645\u06cc\u06ba \u062a\u06be\u06cc\u0645 \u0679\u0648\u06af\u0644 \u06c1\u06d2 \u062c\u0633 \u0633\u06d2 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u062a\u06be\u06cc\u0645 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628 \u0627\u062b\u0631 \u0645\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u06a9\u0648\u0626\u06cc \u0645\u0633\u0626\u0644\u06c1 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u0622\u067e \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0648\u0642\u062a \u062a\u0634\u062e\u06cc\u0635\u06cc \u06a9\u0645\u0627\u0646\u0688\u0632 \u0686\u0644\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">pnpm dlx @react-native-reusables\/cli@latest doctor\n<\/code><\/pre>\n<p>\u0627\u067e\u0646\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0637\u0631\u0632 \u06a9\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u0627 \u067e\u062a\u06c1 \u0644\u06af\u0646\u06d2 \u06a9\u06cc \u0627\u0637\u0644\u0627\u0639 \u062f\u06cc\u06ba\u06d4 \u0627\u0633 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u0624\u0679 \u067e\u0679 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2:<\/p>\n<pre><code class=\"language-plaintext\">&#x2139; Styling Library: Uniwind\n&#x2714; All checks passed.\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u06cc\u06c1 Nativewind \u06a9\u06c1\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u062c\u0632\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0633\u06d2 \u062f\u0631\u0633\u062a \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0633\u06cc\u0679 \u0627\u067e \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u06cc\u06d4 \u06cc\u06c1 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06c1 \u0644\u0627\u0626\u0679 \u0627\u0648\u0631 \u0688\u0627\u0631\u06a9 \u0645\u0648\u0688 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0627\u0645 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0622\u067e \u06a9\u06d2 \u06a9\u0646\u0633\u0648\u0644 \u0645\u06cc\u06ba \u06a9\u0648\u0626\u06cc \u062e\u0631\u0627\u0628\u06cc\u0627\u06ba \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u060c \u06c1\u06cc\u0688\u0631 \u0645\u06cc\u06ba \u062a\u06be\u06cc\u0645 \u0679\u0648\u06af\u0644\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915218_500_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u0633\u067e\u0644\u06cc\u0634 \u0633\u06a9\u0631\u06cc\u0646\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-step-2-understand-the-theme-file\">\u0645\u0631\u062d\u0644\u06c1 2: \u0627\u067e\u0646\u06cc \u062a\u06be\u06cc\u0645 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0633\u0645\u062c\u06be\u06cc\u06ba\u06d4<\/h2>\n<p>\u0627\u0628 \u062c\u0628\u06a9\u06c1 \u0627\u06cc\u067e \u0686\u0644 \u0631\u06c1\u06cc \u06c1\u06d2\u060c \u0622\u0626\u06cc\u06d2 \u062a\u06be\u06cc\u0645 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u067e\u0631 \u0627\u06cc\u06a9 \u0646\u0638\u0631 \u0688\u0627\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u06c1 <code>global.css<\/code> \u0641\u0627\u0626\u0644 \u0648\u06c1 \u062c\u06af\u06c1 \u06c1\u06d2 \u062c\u06c1\u0627\u06ba \u0622\u067e \u0627\u067e\u0646\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0631\u0646\u06af\u0648\u06ba \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0642\u062f\u0631 \u067e\u06c1\u0644\u06d2 \u062a\u06be\u06cc\u06d4 <code>colors.ts<\/code> \u06cc\u0627 <code>theme.ts<\/code> \u06cc\u06c1 \u0648\u06c1 \u062a\u0631\u062a\u06cc\u0628 \u06c1\u06d2 \u062c\u0648 \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0628\u062f\u0644 \u062f\u06cc\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-css\">@import \"tailwindcss\";\n@import \"uniwind\";\n\n@import \"tw-animate-css\";\n\n@theme {\n  --radius: 10px;\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n\n  --spacing-hairline: hairlineWidth();\n}\n\n@layer theme {\n  :root {\n    @variant light {\n      --color-background: oklch(1 0 0);\n      --color-foreground: oklch(0.145 0 0);\n      --color-card: oklch(1 0 0);\n      --color-primary: oklch(0.205 0 0);\n      --color-muted-foreground: oklch(0.556 0 0);\n      --color-border: oklch(0.922 0 0);\n      \/* the rest of the list *\/\n    }\n\n    @variant dark {\n      --color-background: oklch(0.145 0 0);\n      --color-foreground: oklch(0.985 0 0);\n      --color-card: oklch(0.205 0 0);\n      --color-primary: oklch(0.922 0 0);\n      --color-muted-foreground: oklch(0.708 0 0);\n      --color-border: oklch(1 0 0 \/ 10%);\n      \/* the rest of the list *\/\n    }\n  }\n}\n<\/code><\/pre>\n<p>\u0627\u0633 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u062f\u0648 \u0627\u0635\u0648\u0644 \u06c1\u06cc\u06ba \u062c\u0648 \u0622\u067e \u06a9\u0648 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2:<\/p>\n<p>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 <code>--color-<\/code> \u0633\u0627\u0628\u0642\u06c1 \u200b\u200b\u06a9\u0644\u0627\u0633 \u06a9\u0627 \u0646\u0627\u0645 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0639\u0644\u0627\u0646 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a <code>--color-primary<\/code>Tailwind \u0627\u0633\u06d2 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0622\u067e \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0646\u0627\u0626\u06d2 \u06af\u0627\u06d4 <code>bg-primary<\/code>, <code>text-primary<\/code>\u0627\u0648\u0631 <code>border-primary<\/code>. \u0627\u06af\u0631 \u0622\u067e \u0627\u0639\u0644\u0627\u0646 \u06a9\u0631\u06cc\u06ba\u06d4 <code>--primary<\/code> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0635\u0631\u0641 CSS \u0645\u062a\u063a\u06cc\u0631\u0627\u062a \u0645\u0644\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u06a9\u0686\u06be \u0628\u06be\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u0627\u06c1\u0645 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 shadcn \u062a\u06be\u06cc\u0645 \u062c\u0646\u0631\u06cc\u0679\u0631 \u0645\u062a\u063a\u06cc\u0631 \u0646\u0627\u0645\u06cc \u0648\u06cc\u0628 \u0641\u0627\u0631\u0645 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>--primary<\/code>. \u0627\u06af\u0631 \u0622\u067e \u0645\u062a\u063a\u06cc\u0631 \u06a9\u0627 \u0646\u0627\u0645 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u0633 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0648 \u067e\u06cc\u0633\u0679 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u062a\u0648\u0691\u06cc\u06ba \u06af\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u0628\u062f\u0644\u06d2 \u06af\u0627\u06d4 \u0645\u0631\u062d\u0644\u06c1 12 \u0622\u067e \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u062f\u0648\u0633\u0631\u0627 <code>@variant light<\/code> \u0627\u0648\u0631 <code>@variant dark<\/code> \u062a\u0628\u062f\u06cc\u0644\u06cc <code>:root<\/code> \u0627\u0648\u0631 <code>.dark<\/code>. \u0648\u06cc\u0628 \u067e\u0631 \u0688\u0627\u0631\u06a9 \u0645\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631 \u06a9\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>.dark<\/code> \u06cc\u06c1 \u0635\u0641\u062d\u0627\u062a \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u06c1\u06d2\u06d4 \u0641\u0648\u0646 \u0645\u06cc\u06ba \u06a9\u0644\u0627\u0633\u0632 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0648\u0626\u06cc \u0635\u0641\u062d\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 Uniwind \u0633\u0648\u0626\u0686 \u06a9\u0627 \u0627\u0646\u062a\u0638\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u0628 \u0622\u067e \u06a9\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>Uniwind.setTheme<\/code>\u0641\u0639\u0627\u0644 \u0627\u0642\u062f\u0627\u0631 \u06a9\u0627 \u062a\u0628\u0627\u062f\u0644\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4 \u06c1\u0645 \u0627\u0633\u06d2 \u0645\u0631\u062d\u0644\u06c1 11 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0628\u06be\u06cc \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <code>oklch()<\/code> \u0631\u0646\u06af \u0641\u0648\u0646\u0632 \u0645\u06cc\u06ba \u0627\u06cc\u0633\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0627\u0633 \u0641\u0627\u0631\u0645\u06cc\u0679 \u06a9\u0648 \u067e\u0691\u06be \u0633\u06a9\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u0648\u0646\u06cc \u0648\u0650\u0646\u0688 \u0631\u0646\u06af\u0648\u06ba \u06a9\u0648 \u0627\u0633 \u0641\u0627\u0631\u0645\u06cc\u0679 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0633\u06d2 \u0628\u0646\u0688\u0644\u0646\u06af \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 React Native \u0633\u0645\u062c\u06be\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e \u0628\u06c1\u0631\u062d\u0627\u0644 \u062c\u062f\u06cc\u062f \u062a\u0631\u06cc\u0646 \u0631\u0646\u06af\u06cc\u0646 \u062a\u0631\u06a9\u06cc\u0628 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-the-palette-also-exists-in-libthemets\">\u067e\u06cc\u0644\u06cc\u0679 \u0628\u06be\u06cc \u0627\u0633 \u0645\u06cc\u06ba \u0645\u0648\u062c\u0648\u062f \u06c1\u06cc\u06ba: <code>lib\/theme.ts<\/code><\/h3>\n<p>\u062c\u0628 \u0645\u06cc\u06ba \u0627\u0633\u06d2 \u06a9\u06be\u0648\u0644\u062a\u0627 \u06c1\u0648\u06ba\u06d4 <code>lib\/theme.ts<\/code>\u0627\u067e\u0646\u06d2 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u062c\u06cc\u0633\u0627 \u0631\u0646\u06af \u0648\u0627\u067e\u0633 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4 \u06cc\u06c1 \u0646\u0642\u0644 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 React \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646\u060c \u062c\u0648 \u06c1\u06cc\u0688\u0631 \u0627\u0648\u0631 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u0627 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06be\u06cc\u0646\u0686\u062a\u06cc \u06c1\u06d2\u060c \u0633\u0627\u062f\u06c1 JavaScript \u0622\u0628\u062c\u06cc\u06a9\u0679 \u0633\u06d2 \u0631\u0646\u06af \u067e\u0691\u06be\u062a\u06cc \u06c1\u06d2 \u0646\u06c1 \u06a9\u06c1 CSS \u0645\u062a\u063a\u06cc\u0631\u0627\u062a \u0633\u06d2\u06d4 \u0646\u062a\u06cc\u062c\u06d2 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0622\u067e \u06a9\u0648 \u067e\u06cc\u0644\u06cc\u0679 \u06a9\u06cc \u062f\u0648 \u06a9\u0627\u067e\u06cc\u0627\u06ba \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631\u06cc \u0645\u06cc\u06ba \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 12 \u0645\u0631\u0627\u062d\u0644 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u062c\u0628 \u0648\u06c1 \u0645\u062e\u062a\u0644\u0641 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u06a9\u06cc\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-try-it-change-one-color\">\u0627\u0633\u06d2 \u0622\u0632\u0645\u0627\u0626\u06cc\u06ba: \u0627\u06cc\u06a9 \u0631\u0646\u06af \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0622\u0626\u06cc\u06d2 \u0627\u06cc\u06a9 \u0679\u0648\u06a9\u0646 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u06cc\u06c1 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 \u062a\u06be\u06cc\u0645 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u067e\u0646\u06cc \u06c1\u0644\u06a9\u06cc \u062a\u06be\u06cc\u0645 \u06a9\u06d2 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0631\u0646\u06af\u0648\u06ba \u06a9\u0648 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u067e\u06c1\u0686\u0627\u0646\u06cc \u062c\u0627\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0627\u0642\u062f\u0627\u0631 \u0645\u06cc\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-css\">--color-primary: oklch(0.6 0.24 25);\n<\/code><\/pre>\n<p>\u0641\u0627\u0626\u0644 \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0648\u06cc\u0644\u06a9\u0645 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u0627\u06cc\u06a9 \u0646\u0638\u0631 \u0688\u0627\u0644\u06cc\u06ba\u06d4 \u06a9\u06c1 <strong>\u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u0628\u0679\u0646 \u0627\u0628 \u0633\u0631\u062e \u06c1\u06d2 \u062d\u0627\u0644\u0627\u0646\u06a9\u06c1 \u0622\u067e \u0646\u06d2 \u0627\u0633 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc \u06c1\u06d2\u06d4 <code>button.tsx<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915218_805_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u0627\u06cc\u06a9 \u0679\u0648\u06a9\u0646 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0627\u0633\u0679\u0627\u0631\u0679 \u0628\u0679\u0646 \u0633\u0631\u062e \u06c1\u0648\u06af\u06cc\u0627\u06d4\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627\u0621 \u06c1\u06cc\u06ba\u06d4 <code>bg-primary<\/code> \u0627\u06cc\u06a9 \u0646\u06cc\u0627 \u0631\u0646\u06af \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4 \u0645\u06cc\u06ba \u0646\u06d2 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0679\u0648\u06a9\u0646 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u06cc\u0627\u060c \u0644\u06cc\u06a9\u0646 \u0628\u0679\u0646 \u06a9\u0648 \u0627\u0633 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0686\u06be\u0648\u0626\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631 \u062f\u06cc\u0627 \u06af\u06cc\u0627\u06d4 \u062c\u0627\u0631\u06cc \u0631\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0642\u062f\u0631 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-step-3-read-three-core-components\">\u0645\u0631\u062d\u0644\u06c1 3: \u062a\u06cc\u0646 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0627\u062c\u0632\u0627\u0621 \u067e\u0691\u06be\u06cc\u06ba<\/h2>\n<p>\u0627\u0633\u0679\u0627\u0631\u0679 \u0627\u067e \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u062a\u06cc\u0646 \u0627\u062c\u0632\u0627\u0621 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>Text<\/code>, <code>Button<\/code>\u0627\u0648\u0631 <code>Icon<\/code>. \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0628\u0646\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0622\u0626\u06cc\u06d2 \u0627\u0633\u06d2 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0686\u0646\u062f \u0645\u0646\u0679 \u0646\u06a9\u0627\u0644\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u0627 \u0646\u0645\u0648\u0646\u06c1 \u0645\u062a\u0639\u0627\u0631\u0641 \u06a9\u0631\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0633\u06d2 \u0631\u062c\u0633\u0679\u0631\u06cc \u06a9\u06d2 \u062f\u0648\u0633\u0631\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0645\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u062f\u06cc\u06a9\u06be\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-the-text-component\">\u0645\u062a\u0646 \u06a9\u0627 \u062c\u0632\u0648<\/h3>\n<p>React Native \u0645\u06cc\u06ba\u060c \u0633\u0679\u0627\u0626\u0644\u0632 CSS \u06a9\u06cc \u0637\u0631\u062d \u062c\u06be\u0691\u067e \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0645\u062a\u0646 \u06a9\u0627 \u0631\u0646\u06af \u0633\u06cc\u0679 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>View<\/code>\u0627\u0633 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u06a9\u0627 \u0645\u062a\u0646 \u0627\u0633 \u0631\u0646\u06af \u06a9\u0627 \u0648\u0627\u0631\u062b \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0645\u0633\u0626\u0644\u06c1 \u06c1\u06d2 \u062c\u06cc\u0633\u06d2: <code><button variant=\"destructive\"\/><\/code>\u0644\u06cc\u0628\u0644 \u0633\u0641\u06cc\u062f \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u0644\u06cc\u0628\u0644 \u06c1\u06d2 <code>Text<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u0627 \u062c\u0632\u0648 \u06c1\u06d2 \u062c\u0633\u06d2 \u0628\u0679\u0646 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 \u0628\u0679\u0646 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0622\u062a\u0627 \u06c1\u06d2\u06d4 <code>children<\/code>. \u0648\u06cc\u0628 \u067e\u0631\u060c \u0628\u0679\u0646 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0627\u06cc\u06a9 \u0631\u0646\u06af \u0633\u06cc\u0679 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0644\u06cc\u0628\u0644 \u067e\u0631 \u062c\u0627\u0646\u06d2 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>React Native Reusables React \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633 \u0645\u0633\u0626\u0644\u06d2 \u06a9\u0648 \u062d\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u06c1\u06d2 <code>components\/ui\/text.tsx<\/code>:<\/p>\n<pre><code class=\"language-tsx\">const TextClassContext = React.createContext<string undefined=\"\">(undefined);\n\nfunction Text({ className, asChild = false, variant=\"default\", ...props }) {\n  const textClass = React.useContext(TextClassContext);\n  const Component = asChild ? Slot : RNText;\n  return (\n    <component classname=\"{cn(textVariants({\" variant=\"\" textclass=\"\" role=\"{variant\" :=\"\" undefined=\"\" aria-level=\"{variant\" aria_level=\"\"\/>\n  );\n}\n<\/string><\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u0628\u0646\u06cc\u0627\u062f\u06cc \u062c\u0632\u0648\u060c \u062c\u06cc\u0633\u06d2 \u0628\u0679\u0646\u060c \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u0645\u06cc\u06ba \u06a9\u0644\u0627\u0633 \u0633\u0679\u0631\u0646\u06af \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4 \u06c1\u0631 <code>Text<\/code> \u0627\u0646\u062f\u0631\u060c \u06c1\u0645 \u0627\u0633 \u062a\u0627\u0631 \u06a9\u0648 \u067e\u0691\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0644\u0627\u06af\u0648 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba. \u0645\u06cc\u0631\u0627 \u0627\u067e\u0646\u0627 <code>className<\/code> \u0686\u0648\u0646\u06a9\u06c1 \u0622\u067e \u0622\u062e\u0631\u06cc \u0628\u0627\u0631 \u0622\u0626\u06d2 \u06c1\u06cc\u06ba\u060c \u0622\u067e \u0627\u0628 \u0628\u06be\u06cc \u062c\u06cc\u062a \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>cn()<\/code> \u06a9\u0627\u0644<\/p>\n<p>\u06a9\u06c1 <code>Text<\/code> \u0627\u062c\u0632\u0627\u0621 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba: <code>variant<\/code> \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u0631\u0648\u067e\u0633: <code>h1<\/code> \u06a9\u0648 <code>h4<\/code>, <code>p<\/code>, <code>code<\/code>, <code>lead<\/code>, <code>large<\/code>, <code>small<\/code>\u0627\u0648\u0631 <code>muted<\/code>. \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 <code><text variant=\"muted\"\/><\/code> \u06c1\u0645 \u0627\u06cc\u06a9 \u0645\u0648\u0628\u0627\u0626\u0644 \u0648\u0631\u0698\u0646 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>text-muted-foreground text-sm<\/code>. \u0645\u062a\u063a\u06cc\u0631 \u0628\u06be\u06cc \u06c1\u06d2\u06d4 <code>role<\/code> \u0627\u0648\u0631 <code>aria-level<\/code> \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0631\u067e\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0631\u06cc\u0688\u0631\u0632 \u0628\u063a\u06cc\u0631 \u06a9\u0633\u06cc \u0627\u0636\u0627\u0641\u06cc \u06a9\u0627\u0645 \u06a9\u06d2 \u0622\u067e \u06a9\u06d2 \u0639\u0646\u0648\u0627\u0646 \u06a9\u0648 \u0635\u062d\u06cc\u062d \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u067e\u0691\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-the-button-component\">\u0628\u0679\u0646 \u06a9\u0627 \u062c\u0632\u0648<\/h3>\n<p>\u0628\u0679\u0646 <code>components\/ui\/button.tsx<\/code> \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>cva<\/code> (class-variance-authority) \u06cc\u06c1 \u0648\u06cc\u0628 \u0648\u0631\u0698\u0646 \u062c\u06cc\u0633\u0627 \u06c1\u06cc \u06c1\u06d2\u06d4 \u0645\u062e\u062a\u0635\u0631 \u0648\u0631\u0698\u0646 \u06cc\u06c1 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-tsx\">const buttonVariants = cva(\n  cn(\n    'group shrink-0 flex-row items-center justify-center gap-2 rounded-md shadow-none',\n    Platform.select({\n      web: \"focus-visible:border-ring focus-visible:ring-ring\/50 ... transition-all\",\n    })\n  ),\n  {\n    variants: {\n      variant: {\n        default: cn(\n          'bg-primary active:bg-primary\/90 shadow-sm shadow-black\/5',\n          Platform.select({ web: 'hover:bg-primary\/90' })\n        ),\n        \/* ... *\/\n      },\n    },\n  }\n);\n<\/code><\/pre>\n<p>\u0648\u06cc\u0628 \u0648\u0631\u0698\u0646 \u0633\u06d2 \u0686\u0627\u0631 \u0641\u0631\u0642 \u06c1\u06cc\u06ba\u06d4<\/p>\n<ul>\n<li><code>flex-row<\/code> <strong>\u06cc\u06c1 \u0627\u0633 \u0637\u0631\u062d \u0644\u06a9\u06be\u0627 \u06c1\u06d2:<\/strong> React Native \u0628\u0686\u0648\u06ba \u06a9\u0648 \u06a9\u0627\u0644\u0645\u0648\u06ba \u0645\u06cc\u06ba \u0628\u0637\u0648\u0631 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0648 CSS \u06a9\u06d2 \u0628\u0631\u0639\u06a9\u0633 \u06c1\u06d2\u06d4 \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u062a\u0645\u0627\u0645 \u0627\u0641\u0642\u06cc \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba: <code>flex-row<\/code> \u0627\u0633 \u0644\u06cc\u06d2<\/li>\n<li><code>active:<\/code> <strong>\u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba<\/strong> <code>hover:<\/code><strong>:<\/strong> \u0627\u0646\u06af\u0644\u06cc\u0627\u06ba \u062f\u0631\u0627\u0635\u0644 \u0645\u0646\u0688\u0644\u0627 \u0646\u06c1\u06cc\u06ba \u0633\u06a9\u062a\u06cc\u06ba\u06d4 <code>active:<\/code> \u0641\u0648\u0646 \u067e\u06a9\u0691\u0648\u06d4<\/li>\n<li><strong>\u0635\u0631\u0641 \u0648\u06cc\u0628 \u06a9\u0644\u0627\u0633\u0648\u06ba \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba:<\/strong> <code>Platform.select<\/code><strong>:<\/strong> \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0644\u0627\u0633\u0632 <code>focus-visible:ring-[3px]<\/code> React Native \u0645\u06cc\u06ba \u0627\u0633 \u06a9\u0627 \u06a9\u0648\u0626\u06cc \u0645\u0637\u0644\u0628 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u06cc\u06c1 \u0635\u0631\u0641 \u0648\u06cc\u0628 \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0631 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06d2\u06d4<\/li>\n<li><strong>\u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba<\/strong> <code>TextClassContext.Provider<\/code> <strong>\u0679\u06a9<\/strong> <code>Pressable<\/code><strong>:<\/strong> \u06cc\u06c1 \u067e\u0686\u06be\u0644\u06d2 \u062d\u0635\u06d2 \u06a9\u06d2 \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u06cc\u06c1\u0627\u06ba \u06a9\u06cc\u0648\u06ba \u06c1\u06d2: <code><button variant=\"destructive\"><text>Delete<\/text><\/button><\/code> \u0633\u0641\u06cc\u062f \u0645\u062a\u0646 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/li>\n<\/ul>\n<h3 id=\"heading-the-icon-component\">\u0622\u0626\u06cc\u06a9\u0646 \u0639\u0646\u0635\u0631<\/h3>\n<p>\u0622\u0626\u06cc\u06a9\u0646 <code>lucide-react-native<\/code> \u0644\u06d2 <code>color<\/code> \u0627\u0648\u0631 <code>size<\/code> \u0627\u06cc\u06a9 \u0633\u06c1\u0627\u0631\u06d2 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0646\u06c1\u06cc\u06ba\u06d4 \u06a9\u06c1 <code>Icon<\/code> \u062c\u0632\u0648 <code>components\/ui\/icon.tsx<\/code> \u06cc\u0648\u0646\u06cc \u0648\u0650\u0646\u0688 \u06a9\u0648 \u0633\u06a9\u06be\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0627\u06cc\u06a9 \u0686\u06cc\u0632 \u06a9\u0648 \u062f\u0648\u0633\u0631\u06cc \u0686\u06cc\u0632 \u0645\u06cc\u06ba \u06a9\u06cc\u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n<pre><code class=\"language-tsx\">const StyledIcon = withUniwind(IconImpl, {\n  size: { fromClassName: 'className', styleProperty: 'width' },\n  color: { fromClassName: 'className', styleProperty: 'color' },\n});\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u06a9\u0648\u0688 <code>width<\/code> \u0627\u067e\u0646\u06cc \u06a9\u0644\u0627\u0633 \u0633\u0679\u0631\u0646\u06af \u0645\u06cc\u06ba\u060c \u0622\u067e \u0627\u0633\u06d2 \u0627\u0633 \u0637\u0631\u062d \u067e\u0627\u0633 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba: <code>size<\/code>\u0627\u0648\u0631 \u06cc\u06c1 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2 <code>color<\/code> \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0627\u0633 \u0637\u0631\u062d \u067e\u0627\u0633 \u06a9\u0631\u06cc\u06ba: <code>color<\/code>. \u0627\u0633\u06cc \u0644\u06cc\u06d2 <code><icon as=\"{PlusIcon}\" classname=\"size-4 text-muted-foreground\"\/><\/code> \u06cc\u06c1 \u062a\u0648\u0642\u0639 \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>withUniwind<\/code> \u06cc\u06c1 \u0627\u0633 \u0648\u0642\u062a \u0645\u0641\u06cc\u062f \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0628\u06be\u06cc \u0622\u067e \u0641\u0631\u06cc\u0642 \u062b\u0627\u0644\u062b \u06a9\u0627 \u06a9\u0648\u0626\u06cc \u0627\u06cc\u0633\u0627 \u062c\u0632\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0633 \u0633\u06d2 \u0622\u067e \u062c\u06c1\u0627\u06ba \u06a9\u0644\u0627\u0633 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u0648\u06c1\u0627\u06ba \u067e\u0631\u067e\u0633 \u062d\u0627\u0635\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u0648 \u0627\u0633 \u0645\u0631\u062d\u0644\u06d2 \u067e\u0631 \u06a9\u0686\u06be \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u06c1\u0645 \u062d\u0635\u06c1 \u06cc\u06c1 \u0633\u0645\u062c\u06be\u0646\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u06cc\u0627 \u06c1\u06d2\u06d4 <code>TextClassContext<\/code> \u0627\u0633 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0631\u062c\u0633\u0679\u0631\u06cc \u06a9\u06d2 \u0645\u062e\u062a\u0644\u0641 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u0646\u0627 \u0628\u06c1\u062a \u0622\u0633\u0627\u0646 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-4-add-the-components-you-need\">\u0645\u0631\u062d\u0644\u06c1 4: \u0645\u0637\u0644\u0648\u0628\u06c1 \u0627\u062c\u0632\u0627\u0621 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u0645\u06cc\u06ba \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u062a\u06cc\u0646 \u0627\u062c\u0632\u0627\u0621 \u06c1\u06cc\u06ba: \u0627\u062f\u0627\u0626\u06cc\u06af\u06cc \u06a9\u06cc \u0633\u06a9\u0631\u06cc\u0646 \u06a9\u0648 \u06a9\u0686\u06be \u0627\u0648\u0631 \u0686\u06cc\u0632\u0648\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 CLI \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0633\u0628 \u06a9\u0686\u06be \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-bash\">pnpm dlx @react-native-reusables\/cli@latest add card separator input label select switch badge alert-dialog avatar\n<\/code><\/pre>\n<p>CLI \u067e\u062a\u06c1 \u0644\u06af\u0627\u0626\u06d2 \u06af\u0627 \u06a9\u06c1 \u0622\u067e Uniwind \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0645\u0645\u0627\u062b\u0644 \u0648\u0631\u0698\u0646 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4 \u06cc\u06c1 \u0622\u067e \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06a9\u06cc \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u0628\u06be\u06cc \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>@rn-primitives<\/code> \u067e\u06cc\u06a9\u06cc\u062c \u0627\u0648\u0631 \u0646\u0627\u0645 \u06a9\u06cc \u0641\u0627\u0626\u0644 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <code>native-only-animated-view.tsx<\/code>\u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 AlertDialog \u0627\u0633\u06d2 \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u0624\u0679 \u067e\u0679 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-plaintext\">&#x2139; Styling Library: Uniwind\n&#x2714; Created 10 files:\n  - components\/ui\/separator.tsx\n  - components\/ui\/input.tsx\n  - components\/ui\/label.tsx\n  - components\/ui\/switch.tsx\n  - components\/ui\/avatar.tsx\n  - components\/ui\/native-only-animated-view.tsx\n  - components\/ui\/card.tsx\n  - components\/ui\/badge.tsx\n  - components\/ui\/select.tsx\n  - components\/ui\/alert-dialog.tsx\n&#x2139; Skipped 3 files: (files might be identical, use --overwrite to overwrite)\n  - components\/ui\/text.tsx\n  - components\/ui\/icon.tsx\n  - components\/ui\/button.tsx\n<\/code><\/pre>\n<p>CLI \u0646\u06d2 10 \u0641\u0627\u0626\u0644\u06cc\u06ba \u062a\u06cc\u0627\u0631 \u06a9\u06cc\u06ba\u060c \u062c\u0648 \u06a9\u06c1 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0631\u062f\u06c1 9 \u0641\u0627\u0626\u0644\u0648\u06ba \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06c1\u06cc\u06ba\u06d4 <code>native-only-animated-view.tsx<\/code> \u0633\u0644\u06cc\u06a9\u0679 \u0627\u0648\u0631 \u0627\u0644\u0631\u0679 \u0688\u0627\u0626\u06cc\u0644\u0627\u06af \u06a9\u0627 \u0627\u0646\u062d\u0635\u0627\u0631\u06d4 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u0646\u06d2 \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062f\u06c1 \u062a\u06cc\u0646 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0686\u06be\u0648\u0691 \u062f\u06cc\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u06a9\u0627\u067e\u06cc\u0627\u06ba \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u0679 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u06ba \u06af\u06cc\u06d4 \u06cc\u06c1 \u06a9\u0627\u0645 \u06a9\u06cc \u062c\u06af\u06c1 \u067e\u0631 &quot;\u0641\u0627\u0626\u0644 \u06a9\u06d2 \u0645\u0627\u0644\u06a9 \u06c1\u06cc\u06ba&#8221; \u06a9\u0627 \u062e\u06cc\u0627\u0644 \u06c1\u06d2\u06d4<\/p>\n<p>\u0686\u0644\u0627\u0626\u06cc\u06ba <code>pnpm dev<\/code> \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u067e\u06be\u0631\u060c \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0622\u06cc\u0627 \u0627\u06cc\u067e \u0644\u0627\u0646\u0686 \u06c1\u0648\u062a\u06cc \u0631\u06c1\u062a\u06cc \u06c1\u06d2\u06d4 \u06a9\u06c1 <code>components\/ui\/<\/code> \u0641\u0648\u0644\u0688\u0631 \u0645\u06cc\u06ba \u0627\u0628 13 \u0641\u0627\u0626\u0644\u06cc\u06ba \u06c1\u0648\u0646\u06cc \u0686\u0627\u06c1\u0626\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-step-5-set-up-the-data-and-the-screen\">\u0645\u0631\u062d\u0644\u06c1 5: \u0688\u06cc\u0679\u0627 \u0627\u0648\u0631 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a<\/h2>\n<p>\u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u06c1 \u06c1\u0645 UI \u0628\u0646\u0627\u0646\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u060c \u0622\u0626\u06cc\u06d2 \u06a9\u0686\u06be \u0646\u0645\u0648\u0646\u06c1 \u0645\u06cc\u0646\u0648 \u0688\u06cc\u0679\u0627 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06cc \u062d\u0627\u0644\u062a\u06cc\u06ba \u06a9\u06c1\u0627\u06ba \u0638\u0627\u06c1\u0631 \u06c1\u0648\u06ba \u06af\u06cc\u06d4 \u0622\u0626\u06cc\u06d2 \u0642\u06cc\u0645\u062a\u0648\u06ba \u06a9\u0648 \u0641\u0644\u0648\u0679\u0646\u06af \u067e\u0648\u0627\u0626\u0646\u0679 \u0646\u0645\u0628\u0631\u0632 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0633\u06cc\u0646\u0679 \u0645\u06cc\u06ba \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u062d\u0633\u0627\u0628 \u06a9\u06d2 \u0646\u062a\u0627\u0626\u062c \u06a9\u0648 \u0631\u0648\u06a9\u062a\u0627 \u06c1\u06d2: <code>$4.7499999<\/code>.<\/p>\n<p>\u06cc\u06c1 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06d2 \u0645\u0631\u06a9\u0632\u06cc \u062c\u0632\u0648 \u06a9\u06cc \u062d\u0627\u0644\u062a \u06a9\u0648 \u0628\u06be\u06cc \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u062a\u0639\u0644\u0642\u06c1 \u0627\u0642\u062f\u0627\u0631 \u06a9\u0648 \u067e\u0631\u067e\u0633 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u067e\u0627\u0633 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u0637\u0631\u062d\u060c \u0622\u067e \u06a9\u06cc \u0627\u0646\u0648\u0627\u0626\u0633 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0627\u067e \u0688\u06cc\u0679 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u06cc \u062c\u0628 \u0622\u067e \u0622\u0626\u0679\u0645 \u06a9\u06cc \u0645\u0642\u062f\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u06cc\u0627 \u0627\u067e\u0646\u0627 \u06a9\u067e \u0622\u067e\u0634\u0646 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0628\u0646\u0627\u0646\u0627 <code>lib\/menu.ts<\/code>:<\/p>\n<pre><code class=\"language-tsx\">export type CartItem = {\n  id: string;\n  name: string;\n  detail: string;\n  size?: 'Small' | 'Medium' | 'Large';\n  emoji: string;\n  \/** Cents. Money in floats is how you end up charging someone $4.7499999. *\/\n  unitPrice: number;\n  qty: number;\n};\n\nexport const INITIAL_CART: CartItem[] = [\n  {\n    id: 'flat-white',\n    name: 'Flat white',\n    detail: 'Oat milk, extra shot',\n    size: 'Medium',\n    emoji: '&#x2615;',\n    unitPrice: 475,\n    qty: 2,\n  },\n  {\n    id: 'cold-brew',\n    name: 'Cold brew',\n    detail: 'Hold the ice',\n    size: 'Large',\n    emoji: '&#x1f9cb;',\n    unitPrice: 525,\n    qty: 1,\n  },\n  {\n    id: 'croissant',\n    name: 'Almond croissant',\n    detail: 'Warmed',\n    emoji: '&#x1f950;',\n    unitPrice: 390,\n    qty: 1,\n  },\n];\n\nexport const PICKUP_TIMES = [\n  { value: 'asap', label: 'As soon as it is ready' },\n  { value: '15', label: 'In 15 minutes' },\n  { value: '30', label: 'In 30 minutes' },\n  { value: '60', label: 'In an hour' },\n];\n\nexport const CUP_DISCOUNT = 25;\nexport const TAX_RATE = 0.0825;\n\nexport function money(cents: number) {\n  const sign = cents < 0 ? '-' : '';\n  return `${sign}$${(Math.abs(cents) \/ 100).toFixed(2)}`;\n}\n\nexport function billFor(items: CartItem[], ownCup: boolean) {\n  const subtotal = items.reduce((sum, item) => sum + item.unitPrice * item.qty, 0);\n  const discount = ownCup && subtotal > 0 ? CUP_DISCOUNT : 0;\n  const tax = Math.round((subtotal - discount) * TAX_RATE);\n\n  return { subtotal, discount, tax, total: subtotal - discount + tax };\n}\n<\/code><\/pre>\n<p>\u06a9\u06c1 <code>PICKUP_TIMES<\/code> \u0641\u06c1\u0631\u0633\u062a \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u06a9\u06cc \u0628\u062c\u0627\u0626\u06d2 \u0627\u0633 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0627\u0633\u06d2 \u062f\u0648 \u0645\u062e\u062a\u0644\u0641 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0622\u067e \u0645\u0631\u062d\u0644\u06c1 7 \u0645\u06cc\u06ba \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u062c\u0627\u0646 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-the-screen-layout\">\u0633\u06a9\u0631\u06cc\u0646 \u0644\u06d2 \u0622\u0624\u0679<\/h3>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06cc\u06c1 \u0627\u0633 \u0637\u0631\u062d \u06c1\u06d2\u06d4 <code>app\/index.tsx<\/code> \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0633\u06cc \u0627\u06cc\u0633\u06d2 \u062d\u0635\u06d2 \u067e\u0631 \u062a\u0628\u0635\u0631\u06c1 \u06a9\u0631\u06cc\u06ba \u062c\u0648 \u0627\u0628\u06be\u06cc \u062a\u06a9 \u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0622\u067e \u0628\u0639\u062f \u0645\u06cc\u06ba \u0645\u0631\u062d\u0644\u06c1 10 \u0645\u06cc\u06ba \u067e\u0648\u0631\u06cc \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<pre><code class=\"language-tsx\"><view classname=\"bg-background flex-1\">\n  <scrollview classname=\"flex-1\" contentcontainerclassname=\"gap-4 p-4 pb-8\" keyboardshouldpersisttaps=\"handled\" automaticallyadjustkeyboardinsets=\"\">\n    {\/* the three cards *\/}\n  <\/scrollview>\n\n  <checkoutbar\/>\n<\/view>\n<\/code><\/pre>\n<p>\u0627\u0633 \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba \u062a\u06cc\u0646 \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06c1\u06cc\u06ba \u062c\u0646 \u06a9\u0627 \u0645\u0632\u06cc\u062f \u0628\u0627\u0631\u06cc\u06a9 \u0628\u06cc\u0646\u06cc \u0633\u06d2 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<ul>\n<li>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 <code>className<\/code> \u06a9\u0648 <code>ScrollView<\/code> \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646\u0679\u06cc\u0646\u0631 \u06a9\u0648 \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0645\u0648\u0627\u062f \u06a9\u0648 \u0646\u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645 \u06a9\u0627 \u0648\u0631\u0698\u0646 \u06c1\u06d2\u06d4 <code>style<\/code> \u0627\u0648\u0631 <code>contentContainerStyle<\/code> React Native \u0645\u06cc\u06ba \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u067e\u06cc\u0688\u0646\u06af \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <code>className<\/code>\u06a9\u0627\u0679 <code>gap<\/code> \u06cc\u06c1 \u06a9\u0627\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627\u06d4 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>contentContainerClassName<\/code> \u06c1\u0631 \u0627\u0633 \u0686\u06cc\u0632 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u062c\u0648 \u0622\u067e \u06a9\u06d2 \u0645\u0648\u0627\u062f \u067e\u0631 \u0644\u0627\u06af\u0648 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2\u06d4 \u06cc\u0648\u0646\u06cc \u0648\u0646\u0688 \u0627\u0633 \u067e\u0631\u0648\u067e \u06a9\u0648 \u0627\u0633 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>ScrollView<\/code>.<\/li>\n<li>\u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 <code>space-y-4<\/code>. \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u0645\u06cc\u06ba <code>space-y-*<\/code> \u06cc\u06c1 \u0628\u06c1\u0646 \u0628\u06be\u0627\u0626\u06cc\u0648\u06ba \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06a9\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c React Native \u0645\u06cc\u06ba \u0633\u0644\u06cc\u06a9\u0679\u0631\u0632 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>gap-4<\/code> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c iOS\u060c Android\u060c \u0627\u0648\u0631 \u0648\u06cc\u0628 \u06a9\u06cc \u062d\u0645\u0627\u06cc\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be React Native \u0633\u0628 \u0633\u06d2 \u0627\u0648\u067e\u0631 \u06c1\u06d2\u06d4<\/li>\n<li><code>keyboardShouldPersistTaps=\"handled\"<\/code>    \u062c\u0628 \u062a\u06a9 \u06a9\u06cc \u0628\u0648\u0631\u0688 \u06a9\u06be\u0644\u0627 \u0631\u06c1\u06d2 \u06af\u0627 \u062a\u0628 \u062a\u06a9 \u0679\u06cc\u0628\u0632 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u0631\u06c1\u06cc\u06ba \u06af\u06cc\u06d4 \u0628\u0635\u0648\u0631\u062a \u062f\u06cc\u06af\u0631\u060c \u06a9\u06cc \u0628\u0648\u0631\u0688 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u067e\u06c1\u0644\u0627 \u0646\u0644 \u0627\u0633\u06d2 \u0628\u0646\u062f \u06a9\u0631 \u062f\u06d2 \u06af\u0627\u060c \u062c\u0633 \u0633\u06d2 \u0635\u0627\u0631\u0641 \u06a9\u0648 \u062f\u0648 \u0628\u0627\u0631 \u0679\u06cc\u067e \u06a9\u0631\u0646\u06d2 \u067e\u0631 \u0645\u062c\u0628\u0648\u0631 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4 <code>automaticallyAdjustKeyboardInsets<\/code> \u0627\u06cc\u06a9 iOS \u062e\u0635\u0648\u0635\u06cc\u062a \u062c\u0648 \u0645\u0648\u0627\u062f \u06a9\u0648 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0641\u0648\u06a9\u0633\u0688 \u0627\u0646 \u067e\u0679 \u06a9\u06cc \u0628\u0648\u0631\u0688 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u0686\u06be\u067e\u0627 \u0646\u06c1 \u0631\u06c1\u06d2\u06d4<\/li>\n<\/ul>\n<p>\u0627\u0633 \u0645\u0631\u062d\u0644\u06d2 \u067e\u0631\u060c \u0622\u067e \u06a9\u0648 \u0635\u0631\u0641 \u0646\u0626\u06d2 \u0639\u0646\u0648\u0627\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u06c1\u06cc\u0688\u0631 \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u0627\u06cc\u06a9 \u062e\u0627\u0644\u06cc \u0635\u0641\u062d\u06c1 \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915218_326_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u0646\u0626\u06d2 \u06c1\u06cc\u0688\u0631 \u0679\u0627\u0626\u0679\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062e\u0627\u0644\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-step-6-build-the-order-rows\">\u0645\u0631\u062d\u0644\u06c1 6: \u0622\u0631\u0688\u0631 \u06a9\u06cc \u0642\u0637\u0627\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u06cc \u0633\u06cc \u062c\u06af\u06c1 \u067e\u0631 \u0622\u0631\u0688\u0631 \u0644\u0627\u0626\u0646 \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u0686\u0644 \u0631\u06c1\u06cc \u06c1\u06d2\u060c \u0628\u0634\u0645\u0648\u0644 \u0627\u0648\u062a\u0627\u0631\u060c \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u06d2 \u0646\u0627\u0645\u060c \u0633\u0627\u0626\u0632 \u06a9\u06d2 \u0628\u06cc\u062c\u0632\u060c \u0642\u06cc\u0645\u062a\u0648\u06ba \u06a9\u0627 \u062a\u0639\u06cc\u0646\u060c \u0627\u0648\u0631 \u0645\u0642\u062f\u0627\u0631 \u06a9\u0627 \u06a9\u0646\u0679\u0631\u0648\u0644\u06d4 \u0644\u0645\u0628\u06d2 \u0646\u0627\u0645 \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u0645\u0648\u0628\u0627\u0626\u0644 \u0641\u0648\u0646 \u067e\u0631 \u0645\u0634\u06a9\u0644 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u06c1\u0645 \u062a\u0631\u062a\u06cc\u0628 \u06a9\u0648 \u0627\u062d\u062a\u06cc\u0627\u0637 \u0633\u06d2 \u0633\u0646\u0628\u06be\u0627\u0644\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0628\u0646\u0627\u0646\u0627 <code>components\/cart\/order-row.tsx<\/code>:<\/p>\n<pre><code class=\"language-tsx\">import { Avatar, AvatarFallback } from '@\/components\/ui\/avatar';\nimport { Badge } from '@\/components\/ui\/badge';\nimport { Button } from '@\/components\/ui\/button';\nimport { Icon } from '@\/components\/ui\/icon';\nimport { Text } from '@\/components\/ui\/text';\nimport { money, type CartItem } from '@\/lib\/menu';\nimport { MinusIcon, PlusIcon, Trash2Icon } from 'lucide-react-native';\nimport { View } from 'react-native';\n\ntype OrderRowProps = {\n  item: CartItem;\n  onChangeQty: (id: string, qty: number) => void;\n};\n\nexport function OrderRow({ item, onChangeQty }: OrderRowProps) {\n  const lastOne = item.qty <= 1;\n\n  return (\n    <view classname=\"flex-row gap-3\">\n      <avatar alt=\"{item.name}\" classname=\"size-14 rounded-2xl\">\n        <avatarfallback classname=\"bg-muted rounded-2xl\">\n          <text classname=\"text-2xl\">{item.emoji}<\/text>\n        <\/avatarfallback>\n      <\/avatar>\n\n      <view classname=\"flex-1 gap-2\">\n        <view classname=\"flex-row items-start gap-3\">\n          <view classname=\"flex-1 gap-1\">\n            <view classname=\"flex-row items-center gap-2\">\n              <text numberoflines=\"{1}\" classname=\"shrink font-medium\">\n                {item.name}\n              <\/text>\n              {item.size ? (\n                <badge variant=\"secondary\">\n                  <text>{item.size}<\/text>\n                <\/badge>\n              ) : null}\n            <\/view>\n            <text numberoflines=\"{1}\" variant=\"muted\">\n              {item.detail}\n            <\/text>\n          <\/view>\n          <text classname=\"text-sm font-medium tabular-nums\">\n            {money(item.unitPrice * item.qty)}\n          <\/text>\n        <\/view>\n\n        <view classname=\"border-border flex-row items-center gap-1 self-start rounded-full border p-0.5\">\n          <button size=\"icon\" variant=\"ghost\" hitslop=\"{8}\" classname=\"size-7 rounded-full\" accessibilitylabel=\"{lastOne\" :=\"\" fewer=\"\" onpress=\"{()\"> onChangeQty(item.id, item.qty - 1)}>\n            <icon as=\"{lastOne\" trash2icon=\"\" :=\"\" minusicon=\"\" classname=\"size-4\"\/>\n          <\/button>\n          <text classname=\"w-5 text-center text-sm font-medium tabular-nums\">{item.qty}<\/text>\n          <button size=\"icon\" variant=\"ghost\" hitslop=\"{8}\" classname=\"size-7 rounded-full\" accessibilitylabel=\"{`One\" more=\"\" onpress=\"{()\"> onChangeQty(item.id, item.qty + 1)}>\n            <icon as=\"{PlusIcon}\" classname=\"size-4\"\/>\n          <\/button>\n        <\/view>\n      <\/view>\n    <\/view>\n  );\n}\n<\/code><\/pre>\n<p>\u0627\u0633 \u062c\u0632\u0648 \u06a9\u06cc \u06a9\u0686\u06be \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u067e\u0631 \u06af\u06c1\u0631\u06cc \u0646\u0638\u0631 \u0688\u0627\u0644\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06d2\u06d4<\/p>\n<p>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 <code>Avatar<\/code> \u0645\u0637\u0627\u0644\u0628\u06c1 <code>alt<\/code> \u0633\u06c1\u0627\u0631\u06d2 TypeScript \u0627\u0633 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0645\u0631\u062a\u0628 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u06af\u0627\u06d4 \u0642\u062f\u0631 \u0627\u06cc\u06a9 \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc \u0644\u06cc\u0628\u0644 \u0628\u0646 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0631\u06cc\u0688\u0631\u0632 &#8216;\u062a\u0635\u0648\u06cc\u0631&#8217; \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0635\u0631\u0641 &#8216;\u0641\u0644\u06cc\u0679 \u0633\u0641\u06cc\u062f&#8217; \u06a9\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0631\u062f\u0627\u0633 \u06a9\u0648 \u0627\u0648\u062a\u0627\u0631 \u0641\u0627\u0644 \u0628\u06cc\u06a9 \u0645\u06cc\u06ba \u062f\u06c1\u0631\u0627\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 <code>Avatar<\/code> \u0627\u0648\u0631 <code>AvatarFallback<\/code> \u06c1\u0631 \u0627\u06cc\u06a9 \u06c1\u06d2\u06d4 <code>rounded-full<\/code> \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631\u06d4 \u0628\u0633 \u0627\u0633\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba\u06d4 <code>rounded-2xl<\/code> \u06a9\u0648 <code>Avatar<\/code>\u0627\u06cc\u0645\u0648\u062c\u06cc \u06a9\u0627 \u067e\u0633 \u0645\u0646\u0638\u0631 \u062f\u0627\u0626\u0631\u06d2 \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06af\u0648\u0644 \u0645\u0631\u0628\u0639 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u0646\u06a9\u0644 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u0628\u06be\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <code>numberOfLines={1}<\/code> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 <code>truncate<\/code>. \u0679\u06cc\u0644 \u0648\u0646\u0688 \u06a9\u0627 <code>truncate<\/code> \u067e\u0631 \u0628\u06be\u0631\u0648\u0633\u06c1 \u06a9\u0631\u06cc\u06ba <code>text-overflow: ellipsis<\/code>React Native \u0627\u0633 \u06a9\u06cc \u062d\u0645\u0627\u06cc\u062a \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 Uniwind \u0627\u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0644\u0627\u0633\u0632 \u06a9\u0648 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0686\u06cc\u0632 \u0645\u06cc\u06ba \u0645\u0631\u062a\u0628 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u062a\u0646\u06d2 \u0644\u0645\u0628\u06d2 \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u06d2 \u0646\u0627\u0645 \u0642\u06cc\u0645\u062a\u0648\u06ba \u06a9\u0648 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0633\u06d2 \u062f\u0648\u0631 \u06a9\u0631 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u06c1 <code>numberOfLines<\/code> \u067e\u0631\u067e\u0633 \u0627\u06cc\u0633\u0627 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0645\u0642\u0627\u0645\u06cc \u0637\u0631\u06cc\u0642\u06c1 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0648\u06c1 \u0648\u06cc\u0628 \u0628\u0644\u0688\u0632 \u0645\u06cc\u06ba \u0628\u06be\u06cc \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0646\u0627\u0645 \u0645\u06cc\u06ba <code>shrink<\/code> \u0627\u0648\u0631 \u0627\u0633 \u06a9\u0627\u0644\u0645 \u0645\u06cc\u06ba <code>flex-1<\/code>. \u0628\u063a\u06cc\u0631 <code>shrink<\/code>\u0644\u0645\u0628\u06d2 \u0646\u0627\u0645 \u0686\u06be\u0648\u0679\u06d2 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u06ba \u06af\u06d2 \u0627\u0648\u0631 \u0628\u06cc\u062c \u06a9\u0648 \u0642\u0637\u0627\u0631 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u062f\u06be\u06a9\u06cc\u0644 \u062f\u06cc\u06ba \u06af\u06d2\u06d4 \u06cc\u06c1 \u0639\u0627\u0645 Flexbox \u06a9\u0627 \u0631\u0648\u06cc\u06c1 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0641\u0648\u0646\u0632 \u067e\u0631 \u0632\u06cc\u0627\u062f\u06c1 \u0646\u0638\u0631 \u0622\u062a\u0627 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0686\u0648\u0691\u0627\u0626\u06cc \u06a9\u0645 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p><code>hitSlop={8}<\/code>    \u0686\u06be\u0648\u0679\u06d2 \u0628\u0679\u0646\u0648\u06ba \u06a9\u0648 \u0679\u06cc\u067e \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u06d4 \u0627\u06cc\u067e\u0644 \u06a9\u0645 \u0627\u0632 \u06a9\u0645 44 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u06a9\u06d2 \u0679\u0686 \u06c1\u062f\u0641 \u06a9\u06cc \u062a\u062c\u0648\u06cc\u0632 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0628\u06a9\u06c1 \u0627\u06cc\u0646\u0688\u0631\u0627\u0626\u06cc\u0688 48 \u0688\u06cc \u067e\u06cc \u06a9\u06cc \u062a\u062c\u0648\u06cc\u0632 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>size-7<\/code> \u0628\u0679\u0646 \u0635\u0631\u0641 28 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u0686\u0648\u0691\u0627 \u06c1\u06d2\u06d4 \u06a9\u06c1 <code>hitSlop<\/code> \u0633\u06c1\u0627\u0631\u0627 \u0628\u0679\u0646 \u06a9\u06cc \u0634\u06a9\u0644 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0679\u0686 \u0627\u06cc\u0628\u0644 \u0627\u06cc\u0631\u06cc\u0627 \u06a9\u0648 \u0628\u0691\u0627 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0648\u0626\u06cc \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u06a9\u06d2 \u0628\u0631\u0627\u0628\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u06a9\u0627\u0631 <code>tabular-nums<\/code> \u0646\u0645\u0628\u0631\u0648\u06ba \u06a9\u0648 \u0627\u06cc\u06a9 \u06c1\u06cc \u0686\u0648\u0691\u0627\u0626\u06cc \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0641\u0648\u0646\u0679\u0633 \u0645\u06cc\u06ba \u0646\u0645\u0628\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>1<\/code> \u062a\u0646\u06af <code>8<\/code>\u0644\u06c1\u0630\u0627\u060c \u062c\u0628 \u0628\u06be\u06cc \u0645\u0642\u062f\u0627\u0631 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644\u06cc \u0622\u062a\u06cc \u06c1\u06d2\u060c \u0642\u06cc\u0645\u062a \u0627\u06cc\u06a9 \u0637\u0631\u0641 \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u06cc\u0648\u0646\u06cc \u0648\u0646\u0688 \u06a9\u0646\u0648\u0631\u0698\u0646 <code>tabular-nums<\/code> \u0645\u0642\u0627\u0645\u06cc \u0644\u0648\u06af\u0648\u06ba \u06a9\u0627 \u0631\u062f\u0639\u0645\u0644 <code>fontVariant<\/code>\u062a\u0648 \u06cc\u06c1 iOS\u060c Android \u0627\u0648\u0631 \u0648\u06cc\u0628 \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u062c\u0632\u0648 \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u067e\u06cc\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f (\u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u0645\u0631\u062d\u0644\u06c1 10 \u0645\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2)\u060c \u0622\u067e \u06a9\u0648 \u062f\u0631\u062c \u0630\u06cc\u0644 \u062a\u06cc\u0646 \u0642\u0637\u0627\u0631\u06cc\u06ba \u0646\u0638\u0631 \u0622\u0626\u06cc\u06ba \u06af\u06cc\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915218_610_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0642\u0637\u0627\u0631 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba\u06d4\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u062c\u0628 \u0622\u067e \u0641\u0644\u06cc\u0679 \u0648\u0627\u0626\u0679 \u067e\u0631 \u067e\u0644\u0633 \u06a9\u0648 \u062a\u06be\u067e\u062a\u06be\u067e\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0642\u06cc\u0645\u062a \u0627\u0633 \u0633\u06d2 \u0628\u062f\u0644 \u062c\u0627\u0626\u06d2 \u06af\u06cc: <code>$9.50<\/code> \u06a9\u0648 <code>$14.25<\/code>. 1 \u06a9\u06cc \u0645\u0642\u062f\u0627\u0631 \u0648\u0627\u0644\u06cc \u0622\u0626\u0679\u0645 \u067e\u0631 \u0679\u0631\u06cc\u0634 \u06a9\u06cc\u0646 \u0622\u0626\u06cc\u06a9\u0646 \u06a9\u0648 \u0679\u06cc\u067e \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0648\u06c1 \u0642\u0637\u0627\u0631 \u06c1\u0679 \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4 \u062c\u0628 \u0628\u06be\u06cc \u0645\u0642\u062f\u0627\u0631 1 \u062a\u06a9 \u067e\u06c1\u0646\u0686 \u062c\u0627\u062a\u06cc \u06c1\u06d2 \u062a\u0648 \u0645\u0627\u0626\u0646\u0633 \u0628\u0679\u0646 \u06a9\u0648\u0691\u06d2 \u062f\u0627\u0646 \u06a9\u06d2 \u0622\u0626\u06cc\u06a9\u0646 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-7-build-the-pickup-options\">\u0645\u0631\u062d\u0644\u06c1 7: \u067e\u06a9 \u0627\u067e \u06a9\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u067e\u06a9 \u0627\u067e \u06a9\u0627\u0631\u0688 \u062a\u06cc\u0646 \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0622\u062a\u0627 \u06c1\u06d2: \u0633\u0644\u06cc\u06a9\u0679\u060c \u0627\u0646\u0679\u0631\u060c \u0627\u0648\u0631 \u0633\u0648\u0626\u0686\u06d4 \u0627\u0646 \u067e\u0679 \u0627\u0648\u0631 \u0633\u0648\u0626\u0686 \u0628\u06c1\u062a \u0622\u0633\u0627\u0646 \u06c1\u06cc\u06ba\u06d4 \u0633\u0644\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u062a\u06be\u0648\u0691\u06cc \u0632\u06cc\u0627\u062f\u06c1 \u0627\u062d\u062a\u06cc\u0627\u0637 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u0633\u06d2 \u0648\u0627\u0628\u0633\u062a\u06c1 \u062a\u06cc\u0646 \u062e\u0631\u0627\u0628\u06cc\u0627\u06ba \u06c1\u06cc\u06ba\u060c \u062c\u0646 \u0645\u06cc\u06ba \u0633\u06d2 \u062f\u0648 \u062e\u0627\u0645\u0648\u0634\u06cc \u0633\u06d2 \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648\u0646\u06d2 \u06a9\u0627 \u0633\u0628\u0628 \u0628\u0646 \u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0628\u0646\u0627\u0646\u0627 <code>components\/cart\/pickup-card.tsx<\/code>:<\/p>\n<pre><code class=\"language-tsx\">import { Input } from '@\/components\/ui\/input';\nimport { Label } from '@\/components\/ui\/label';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@\/components\/ui\/select';\nimport { Switch } from '@\/components\/ui\/switch';\nimport { Text } from '@\/components\/ui\/text';\nimport { PICKUP_TIMES } from '@\/lib\/menu';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\ntype PickupCardProps = {\n  pickupValue: string;\n  onPickupValueChange: (value: string) => void;\n  name: string;\n  onNameChange: (value: string) => void;\n  ownCup: boolean;\n  onOwnCupChange: (value: boolean) => void;\n};\n\nexport function PickupCard({\n  pickupValue,\n  onPickupValueChange,\n  name,\n  onNameChange,\n  ownCup,\n  onOwnCupChange,\n}: PickupCardProps) {\n  const insets = useSafeAreaInsets();\n  \/\/ Look the label up from our own data. The Option handed back by onValueChange\n  \/\/ does not carry a usable label on web. See the note below.\n  const selected = PICKUP_TIMES.find((time) => time.value === pickupValue);\n  const contentInsets = {\n    top: insets.top,\n    bottom: insets.bottom,\n    left: 16,\n    right: 16,\n  };\n\n  return (\n    <view classname=\"gap-5\">\n      <view classname=\"gap-2\">\n        <label nativeid=\"pickup-time\">Pickup time<\/label>\n        <select value=\"{selected}\" onvaluechange=\"{(option)\"> {\n            if (option) {\n              onPickupValueChange(option.value);\n            }\n          }}>\n          <selecttrigger classname=\"w-full\" aria-labelledby=\"pickup-time\">\n            <selectvalue placeholder=\"Pick a time\"\/>\n          <\/selecttrigger>\n          <selectcontent insets=\"{contentInsets}\" classname=\"w-full\">\n            {PICKUP_TIMES.map((time) => (\n              <selectitem key=\"{time.value}\" value=\"{time.value}\" label=\"{time.label}\"\/>\n            ))}\n          <\/selectcontent>\n        <\/select>\n      <\/view>\n\n      <view classname=\"gap-2\">\n        <label nativeid=\"order-name\">Name for the order<\/label>\n        <input aria-labelledby=\"order-name\" value=\"{name}\" onchangetext=\"{onNameChange}\" placeholder=\"Who is picking it up?\" autocapitalize=\"words\" autocomplete=\"name\" returnkeytype=\"done\"\/>\n      <\/view>\n\n      <view classname=\"flex-row items-center justify-between gap-4\">\n        <view classname=\"flex-1 gap-1\">\n          <label nativeid=\"own-cup\" onpress=\"{()\"> onOwnCupChange(!ownCup)}>\n            Bringing my own cup\n          <\/label>\n          <text variant=\"muted\">Takes 25\u00a2 off and saves a lid.<\/text>\n        <\/view>\n        <switch nativeid=\"own-cup\" checked=\"{ownCup}\" oncheckedchange=\"{onOwnCupChange}\"\/>\n      <\/view>\n    <\/view>\n  );\n}\n<\/code><\/pre>\n<h3 id=\"heading-problem-1-portals-and-the-portalhost\">\u0645\u0633\u0626\u0644\u06c1 1: \u067e\u0648\u0631\u0679\u0644\u0632 \u0627\u0648\u0631 \u067e\u0648\u0631\u0679\u0644 \u06c1\u0648\u0633\u0679<\/h3>\n<p>\u062c\u0628 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u06a9\u06be\u0644\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0627\u0633\u06d2 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u0645\u0648\u062c\u0648\u062f \u062f\u06cc\u06af\u0631 \u0645\u0648\u0627\u062f \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u0627\u0633 \u0644\u06cc\u06d2 <code>SelectContent<\/code> \u06cc\u06c1 \u062c\u0632\u0648 \u06a9\u06d2 \u062f\u0631\u062e\u062a \u0645\u06cc\u06ba \u0627\u0633\u06cc \u062c\u06af\u06c1 \u067e\u0631 \u067e\u06cc\u0634 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u06c1\u0627\u06ba \u0627\u0633 \u06a9\u0627 \u0627\u0639\u0644\u0627\u0646 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627\u06d4 \u06cc\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 <code>@rn-primitives\/portal<\/code> \u0627\u06cc\u067e \u06a9\u06d2 \u062f\u0648\u0633\u0631\u06d2 \u062d\u0635\u0648\u06ba \u0645\u06cc\u06ba \u0645\u0648\u0627\u062f \u067e\u06cc\u0634 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u0633 \u0679\u06cc\u06a9\u0646\u0627\u0644\u0648\u062c\u06cc \u06a9\u0648 \u067e\u0648\u0631\u0679\u0644 \u06a9\u06c1\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0648\u06cc\u0628 \u067e\u0631\u060c \u067e\u0648\u0631\u0679\u0644 \u06a9\u0648 \u0627\u0633 \u0637\u0631\u062d \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2: <code>document.body<\/code>\u06c1\u0631 \u0635\u0641\u062d\u06c1 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u06d2\u06d4 React Native \u0645\u06cc\u06ba \u0627\u06cc\u0633\u06cc \u06a9\u0648\u0626\u06cc \u0628\u0627\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0644\u06c1\u0630\u0627\u060c \u067e\u0648\u0631\u0679\u0644 \u067e\u06cc\u06a9\u06cc\u062c \u0645\u06cc\u0645\u0648\u0631\u06cc \u0645\u06cc\u06ba \u067e\u0648\u0631\u0679\u0644 \u0645\u0648\u0627\u062f \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 <code>PortalHost<\/code> \u0627\u0633 \u0641\u06c1\u0631\u0633\u062a \u06a9\u0648 \u067e\u0691\u06be\u062a\u0627 \u0627\u0648\u0631 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u0633 \u06a9\u0648\u0688 \u06a9\u0627 \u0622\u0633\u0627\u0646 \u0648\u0631\u0698\u0646 \u06c1\u06d2\u06d4 <code>node_modules\/@rn-primitives\/portal\/dist\/index.js<\/code>:<\/p>\n<pre><code class=\"language-jsx\">var DEFAULT_PORTAL_HOST = \"INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME\";\nvar updatePortal = (hostName, name, children) => { \/* writes into the map *\/ };\nfunction PortalHost({ name = DEFAULT_PORTAL_HOST }) { \/* reads the map *\/ }\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u0646\u06c1\u06cc\u06ba <code>PortalHost<\/code> \u062c\u0628 \u0646\u0635\u0628 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0645\u0648\u0627\u062f \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0644\u06cc\u06a9\u0646 \u0638\u0627\u06c1\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u06a9\u0686\u06be \u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba \u06a9\u06be\u0648\u0644\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0648\u0626\u06cc \u063a\u0644\u0637\u06cc \u06cc\u0627 \u0627\u0646\u062a\u0628\u0627\u06c1\u0627\u062a \u0638\u0627\u06c1\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u06d4 <code>PortalHost<\/code> \u0631\u0648\u0679 \u0644\u06d2 \u0622\u0624\u0679 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2:<\/p>\n<pre><code class=\"language-tsx\"><themeprovider value=\"{NAV_THEME[theme\">\n  <statusbar style=\"{theme\" :=\"\"\/>\n  <stack\/>\n  <portalhost\/>\n<\/themeprovider>\n<\/code><\/pre>\n<p>It looks like unnecessary code, but you need to keep it. The AlertDialog in Step 10 uses it too.<\/p>\n<h3 id=\"heading-problem-2-safe-area-insets\">Problem 2: Safe Area Insets<\/h3>\n<p>There&#8217;s another issue to consider when showing a dropdown on a phone. Parts of the screen are reserved for the operating system, such as the area around the notch and the home indicator. If a dropdown opens near the bottom of the screen, one of its options could appear underneath the home indicator. In that area, a tap may be handled by the operating system instead of your app.<\/p>\n<p>To avoid this, pass the safe area insets to the content:<\/p>\n<pre><code class=\"language-tsx\">const insets = useSafeAreaInsets();\nconst contentInsets = { top: insets.top, bottom: insets.bottom, left: 16, right: 16 };\n\n<selectcontent insets=\"{contentInsets}\" classname=\"w-full\">\n<\/selectcontent><\/code><\/pre>\n<p>The <code>insets<\/code> prop is part of <code>PositionedContentProps<\/code> in <code>@rn-primitives\/types<\/code>, so every positioned component in the registry accepts it, including Popover, DropdownMenu, HoverCard, Tooltip, and Select. It&#8217;s a good habit to pass it every time.<\/p>\n<h3 id=\"heading-problem-3-the-select-value-is-an-object\">Problem 3: The Select Value Is an Object<\/h3>\n<p>One more thing to watch out for is the value returned by <code>onValueChange<\/code>. It may look like you&#8217;re selecting a string, but the callback returns an <code>Option<\/code> object:<\/p>\n<pre><code class=\"language-tsx\">type Option = { value: string; label: string } | undefined;\n<\/code><\/pre>\n<p>This causes a bug that only appears on one platform. If you store the whole <code>Option<\/code> in state and show <code>option.label<\/code> later, such as in a confirmation dialog, it displays correctly on a phone (&quot;In 30 minutes&#8221;) but incorrectly in the browser (&quot;30&#8221;).<\/p>\n<p>The reason is in the primitive&#8217;s source code. This is the native version, from <code>select.js<\/code>:<\/p>\n<pre><code class=\"language-jsx\">onValueChange({ value: itemValue, label });\n<\/code><\/pre>\n<p>And this is the web version, from <code>select.web.js<\/code>. It uses Radix, which only returns a value:<\/p>\n<pre><code class=\"language-jsx\">onValueChange({ value: val, label: val });\n<\/code><\/pre>\n<p>So the label is correct on native, but on the web it&#8217;s a copy of the value. If you only test in a simulator, you won&#8217;t notice this problem.<\/p>\n<p>The fix is to keep only the value in state and look up the label from your own list:<\/p>\n<pre><code class=\"language-tsx\">const selected = PICKUP_TIMES.find((time) => time.value === pickupValue);\n<\/code><\/pre>\n<p>This is why <code>PICKUP_TIMES<\/code> is in <code>lib\/menu.ts<\/code>. The pickup card needs it to build the options, and the main screen needs it to write the confirmation message.<\/p>\n<h3 id=\"heading-making-the-label-tappable\">Making the Label Tappable<\/h3>\n<p>The switch itself is quite small, so users may tap the label next to it instead. It makes sense to let that label toggle the switch as well. You can do that by adding an <code>onPress<\/code> handler to the <code>Label<\/code>:<\/p>\n<pre><code class=\"language-tsx\"><label nativeid=\"own-cup\" onpress=\"{()\"> onOwnCupChange(!ownCup)}>\n  Bringing my own cup\n<\/label>\n<switch nativeid=\"own-cup\" checked=\"{ownCup}\" oncheckedchange=\"{onOwnCupChange}\"\/>\n<\/code><\/pre>\n<p>Giving both elements the same <code>nativeID<\/code> connects them for screen readers. The <code>onPress<\/code> on the <code>Label<\/code> is what makes the text toggle the switch, because React Native has no automatic <code><label for=\"\"\/><\/code> behavior.<\/p>\n<p>While you&#8217;re here, open <code>components\/ui\/switch.tsx<\/code>. On the web, shadcn colors a switch with <code>data-[state=checked]:bg-default<\/code>DOM \u0645\u06cc\u06ba \u0633\u06cc\u0679 \u06a9\u06cc \u06af\u0626\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0648 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4 React Native \u0645\u06cc\u06ba \u0646\u06c1\u06cc\u06ba\u06d4 <code>data-*<\/code> \u0686\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 \u0627\u06cc\u06a9 \u062e\u0627\u0635\u06cc\u062a \u06c1\u06d2\u060c \u062c\u0632\u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0645\u06cc\u06ba \u067e\u0631\u0648\u067e \u06a9\u06d2 \u0644\u06cc\u06d2 \u0686\u06cc\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-tsx\">props.checked ? 'bg-primary' : 'bg-input dark:bg-input\/80',\n<\/code><\/pre>\n<p>\u0646\u062a\u06cc\u062c\u06c1 \u0648\u06c1\u06cc \u0646\u06a9\u0644\u062a\u0627 \u06c1\u06d2\u06d4 \u0646\u0642\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u0630\u06c1\u0646 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba\u06d4 <code>data-[state=...]<\/code> \u06cc\u06c1 \u0648\u06cc\u0628 \u0645\u062b\u0627\u0644 \u0645\u06cc\u06ba \u0633\u0644\u06cc\u06a9\u0679\u0631 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u06a9\u0627 \u06a9\u0648\u0626\u06cc \u0627\u062b\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-keyboard-props-for-the-name-field\">\u0646\u0627\u0645 \u06a9\u06cc \u0641\u06cc\u0644\u0688 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06cc \u0628\u0648\u0631\u0688 \u06a9\u0627 \u0633\u06c1\u0627\u0631\u0627<\/h3>\n<p><code>Input<\/code>    \u06c1\u06d2 <code>TextInput<\/code> \u0628\u0627\u0631\u0688\u0631 \u0627\u0648\u0631 \u0631\u062f\u0627\u0633 \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u06a9\u0648 \u06c1\u0631 \u0679\u06cc\u06a9\u0633\u0679 \u0627\u0646 \u067e\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0686\u0627\u0631 \u067e\u0631\u0648\u067e\u0633 \u0633\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06c1\u0648\u06ba \u06af\u06d2\u06d4<\/p>\n<ul>\n<li><code>autoCapitalize=\"words\"<\/code>    \u0646\u0627\u0645 \u0645\u06cc\u06ba \u06c1\u0631 \u0627\u06cc\u06a9 \u0644\u0641\u0638 \u06a9\u0648 \u0628\u0691\u0627 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/li>\n<li><code>autoComplete=\"name\"<\/code>    \u0622\u067e\u0631\u06cc\u0679\u0646\u06af \u0633\u0633\u0679\u0645 \u0646\u0627\u0645 \u062f\u0631\u062c \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u067e\u06cc\u0634\u06a9\u0634 \u06a9\u0631\u06d2 \u06af\u0627\u06d4<\/li>\n<li><code>returnKeyType=\"done\"<\/code>    \u0648\u0627\u067e\u0633\u06cc \u06a9\u0644\u06cc\u062f \u06a9\u06d2 \u0644\u06cc\u0628\u0644 \u06a9\u0648 &quot;\u06c1\u0648 \u06af\u06cc\u0627&#8221; \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/li>\n<li><code>keyboardType=\"number-pad\"<\/code>    \u062c\u0628 \u0627\u0639\u062f\u0627\u062f \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u062a\u0648 \u0639\u062f\u062f\u06cc \u06a9\u06cc \u0628\u0648\u0631\u0688 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/li>\n<\/ul>\n<p>\u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be <code>automaticallyAdjustKeyboardInsets<\/code> \u0645\u0631\u062d\u0644\u06c1 5 \u0645\u06cc\u06ba \u0627\u0633\u06a9\u0631\u0648\u0644 \u0648\u06cc\u0648 \u0641\u06cc\u0644\u0688\u0632 \u06a9\u0648 \u062a\u0628 \u062a\u06a9 \u062f\u06a9\u06be\u0627\u0626\u06cc \u062f\u06d2 \u06af\u0627 \u062c\u0628 \u062a\u06a9 \u06a9\u06cc \u0628\u0648\u0631\u0688 \u06a9\u06be\u0644\u0627 \u0631\u06c1\u06d2 \u06af\u0627\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u0645\u0632\u06cc\u062f \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c <code>react-native-keyboard-controller<\/code> \u06cc\u06c1 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u06a9\u0627 \u0627\u0646\u062d\u0635\u0627\u0631 \u06c1\u06d2 \u0627\u0648\u0631 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>KeyboardAwareScrollView<\/code> \u0627\u0648\u0631 <code>KeyboardProvider<\/code>.<\/p>\n<p>\u062c\u0628 \u0622\u067e \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u06a9\u06be\u0648\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06cc\u06c1 \u0679\u0631\u06af\u0631 \u06a9\u06d2 \u0628\u0627\u0644\u06a9\u0644 \u0646\u06cc\u0686\u06d2 \u0627\u0633\u06cc \u0686\u0648\u0691\u0627\u0626\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0642\u062f\u0631 \u06a9\u06d2 \u0622\u06af\u06d2 \u0627\u06cc\u06a9 \u0686\u06cc\u06a9 \u0645\u0627\u0631\u06a9 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915218_226_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u0639\u0648\u0627\u0645\u06cc \u067e\u06a9 \u0627\u067e \u0679\u0627\u0626\u0645 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u06cc\u06a9 \u0648\u0642\u062a \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 \u0622\u06cc\u0627 \u0679\u0631\u06af\u0631 \u0627\u067e \u0688\u06cc\u0679 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 &quot;Get My Cup&#8221; \u06a9\u06d2 \u0627\u0644\u0641\u0627\u0638 \u067e\u0631 \u0679\u06cc\u067e \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 \u0622\u06cc\u0627 \u0633\u0648\u0626\u0686 \u0679\u0648\u06af\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0646\u0627\u0645 \u06a9\u06cc \u0641\u06cc\u0644\u0688 \u0645\u06cc\u06ba \u062f\u0627\u062e\u0644 \u06c1\u0648\u06ba \u0627\u0648\u0631 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u0627 \u06a9\u06cc \u0628\u0648\u0631\u0688 \u0627\u0633 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u06a9\u06be\u0644\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0686\u06be \u0638\u0627\u06c1\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 <code>PortalHost<\/code>.<\/p>\n<h2 id=\"heading-step-8-build-the-bill-component\">\u0645\u0631\u062d\u0644\u06c1 8: \u0628\u0644 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0631<\/h2>\n<p>\u0628\u0644 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0628\u06c1\u062a \u0686\u06be\u0648\u0679\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u06c1\u0627\u06ba \u062f\u0648 \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u067e\u0631 \u062e\u0635\u0648\u0635\u06cc \u062a\u0648\u062c\u06c1 \u062f\u06cc\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u06cc\u06c1 \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u062f\u0631\u0633\u062a \u06c1\u06d2 \u0627\u06af\u0631 \u06a9\u0648\u0626\u06cc \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0627\u0642\u062f\u0627\u0631 \u0628\u062f\u0644 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n<p>\u0628\u0646\u0627\u0646\u0627 <code>components\/cart\/bill.tsx<\/code>:<\/p>\n<pre><code class=\"language-tsx\">import { Separator } from '@\/components\/ui\/separator';\nimport { Text } from '@\/components\/ui\/text';\nimport { cn } from '@\/lib\/utils';\nimport { money } from '@\/lib\/menu';\nimport { View } from 'react-native';\n\ntype BillProps = {\n  subtotal: number;\n  discount: number;\n  tax: number;\n  total: number;\n};\n\nfunction Line({ label, value, tone }: { label: string; value: number; tone?: 'muted' | 'credit' }) {\n  return (\n    <view classname=\"flex-row items-center justify-between\">\n      <text classname=\"{cn('text-sm',\" tone=\"==\">{label}<\/text>\n      <text classname=\"{cn(\" tabular-nums=\"\" tone=\"==\">\n        {money(value)}\n      <\/text>\n    <\/view>\n  );\n}\n\nexport function Bill({ subtotal, discount, tax, total }: BillProps) {\n  return (\n    <view classname=\"gap-2\">\n      <line label=\"Subtotal\" value=\"{subtotal}\" tone=\"muted\"\/>\n      {discount > 0 ? <line label=\"Own cup\" value=\"{-discount}\" tone=\"credit\"\/> : null}\n      <line label=\"Tax\" value=\"{tax}\" tone=\"muted\"\/>\n      <separator classname=\"my-1\"\/>\n      <view classname=\"flex-row items-center justify-between\">\n        <text classname=\"font-medium\">Total<\/text>\n        <text classname=\"text-lg font-semibold tabular-nums\">{money(total)}<\/text>\n      <\/view>\n    <\/view>\n  );\n}\n<\/code><\/pre>\n<p>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 <code>tabular-nums<\/code> \u062a\u0645\u0627\u0645 \u0646\u0645\u0628\u0631\u0648\u06ba \u062a\u06a9\u06d4 \u0645\u062a\u0646\u0627\u0633\u0628 \u0641\u0648\u0646\u0679\u0633 \u0645\u06cc\u06ba \u062f\u0627\u0626\u06cc\u06ba \u0633\u06cc\u062f\u06be \u0645\u06cc\u06ba \u06a9\u06cc \u06af\u0626\u06cc \u0642\u06cc\u0645\u062a\u06cc\u06ba \u0627\u0639\u0634\u0627\u0631\u06cc\u06c1 \u067e\u0648\u0627\u0626\u0646\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0646\u0633\u0644\u06a9 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 <code>tabular-nums<\/code> \u0627\u0633 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u06cc\u06ba \u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u0622\u067e \u0622\u0631\u0688\u0631 \u0644\u0627\u0626\u0646 \u0645\u06cc\u06ba \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u062f\u0648\u0633\u0631\u0627\u060c \u0631\u0639\u0627\u06cc\u062a \u06a9\u06cc \u0642\u0637\u0627\u0631\u06cc\u06ba \u0635\u0631\u0641 \u062a\u0628 \u062f\u06a9\u06be\u0627\u0626\u06cc\u06ba \u062c\u0628 \u0631\u0639\u0627\u06cc\u062a \u0644\u0627\u06af\u0648 \u06c1\u0648\u06d4 \u06a9\u0648\u0688 \u06c1\u06d2\u06d4 <code>{discount > 0 ? <line\/> : null}<\/code> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 <code>{discount && <line\/>}<\/code>. \u0627\u06af\u0631 JSX \u0645\u06cc\u06ba \u0628\u0627\u0626\u06cc\u06ba \u0637\u0631\u0641 <code>&&<\/code> \u0646\u0645\u0628\u0631 \u06cc\u06c1 \u06c1\u06cc\u06ba\u06d4 <code>0<\/code>\u0631\u062f \u0639\u0645\u0644 <code>0<\/code>. React Native \u0645\u06cc\u06ba <code>Text<\/code> \u062c\u0632\u0648 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u062e\u0631\u0627\u0628\u06cc \u067e\u06cc\u0634 \u0622\u06af\u0626\u06cc\u06d4 <code>Text strings must be rendered within a <text> component<\/text><\/code>. \u0628\u0648\u0644\u06cc\u0646 \u0679\u06cc\u0633\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0627\u0648\u0631 \u0648\u0627\u067e\u0633 \u06a9\u0631\u0646\u0627 <code>null<\/code> \u06cc\u06c1 \u06a9\u06cc\u0691\u06d2 \u06a9\u06cc \u0627\u06cc\u06a9 \u067e\u0648\u0631\u06cc \u0642\u0633\u0645 \u0633\u06d2 \u0628\u0686\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633\u06d2 \u062c\u0627\u0646\u0686\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c Self Cup \u0633\u0648\u0626\u0686 \u06a9\u0648 \u0622\u0646 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u0646\u06c1\u06cc\u06ba <strong>\u0645\u06cc\u0631\u0627 \u0627\u067e\u0646\u0627 \u06a9\u067e<\/strong> \u0627\u06cc\u06a9 \u0644\u0627\u0626\u0646 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u0646\u06cc \u0686\u0627\u06c1\u0626\u06d2\u06d4 <code>-$0.25<\/code>\u0679\u06cc\u06a9\u0633\u0648\u06ba \u06a9\u0648 \u0627\u0633 \u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2: <code>$1.54<\/code> \u06a9\u0648 <code>$1.52<\/code>\u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0679\u06cc\u06a9\u0633\u0648\u06ba \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0631\u0639\u0627\u06cc\u062a\u06cc \u0630\u06cc\u0644\u06cc \u0679\u0648\u0679\u0644 \u067e\u0631 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915218_966_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u0633\u06cc\u0644\u0641 \u06a9\u067e \u0688\u0633\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0646\u0648\u0627\u0626\u0633 \u0644\u0627\u06af\u0648 \u06c1\u06d2\u06d4\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u06a9\u0644 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u062f\u0631\u062c \u0630\u06cc\u0644 \u06c1\u06cc\u06ba: <code>$20.19<\/code> \u06a9\u0648 <code>$19.92<\/code>\u06cc\u06c1 25 \u0633\u06cc\u0646\u0679 \u0633\u06d2 27 \u0633\u06cc\u0646\u0679 \u06a9\u0645 \u06c1\u06d2\u06d4 \u0627\u0636\u0627\u0641\u06cc \u062f\u0648 \u0633\u06cc\u0646\u0679 \u06a9\u0645 \u0679\u06cc\u06a9\u0633\u0648\u06ba \u0633\u06d2 \u0622\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-step-9-build-the-fixed-checkout-bar\">\u0645\u0631\u062d\u0644\u06c1 9: \u0627\u06cc\u06a9 \u0645\u0633\u062a\u062d\u06a9\u0645 \u0627\u062f\u0627\u0626\u06cc\u06af\u06cc \u0628\u0627\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u0645\u06cc\u06ba \u0686\u0627\u06c1\u062a\u0627 \u06c1\u0648\u06ba \u06a9\u06c1 \u0679\u0648\u0679\u0644 \u0627\u0648\u0631 \u0686\u06cc\u06a9 \u0622\u0624\u0679 \u06a9\u06d2 \u0628\u0679\u0646 \u0627\u0633 \u0648\u0642\u062a \u0646\u0638\u0631 \u0622\u062a\u06d2 \u0631\u06c1\u06cc\u06ba \u062c\u0628 \u0635\u0627\u0631\u0641 \u06a9\u0627\u0631\u0679 \u0645\u06cc\u06ba \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u0648\u06d4 \u0648\u06cc\u0628 \u067e\u0631\u060c \u0622\u067e \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <code>position: sticky<\/code> \u0627\u0648\u0631 <code>bottom: 0<\/code>. React Native \u0627\u0633 \u0637\u0631\u062d \u06a9\u0627\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627\u060c \u0644\u06cc\u06a9\u0646 \u0622\u067e \u0627\u06cc\u06a9 \u0633\u0627\u062f\u06c1 \u0641\u0644\u06cc\u06a9\u0633 \u0644\u06d2 \u0622\u0624\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0648\u06c1\u06cc \u0646\u062a\u06cc\u062c\u06c1 \u062d\u0627\u0635\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e Flexbox \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06a9\u06d2 \u0648\u06c1\u06cc \u0646\u062a\u06cc\u062c\u06c1 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0645\u0631\u062d\u0644\u06c1 5 \u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0631\u062a\u06cc\u0628 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-tsx\"><view classname=\"bg-background flex-1\">\n  <scrollview classname=\"flex-1\" ...=\"\">{\/* content *\/}<\/scrollview>\n  <checkoutbar ...=\"\"\/>\n<\/view>\n<\/code><\/pre>\n<p>\u0628\u06cc\u0631\u0648\u0646\u06cc <code>View<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u06a9\u0627\u0644\u0645 \u06c1\u06d2\u06d4 \u06a9\u06c1 <code>ScrollView<\/code> \u06c1\u06d2 <code>flex-1<\/code>\u0644\u06c1\u0630\u0627 \u06cc\u06c1 \u0628\u0627\u0642\u06cc \u062a\u0645\u0627\u0645 \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u06a9\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0686\u06cc\u06a9 \u0622\u0624\u0679 \u0628\u0627\u0631 \u0627\u0633 \u06a9\u0627 \u0628\u06be\u0627\u0626\u06cc \u06c1\u06d2 \u062c\u0648 \u0627\u0633 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u0631\u06a9\u06be\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u06cc\u06c1 \u0646\u06cc\u0686\u06d2 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0633\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646\u0646\u06af \u06cc\u0627 \u0632\u06cc\u0688 \u0627\u0646\u0688\u06cc\u06a9\u0633 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-handling-the-home-indicator\">\u06c1\u0648\u0645 \u0627\u0646\u0688\u06cc\u06a9\u06cc\u0679\u0631 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af<\/h3>\n<p>\u06c1\u0648\u0645 \u0628\u0679\u0646 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0641\u0648\u0646 \u067e\u0631\u060c \u0646\u06cc\u0686\u06d2 \u0648\u0627\u0644\u06d2 34 \u06cc\u0627 \u0627\u0633 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0633\u0633\u0679\u0645 \u0633\u06d2 \u062a\u0639\u0644\u0642 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0648\u06c1\u0627\u06ba \u067e\u06cc\u0646\u0679 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u0628\u0679\u0646\u0648\u06ba \u06a9\u0648 \u062f\u0628\u0627\u0646\u0627 \u0645\u0634\u06a9\u0644 \u06cc\u0627 \u0646\u0627\u0645\u0645\u06a9\u0646 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u0648 \u0631\u0648\u06a9\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0646\u06cc\u0686\u06d2 \u06a9\u06d2 \u0645\u062d\u0641\u0648\u0638 \u0639\u0644\u0627\u0642\u06d2 \u0645\u06cc\u06ba \u067e\u06cc\u0688\u0646\u06af \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-tsx\">const insets = useSafeAreaInsets();\n\n<view classname=\"border-border bg-background flex-row items-center gap-4 border-t px-4 pt-3\" style=\"{{\" paddingbottom:=\"\" insets.bottom=\"\">\n<\/view><\/code><\/pre>\n<p>\u0646\u06cc\u0686\u06d2 \u06a9\u06cc \u067e\u06cc\u0688\u0646\u06af \u0627\u0646 \u0644\u0627\u0626\u0646 \u06c1\u06d2\u06d4 <code>style<\/code> \u0627\u0633\u06d2 \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0627\u0633 \u06a9\u06cc \u0642\u06cc\u0645\u062a \u0688\u06cc\u0648\u0627\u0626\u0633 \u067e\u0631 \u0645\u0646\u062d\u0635\u0631 \u06c1\u0648\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u06cc\u06c1 \u0635\u0631\u0641 \u0627\u0633 \u0648\u0642\u062a \u0645\u0639\u0644\u0648\u0645 \u06c1\u0648\u062a\u06cc \u06c1\u06d2 \u062c\u0628 \u0627\u06cc\u067e \u0686\u0644\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>className<\/code> \u0627\u0648\u0631 <code>style<\/code> \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06d2 \u0639\u0646\u0627\u0635\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0648\u0626\u06cc \u0645\u0633\u0626\u0644\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u06af\u0631 \u06cc\u06c1 \u0627\u0631\u0627\u062f\u06c1 \u06c1\u06d2.<\/p>\n<p>\u0627\u06cc\u06a9\u0634\u0646 \u0628\u0627\u0631 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0622\u0644\u0627\u062a \u0627\u0648\u0631 \u0628\u0631\u0627\u0624\u0632\u0631 \u0679\u06cc\u0628\u0632 \u067e\u0631\u060c <code>insets.bottom<\/code> 0 \u062a\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <code>12<\/code> \u06cc\u06c1 \u0628\u0627\u0631 \u06a9\u0648 \u062a\u0646\u06af \u0646\u0638\u0631 \u0622\u0646\u06d2 \u0633\u06d2 \u0631\u0648\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0633\u06d2 \u067e\u0648\u0631\u0627 \u062c\u0632\u0648 \u0628\u0646\u0627\u0626\u06cc\u06ba: <code>components\/cart\/checkout-bar.tsx<\/code>. \u0627\u0633 \u0645\u06cc\u06ba \u0645\u0631\u062d\u0644\u06c1 10 \u0645\u06cc\u06ba \u0628\u06cc\u0627\u0646 \u06a9\u0631\u062f\u06c1 \u062a\u0635\u062f\u06cc\u0642\u06cc \u0688\u0627\u0626\u06cc\u0644\u0627\u06af \u0634\u0627\u0645\u0644 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-tsx\">import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@\/components\/ui\/alert-dialog';\nimport { Button } from '@\/components\/ui\/button';\nimport { Icon } from '@\/components\/ui\/icon';\nimport { Text } from '@\/components\/ui\/text';\nimport { money } from '@\/lib\/menu';\nimport * as Haptics from 'expo-haptics';\nimport { ArrowRightIcon } from 'lucide-react-native';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\ntype CheckoutBarProps = {\n  total: number;\n  itemCount: number;\n  pickupLabel: string;\n  name: string;\n  onConfirm: () => void;\n};\n\nexport function CheckoutBar({ total, itemCount, pickupLabel, name, onConfirm }: CheckoutBarProps) {\n  const insets = useSafeAreaInsets();\n  const empty = itemCount === 0;\n\n  function confirm() {\n    \/\/ expo-haptics ships a web implementation that falls back to navigator.vibrate,\n    \/\/ so this needs no platform guard.\n    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);\n    onConfirm();\n  }\n\n  return (\n    <view classname=\"border-border bg-background flex-row items-center gap-4 border-t px-4 pt-3\" style=\"{{\" paddingbottom:=\"\" insets.bottom=\"\">\n      <view classname=\"flex-1\">\n        <text variant=\"muted\" classname=\"text-xs\">\n          {empty ? 'Nothing in the cart' : `${itemCount} ${itemCount === 1 ? 'item' : 'items'}`}\n        <\/text>\n        <text classname=\"text-xl font-semibold tabular-nums\">{money(total)}<\/text>\n      <\/view>\n\n      <alertdialog>\n        <alertdialogtrigger aschild=\"\">\n          <button size=\"lg\" disabled=\"{empty}\">\n            <text>Place order<\/text>\n            <icon as=\"{ArrowRightIcon}\"\/>\n          <\/button>\n        <\/alertdialogtrigger>\n        <alertdialogcontent>\n          <alertdialogheader>\n            <alertdialogtitle>Send this to the counter?<\/alertdialogtitle>\n            <alertdialogdescription>\n              {`${money(total)} for ${name.trim() || 'pickup'}, ${pickupLabel.toLowerCase()}. We start making it right away, so it cannot be cancelled after this.`}\n            <\/alertdialogdescription>\n          <\/alertdialogheader>\n          <alertdialogfooter>\n            <alertdialogcancel>\n              <text>Not yet<\/text>\n            <\/alertdialogcancel>\n            <alertdialogaction onpress=\"{confirm}\">\n              <text>Send it<\/text>\n            <\/alertdialogaction>\n          <\/alertdialogfooter>\n        <\/alertdialogcontent>\n      <\/alertdialog>\n    <\/view>\n  );\n}\n<\/code><\/pre>\n<h3 id=\"heading-a-note-on-thin-borders\">\u067e\u062a\u0644\u06cc \u0633\u0631\u062d\u062f\u0648\u06ba \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0646\u0648\u0679<\/h3>\n<p><code>border-t<\/code>    \u0627\u06cc\u06a9 \u0645\u0646\u0637\u0642\u06cc \u0646\u0642\u0637\u06c1 \u06a9\u06cc \u0645\u0648\u0679\u0627\u0626\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0644\u06a9\u06cc\u0631 \u06a9\u06be\u06cc\u0646\u0686\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u062c\u062f\u06cc\u062f \u0627\u0633\u06a9\u0631\u06cc\u0646\u0648\u06ba \u067e\u0631 2 \u06cc\u0627 3 \u0641\u0632\u06cc\u06a9\u0644 \u067e\u06a9\u0633\u0644\u0632 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0627\u0635\u0644 1-\u067e\u06a9\u0633\u0644 \u0644\u0627\u0626\u0646 \u06a9\u06d2 \u0622\u06af\u06d2 \u0628\u06be\u0627\u0631\u06cc \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u0642\u0627\u0645\u06cc \u06a9\u0627 \u0631\u062f \u0639\u0645\u0644 <code>StyleSheet.hairlineWidth<\/code> \u06cc\u06c1 \u0633\u0628 \u0633\u06d2 \u067e\u062a\u0644\u06cc \u0644\u0627\u0626\u0646 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0633\u06d2 \u0622\u067e \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u06a9\u06be\u06cc\u0646\u0686 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u0627\u0633 \u0644\u0627\u0626\u0646 \u06a9\u0648 \u0679\u06cc\u0644 \u0648\u0646\u0688 \u0633\u06d2 \u0645\u0646\u0633\u0644\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>global.css<\/code>:<\/p>\n<pre><code class=\"language-css\">--spacing-hairline: hairlineWidth();\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0627\u0636\u0627\u0641\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>hairline<\/code> \u0679\u06cc\u0644 \u0648\u0646\u0688 \u06a9\u0627 \u0648\u0642\u0641\u06c1 \u067e\u06cc\u0645\u0627\u0646\u06c1 <code>h-hairline<\/code> \u0627\u06cc\u06a9 \u0641\u0632\u06cc\u06a9\u0644 \u0633\u06cc\u067e\u0631\u06cc\u0679\u0631 \u0644\u0627\u0626\u0646 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 1 \u067e\u06a9\u0633\u0644 \u0644\u0645\u0628\u06cc \u06c1\u06d2\u06d4 \u0639\u0627\u0645 \u063a\u0644\u0637\u06cc\u0627\u06ba \u0633\u06cc\u06a9\u0634\u0646 \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u06d2 \u0645\u0633\u0626\u0644\u06d2 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u06a9\u0627 \u0622\u067e \u06a9\u0648 \u0633\u0627\u0645\u0646\u0627 \u06c1\u0648 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u0627\u06af\u0631 \u0622\u067e \u0628\u0639\u062f \u0645\u06cc\u06ba \u0627\u0633\u06d2 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u0688 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u0648\u06c1\u06cc\u06ba \u0686\u06cc\u06a9 \u0622\u0624\u0679 \u06a9\u0627\u0624\u0646\u0679\u0631 \u06c1\u06d2\u06d4 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u062a\u06a9 \u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u0628\u0644\u0632 \u06a9\u06d2 \u062a\u062d\u062a \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915219_809_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u0646\u06cc\u0686\u06d2 \u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u0627\u062f\u0627\u0626\u06cc\u06af\u06cc \u0628\u0627\u0631 \u06a9\u0648 \u062a\u06be\u067e\u062a\u06be\u067e\u0627\u0626\u06cc\u06ba\u06d4\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u062c\u0628 \u0645\u06cc\u06ba \u0627\u0648\u067e\u0631 \u06a9\u06cc \u0637\u0631\u0641 \u0648\u0627\u067e\u0633 \u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba \u062a\u0648 \u0628\u0627\u0631 \u0627\u0633\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u0631\u06c1\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915219_558_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u0627\u0648\u067e\u0631 \u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u0627\u062f\u0627\u0626\u06cc\u06af\u06cc \u0628\u0627\u0631 \u062f\u06cc\u06a9\u06be\u06cc\u06ba\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0646\u0634\u0627\u0646 \u0648\u0627\u0644\u06d2 \u0641\u0648\u0646 \u067e\u0631\u060c \u0628\u0679\u0646 \u0627\u06cc\u06a9\u0634\u0646 \u0628\u0627\u0631 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u062a\u0645\u0627\u0645 \u0622\u0626\u0679\u0645\u0632 \u06a9\u0648 \u06c1\u0679\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0648\u0691\u06d2 \u062f\u0627\u0646 \u06a9\u06d2 \u0628\u0679\u0646 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0628\u0679\u0646 \u063a\u06cc\u0631 \u0641\u0639\u0627\u0644 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u0644\u06cc\u0628\u0644 \u067e\u0631 \u06cc\u06c1 \u06a9\u06c1\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u06a9\u06c1 &quot;\u0622\u067e \u06a9\u06cc \u06a9\u0627\u0631\u0679 \u0645\u06cc\u06ba \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4&#8221;<\/p>\n<h2 id=\"heading-step-10-add-the-confirmation-and-put-the-screen-together\">\u0645\u0631\u062d\u0644\u06c1 10: \u062a\u0635\u062f\u06cc\u0642\u0627\u062a \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u0648 \u0635\u0627\u0641 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0627\u062f\u0627\u0626\u06cc\u06af\u06cc \u0628\u0627\u0631 \u0645\u06cc\u06ba \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0627\u06cc\u06a9 \u062a\u0635\u062f\u06cc\u0642\u06cc \u0688\u0627\u0626\u06cc\u0644\u0627\u06af \u0634\u0627\u0645\u0644 \u06c1\u06d2\u06d4 \u067e\u0648\u0631\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u0648 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0631\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c React Native \u0646\u0641\u0627\u0630 \u0627\u0648\u0631 \u0648\u06cc\u0628 \u0648\u0631\u0698\u0646 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062f\u0648 \u0641\u0631\u0642 \u06c1\u06cc\u06ba \u062c\u0646\u06c1\u06cc\u06ba \u0622\u067e \u06a9\u0648 \u067e\u06c1\u0644\u06d2 \u062f\u06cc\u06a9\u06be\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<h3 id=\"heading-1-it-also-needs-the-portalhost\">1. \u0628\u06be\u06cc <code>PortalHost<\/code><\/h3>\n<p>iOS \u067e\u0631 \u0627\u0633\u06d2 \u0627\u0633 \u0637\u0631\u062d \u0644\u067e\u06cc\u0679 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2: <code>FullWindowOverlay<\/code> \u0633\u06d2 <code>react-native-screens<\/code>\u0644\u06c1\u0630\u0627\u060c \u06cc\u06c1 \u0645\u0631\u06a9\u0632\u06cc \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u06c1\u06cc\u0688\u0631 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u06a9\u06cc \u0628\u062c\u0627\u0626\u06d2 \u0627\u0648\u067e\u0631 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u06cc \u06af\u0626\u06cc\u06d4 <code>alert-dialog.tsx<\/code>\u06cc\u06c1\u06cc \u0648\u062c\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0648\u06c1 \u0641\u0627\u0626\u0644\u06cc\u06ba \u0628\u0638\u0627\u06c1\u0631 \u063a\u06cc\u0631 \u0645\u062a\u0639\u0644\u0642\u06c1 \u0686\u06cc\u0632\u06cc\u06ba \u062f\u0631\u0622\u0645\u062f \u06a9\u0631 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><code>AlertDialogFooter<\/code>    \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>flex-col-reverse<\/code> \u06cc\u06c1 \u0635\u0631\u0641 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0645\u0642\u0627\u0645\u0627\u062a \u067e\u0631 \u0627\u06cc\u06a9 \u0642\u0637\u0627\u0631 \u0628\u0646 \u062c\u0627\u062a\u06cc \u06c1\u06d2: <code>sm:<\/code> \u0628\u0631\u06cc\u06a9 \u067e\u0648\u0627\u0626\u0646\u0679\u06d4 \u0622\u067e \u06a9\u06d2 \u0641\u0648\u0646 \u067e\u0631\u060c \u0622\u067e \u06a9\u0627 \u0628\u0646\u0627\u06cc\u0627 \u06c1\u0648\u0627 \u0622\u062e\u0631\u06cc \u0628\u0679\u0646 \u0633\u0628 \u0633\u06d2 \u0627\u0648\u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u067e\u06c1\u0644\u06d2 \u06a9\u06cc\u0646\u0633\u0644 \u0627\u0648\u0631 \u0627\u06cc\u06a9\u0634\u0646 \u0633\u06cc\u06a9\u0646\u0688 \u0644\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0627\u0648\u06a9\u06d2 \u06a9\u0627 \u0628\u0679\u0646 \u0648\u06c1\u06cc\u06ba \u0631\u06a9\u06be\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u062c\u06c1\u0627\u06ba \u0622\u067e \u06a9\u0627 \u0627\u0646\u06af\u0648\u0679\u06be\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u06a9\u06cc\u0646\u0633\u0644 \u0628\u0679\u0646 \u0627\u0633 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u0631\u06a9\u06be\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915219_854_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"\u062a\u0635\u062f\u06cc\u0642\u06cc \u0688\u0627\u0626\u06cc\u0644\u0627\u06af \u0628\u0627\u06a9\u0633\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-haptics\">\u06c1\u06cc\u067e\u0679\u06a9\u0633<\/h3>\n<p>\u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u06af\u0627\u06c1\u06a9 \u0622\u0631\u0688\u0631 \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c <code>confirm<\/code> \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0627\u0644 <code>Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)<\/code>. \u06cc\u06c1 \u0645\u0639\u0627\u0648\u0646 \u0622\u0644\u0627\u062a \u06a9\u0648 \u0627\u06cc\u06a9 \u0645\u062e\u062a\u0635\u0631 \u06a9\u0627\u0645\u06cc\u0627\u0628\u06cc \u06a9\u06cc \u0646\u0628\u0636 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0686\u0648\u0646\u06a9\u06c1 \u0628\u0631\u0627\u0624\u0632\u0631\u0632 \u0645\u06cc\u06ba \u0645\u0642\u0627\u0645\u06cc \u0627\u06cc\u067e\u0633 \u06a9\u06cc \u0637\u0631\u062d \u06c1\u06cc\u067e\u0679\u06a9 \u0633\u067e\u0648\u0631\u0679 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0622\u067e \u0627\u0646 \u0633\u06d2 \u062a\u0648\u0642\u0639 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0648\u06c1 \u0627\u0633 \u06a9\u0627\u0644 \u06a9\u0648 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u0686\u06cc\u06a9 \u0645\u06cc\u06ba \u0644\u067e\u06cc\u0679 \u062f\u06cc\u06ba\u06d4 \u0627\u0633 \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba\u060c <code>expo-haptics<\/code> \u0627\u0633 \u0645\u06cc\u06ba \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0627\u06cc\u06a9 \u0648\u06cc\u0628 \u0646\u0641\u0627\u0630 \u0634\u0627\u0645\u0644 \u06c1\u06d2 \u062c\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>navigator.vibrate<\/code>iOS \u0633\u0641\u0627\u0631\u06cc \u06a9\u06cc \u062c\u06af\u06c1 \u0644\u06d2 \u0644\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0628\u0631\u0627\u0624\u0632\u0631 \u06c1\u06cc\u067e\u0679\u06a9\u0633 \u0641\u0631\u0627\u06c1\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u06a9\u0627\u0644 \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06cc\u060c \u0644\u06c1\u0630\u0627 \u06a9\u0633\u06cc \u0627\u0636\u0627\u0641\u06cc \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<p><code>notificationAsync<\/code>    \u0627\u0633 \u0633\u06d2 \u0645\u0631\u0627\u062f \u06a9\u0627\u0645\u06cc\u0627\u0628\u06cc \u06cc\u0627 \u0646\u0627\u06a9\u0627\u0645\u06cc \u062c\u06cc\u0633\u06d2 \u0646\u062a\u0627\u0626\u062c \u06c1\u06cc\u06ba\u06d4 <code>impactAsync<\/code> \u062c\u0633\u0645\u0627\u0646\u06cc \u062a\u0635\u0627\u062f\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c <code>selectionAsync<\/code> \u0622\u067e \u06a9\u0648 \u0628\u0633 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u0645\u06cc\u06ba \u0622\u06af\u06d2 \u0628\u0691\u06be\u0646\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u063a\u0644\u0637 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e \u06a9\u0648 \u06a9\u0648\u0626\u06cc \u063a\u0644\u0637\u06cc \u0646\u06c1\u06cc\u06ba \u0645\u0644\u06d2 \u06af\u06cc\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u062a\u06be\u0648\u0691\u0627 \u0633\u0627 \u0645\u062d\u0633\u0648\u0633 \u06c1\u0648\u06af\u0627\u06d4<\/p>\n<h3 id=\"heading-the-full-screen\">\u0645\u06a9\u0645\u0644 \u0633\u06a9\u0631\u06cc\u0646<\/h3>\n<p>\u0627\u0628 \u0622\u067e \u0645\u0631\u06a9\u0632\u06cc \u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u0633\u0628 \u06a9\u0686\u06be \u062c\u0645\u0639 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1\u0627\u06ba \u06c1\u0645 \u0631\u06cc\u0627\u0633\u062a \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0644 \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u062a\u06d2 \u06c1\u06cc\u06ba: <code>billFor<\/code>\u06c1\u0631 \u062c\u0632\u0648 \u06a9\u0648 \u0645\u0637\u0644\u0648\u0628\u06c1 \u0627\u0642\u062f\u0627\u0631 \u0627\u0648\u0631 \u06a9\u0627\u0644 \u0628\u06cc\u06a9\u0633 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u062c\u0628 \u0622\u067e \u0622\u0631\u0688\u0631 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0627\u0633\u06d2 \u0627\u0633 \u0637\u0631\u062d \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 <code>orderNumber<\/code>\u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0627\u06cc\u06a9 \u062a\u0635\u062f\u06cc\u0642\u06cc \u067e\u06cc\u063a\u0627\u0645 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u06af\u0627\u06d4 \u0627\u0633 \u062a\u0635\u062f\u06cc\u0642 \u0645\u06cc\u06ba <code><stack.screen options=\"\"\/><\/code> \u06a9\u06c1\u06cc\u06ba \u0628\u06be\u06cc \u062a\u0634\u0631\u06cc\u0641 \u0644\u06d2 \u062c\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u06c1\u0645 \u06c1\u06cc\u0688\u0631 \u06a9\u06d2 \u0639\u0646\u0648\u0627\u0646 \u06a9\u0648 &quot;\u0622\u0631\u0688\u0631 \u0628\u06be\u06cc\u062c\u06d2 \u06af\u0626\u06d2&#8221; \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0637\u0631\u062d \u067e\u0648\u0631\u0627 \u0628\u06c1\u0627\u0624 \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0631\u0627\u0633\u062a\u06d2 \u0645\u06cc\u06ba \u0631\u06c1\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u062a\u0628\u062f\u06cc\u0644\u06cc <code>app\/index.tsx<\/code> \u06a9\u06d2 \u0633\u0627\u062a\u06be:<\/p>\n<pre><code class=\"language-tsx\">'@\/comComponents\/cart\/bill' \u0633\u06d2 { \u0628\u0644 } \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 '@\/comComponents\/cart\/checkout-bar' \u0633\u06d2 { CheckoutBar } \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u061b '@\/comComponents\/cart\/order-row' \u0633\u06d2 { OrderRow } \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u061b '@\/comComponents\/cart\/pickup-card' \u0633\u06d2 { PickupCard } \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 '@\/comComponents\/ui\/button' \u0633\u06d2 { \u0628\u0679\u0646 } \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u06d4 \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba {Card, CardContent, CardDescription, CardHeader, CardTitle } \u0633\u06d2 '@\/comComponents\/ui\/card'\u061b '@\/comComponents\/ui\/icon' \u0633\u06d2 { icon } \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u06d4 '@\/comComponents\/ui\/separator' \u0633\u06d2 { Separator } \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u061b '@\/comComponents\/ui\/text' \u0633\u06d2 { text } \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u06d4 \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba { billFor, INITIAL_CART, PICKUP_TIMES, CartItem type} '@\/lib\/menu' \u0633\u06d2\u061b 'expo-router' \u0633\u06d2 {stack} \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba { CircleCheckIcon, MoonStarIcon, SunIcon} 'lucide-react-native' \u0633\u06d2\u061b 'react' \u0633\u06d2 React \u0645\u06cc\u06ba * \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u06d4 'react-native' \u0633\u06d2 { ScrollView, View } \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u061b \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba { Uniwind, useUniwind } 'uniwind' \u0633\u06d2\u061b const SCREEN_OPTIONS = { \u0639\u0646\u0648\u0627\u0646: '\u0622\u0631\u0688\u0631'\u060c \u06c1\u06cc\u0688\u0631 \u0631\u0627\u0626\u0679: () => <themetoggle\/>}; \u0627\u06cc\u06a9\u0633\u067e\u0648\u0631\u0679 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0627\u0631\u0679 \u0627\u0633\u06a9\u0631\u06cc\u0646 () { const [items, setItems] = response.useState<cartitem>(INITIAL_CART)\u061b const [pickupValue, setPickupValue] = React.useState(PICKUP_TIMES[0]\u0642\u062f\u0631) const [name, setName] = React.useState(''); const [ownCup, setOwnCup] = React.useState(false); const [orderNumber, setOrderNumber] = response.useState<string null=\"\">(\u0622\u067e)\u061b const \u0628\u0644 = \u0628\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 (\u0622\u0626\u0679\u0645\u0632\u060c \u0627\u067e\u0646\u0627 \u06a9\u067e)\u061b const itemCount = items.reduce((count, item) => count + item.qty\u060c 0)\u061b const PickupLabel = PICKUP_TIMES.find((time) => time.value === PickupValue)?.label ?? PICKUP_TIMES[0]\u0628\u0631\u0627\u0646\u0688 functionchangeQty(id: string\u060c quantity: number) { setItems((current) => \u0645\u0642\u062f\u0627\u0631 <= 0\n        ? current.filter((item) => item.id !== id) : current.map((item) => (item.id === id ? { ...item, qty } : item)) ); } \u0641\u0646\u06a9\u0634\u0646 placeOrder() { setOrderNumber(`A-${Math.floor(Math.random() * 90 + 10)}`); } \u0641\u0646\u06a9\u0634\u0646 \u0627\u0633\u0679\u0627\u0631\u0679 \u0627\u0648\u0648\u0631() { \u0633\u06cc\u0679 \u0622\u0626\u0679\u0645\u0632(INITIAL_CART)\u061b setOwnCup(false)\u061b \u0633\u06cc\u0679 \u0646\u0627\u0645 ('')\u061b \u0633\u06cc\u0679 \u067e\u06a9 \u0627\u067e \u0648\u06cc\u0644\u06cc\u0648(PICKUP_TIMES[0]\u0642\u062f\u0631) setOrderNumber(null)\u061b } if (orderNumber) { \u0648\u0627\u067e\u0633 \u06a9\u0631\u06cc\u06ba (<>\n        <stack.screen options=\"{{\" ...screen_options=\"\" title:=\"\" sent=\"\"\/>\n        <view classname=\"bg-background flex-1 items-center justify-center gap-6 p-8\">\n          <icon as=\"{CircleCheckIcon}\" classname=\"text-primary size-16\"\/>\n          <view classname=\"gap-2\">\n            <text variant=\"h3\" classname=\"text-center\">\n              \n              \n              \n              \u06c1\u0645 \u0627\u0633 \u0645\u06cc\u06ba \u06c1\u06cc\u06ba\n            <\/text>\n            <text variant=\"muted\" classname=\"text-center\">\n              \n              \n              \n              {`${name.trim() || \u06a9\u06d2 \u0644\u06cc\u06d2 ${orderNumber} \u0622\u0631\u0688\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 '\u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba'}\u06d4 \u06a9\u0627\u0624\u0646\u0679\u0631 \u06a9\u06d2 \u0622\u062e\u0631\u06cc \u0633\u0631\u06d2 \u067e\u0631 \u0622\u0626\u06cc\u06ba \u0627\u0648\u0631 \u06a9\u067e \u067e\u0631 \u0627\u067e\u0646\u0627 \u0646\u0627\u0645 \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba\u06d4`}\n            <\/text>\n          <\/view>\n          <button variant=\"outline\" onpress=\"{startOver}\">\n            <text>\u062f\u0648\u0633\u0631\u0627 \u0622\u0631\u0688\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4<\/text>\n          <\/button>\n        <\/view>\n      \n      \n      \n      >) } \u0648\u0627\u067e\u0633\u06cc (<>\n      <stack.screen options=\"{SCREEN_OPTIONS}\"\/>\n      <view classname=\"bg-background flex-1\">\n        <scrollview classname=\"flex-1\" contentcontainerclassname=\"gap-4 p-4 pb-8\" keyboardshouldpersisttaps=\"handled\" automaticallyadjustkeyboardinsets=\"\">\n          <card classname=\"gap-3 py-4\">\n            <cardheader classname=\"px-4\">\n              <cardtitle>\u0641\u0631\u0646 \u0648\u0648\u0688 \u06a9\u0627\u0641\u06cc<\/cardtitle>\n              <carddescription>112 \u0645\u06cc\u0631\u06cc\u0646 \u0688\u0631\u0627\u0626\u06cc\u0648\u060c \u06a9\u0627\u0624\u0646\u0679\u0631 \u067e\u06a9 \u0627\u067e<\/carddescription>\n            <\/cardheader>\n            <cardcontent classname=\"gap-4 px-4\">\n              \n              \n              \n              {items.length === 0\u061f (\n                <text variant=\"muted\">\u0622\u067e \u06a9\u06cc \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u062e\u0627\u0644\u06cc \u06c1\u06d2\u06d4 \u06a9\u0686\u06be \u06af\u0631\u0645 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/text>\n              ) : null} {items.map((item, index) => (\n                <react.fragment key=\"{item.id}\">\n                  {\u0627\u0646\u0688\u06cc\u06a9\u0633 > 0\u061f <separator\/> :null}\n                  <orderrow item=\"{item}\" onchangeqty=\"{changeQty}\"\/>\n                <\/react.fragment>\n              \n              \n              \n              ))}\n            <\/cardcontent>\n          <\/card>\n\n          <card classname=\"gap-3 py-4\">\n            <cardheader classname=\"px-4\">\n              <cardtitle>\u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba<\/cardtitle>\n            <\/cardheader>\n            <cardcontent classname=\"px-4\">\n              <pickupcard pickupvalue=\"{pickupValue}\" onpickupvaluechange=\"{setPickupValue}\" name=\"{name}\" onnamechange=\"{setName}\" owncup=\"{ownCup}\" onowncupchange=\"{setOwnCup}\"\/>\n            <\/cardcontent>\n          <\/card>\n\n          <card classname=\"gap-3 py-4\">\n            <cardheader classname=\"px-4\">\n              <cardtitle>\u0628\u0644<\/cardtitle>\n            <\/cardheader>\n            <cardcontent classname=\"px-4\">\n              <bill\/>\n            <\/cardcontent>\n          <\/card>\n        <\/scrollview>\n\n        <checkoutbar total=\"{bill.total}\" itemcount=\"{itemCount}\" pickuplabel=\"{pickupLabel}\" name=\"{name}\" onconfirm=\"{placeOrder}\"\/>\n      <\/view>\n    \n    \n    \n    >) } const THEME_ICONS = { \u0631\u0648\u0634\u0646\u06cc: SunIcon\u060c \u0633\u06cc\u0627\u06c1: MoonStarIcon\u060c }\u061b \u0641\u0646\u06a9\u0634\u0646 ThemeToggle() { const { \u062a\u06be\u06cc\u0645 } = useUniwind(); \u0648\u0627\u067e\u0633\u06cc (\n    <button onpressin=\"{()\"> Uniwind.setTheme(theme === '\u0688\u0627\u0631\u06a9' ? '\u0631\u0648\u0634\u0646\u06cc' : '\u0688\u0627\u0631\u06a9')} size=\"icon\" variant=\"ghost\" className=\"ios:size-9 web:mx-4 rounded-full\"accessibilityLabel=\"Switch theme\">[theme\" classname=\"size-5\"\/>\n    <\/button>\n  );\n}\n<\/string><\/cartitem><\/code><\/pre>\n<p>Notice that <code>pickupLabel<\/code> is the fix from Step 7 in use. The screen looks up the label from <code>PICKUP_TIMES<\/code> and passes a plain string to <code>CheckoutBar<\/code>, so <code>CheckoutBar<\/code> never touches an <code>Option<\/code> object or the incorrect web label.<\/p>\n<p>To test it, place an order. The dialog should show your name and the pickup time you chose (such as &quot;in 30 minutes&#8221;), not the raw value <code>30<\/code>. Confirm the order, and you should see the confirmation screen:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915219_81_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"The order sent screen\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>Tap &quot;Start another order&#8221; and the cart returns to its original state.<\/p>\n<p>The checkout screen is now working, and each part is kept in its own component. You can use the same approach when you build other screens: keep the component focused, pass the data it needs through props, and let the shared theme handle the styling.<\/p>\n<h2 id=\"heading-step-11-add-dark-mode\">Step 11: Add Dark Mode<\/h2>\n<p>We already added the theme toggle in Step 10. Here&#8217;s the component again so we can look at how it switches between light and dark mode:<\/p>\n<pre><code class=\"language-tsx\">import { Uniwind, useUniwind } from 'uniwind';\n\nfunction ThemeToggle() {\n  const { theme } = useUniwind();\n\n  return (\n    <button onpressin=\"{()\"> Uniwind.setTheme(theme === 'dark' ? 'light' : 'dark')}\n      size=\"icon\"\n      variant=\"ghost\"\n      className=\"ios:size-9 web:mx-4 rounded-full\"\n      accessibilityLabel=\"Switch theme\">\n      <icon as=\"{THEME_ICONS[theme\" classname=\"size-5\"\/>\n    <\/button>\n  );\n}\n<\/code><\/pre>\n<p><code>Uniwind.setTheme<\/code> changes the values behind every token, so everything that uses <code>bg-card<\/code>, <code>text-muted-foreground<\/code>, and similar classes updates at once. <code>useUniwind<\/code> subscribes the component to the current theme, so the icon changes too.<\/p>\n<p>This code also uses the <code>ios:<\/code> and <code>web:<\/code> prefixes. Uniwind supports platform variants, so <code>web:mx-4<\/code> only adds margin in the browser, and <code>ios:size-9<\/code> only applies on iOS. It&#8217;s similar to <code>Platform.select<\/code>, but it stays inside the class string.<\/p>\n<p>Three things aren&#8217;t handled by <code>setTheme<\/code>, and if you forget them, you end up with a screen that&#8217;s only partly dark. The template already sets up the first two.<\/p>\n<p>React Navigation takes its colors from a plain object, so the root layout needs to pass it the right one:<\/p>\n<pre><code class=\"language-tsx\">const { theme } = useUniwind();\n\n<themeprovider value=\"{NAV_THEME[theme\">\n<\/themeprovider><\/code><\/pre>\n<h3 id=\"heading-2-the-status-bar\">2. The Status Bar<\/h3>\n<p>The clock and battery icons are drawn by the operating system, so you need to tell it which style to use. Without this, you can get dark text on a dark bar.<\/p>\n<pre><code class=\"language-tsx\"><statusbar style=\"{theme\" :=\"\"\/>\n<\/code><\/pre>\n<h3 id=\"heading-3-saving-the-choice\">3. Saving the Choice<\/h3>\n<p><code>Uniwind.setTheme<\/code> only applies to the current session. The next time the app starts, it follows the system setting again. To keep the user&#8217;s choice, save it with <code>expo-secure-store<\/code> or <code>AsyncStorage<\/code> and call <code>setTheme<\/code> when the app starts. You can call <code>setTheme('system')<\/code> to go back to following the operating system.<\/p>\n<p>When you tap the header icon, the cards, borders, inputs, switch, header, and status bar should all change together. You can explore more ready-made shadcn blocks if you want examples of how these components are used in larger interfaces:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915219_304_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"The screen in dark mode\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>Look for anything that stays light while the rest goes dark. A light header usually means the <code>ThemeProvider<\/code> is not receiving the new <code>NAV_THEME<\/code>.<\/p>\n<h2 id=\"heading-step-12-create-your-own-theme\">Step 12: Create Your Own Theme<\/h2>\n<p>The screen is currently using the default gray theme. Let&#8217;s change it to a coffee-inspired palette with warm cream backgrounds and brown accents. This will also help us see why the palette needs to be updated in both <code>global.css<\/code> and <code>lib\/theme.ts<\/code>.<\/p>\n<h3 id=\"heading-update-the-tokens\">Update the Tokens<\/h3>\n<p>Replace the <code>@layer theme<\/code> block in <code>global.css<\/code> with this coffee palette:<\/p>\n<pre><code class=\"language-css\">@layer theme {\n  :root {\n    @variant light {\n      --color-background: oklch(0.98 0.008 75);\n      --color-foreground: oklch(0.24 0.02 60);\n      --color-card: oklch(1 0.003 90);\n      --color-card-foreground: oklch(0.24 0.02 60);\n      --color-popover: oklch(1 0.003 90);\n      --color-popover-foreground: oklch(0.24 0.02 60);\n      --color-primary: oklch(0.44 0.06 45);\n      --color-primary-foreground: oklch(0.99 0.01 85);\n      --color-secondary: oklch(0.93 0.03 80);\n      --color-secondary-foreground: oklch(0.35 0.05 45);\n      --color-muted: oklch(0.95 0.012 80);\n      --color-muted-foreground: oklch(0.52 0.02 60);\n      --color-accent: oklch(0.92 0.04 78);\n      --color-accent-foreground: oklch(0.32 0.05 45);\n      --color-destructive: oklch(0.577 0.245 27.325);\n      --color-border: oklch(0.89 0.02 75);\n      --color-input: oklch(0.89 0.02 75);\n      --color-ring: oklch(0.44 0.06 45);\n    }\n\n    @variant dark {\n      --color-background: oklch(0.17 0.012 60);\n      --color-foreground: oklch(0.96 0.008 85);\n      --color-card: oklch(0.22 0.016 62);\n      --color-card-foreground: oklch(0.96 0.008 85);\n      --color-popover: oklch(0.22 0.016 62);\n      --color-popover-foreground: oklch(0.96 0.008 85);\n      --color-primary: oklch(0.85 0.09 75);\n      --color-primary-foreground: oklch(0.22 0.03 55);\n      --color-secondary: oklch(0.29 0.022 62);\n      --color-secondary-foreground: oklch(0.94 0.01 85);\n      --color-muted: oklch(0.27 0.018 62);\n      --color-muted-foreground: oklch(0.72 0.015 75);\n      --color-accent: oklch(0.31 0.03 65);\n      --color-accent-foreground: oklch(0.95 0.01 85);\n      --color-destructive: oklch(0.704 0.191 22.216);\n      --color-border: oklch(1 0 0 \/ 12%);\n      --color-input: oklch(1 0 0 \/ 15%);\n      --color-ring: oklch(0.85 0.09 75);\n    }\n  }\n}\n<\/code><\/pre>\n<p>If you don&#8217;t want to choose thirty colors by hand, you can generate a theme with the shadcn theme generator or tweakcn. Both export CSS variables, but you need to make two changes before the output works in this project:<\/p>\n<ol>\n<li>Rename each variable to include the <code>--color-<\/code> prefix. For example, <code>--primary<\/code> becomes <code>--color-primary<\/code>.<\/li>\n<li>Move the <code>:root<\/code> block inside <code>@variant light<\/code>, and the <code>.dark<\/code> block inside <code>@variant dark<\/code>.<\/li>\n<\/ol>\n<p>Also remove <code>--radius<\/code> from what you paste, because the template already defines it along with the derived sizes. Remove any <code>--shadow-*<\/code> variables too, since nothing in the registry reads them.<\/p>\n<h3 id=\"heading-update-libthemets\">Update lib\/theme.ts<\/h3>\n<p>After you save and reload, the result looks like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915219_961_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"The new theme with a white header\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>The page is cream, the button is brown, and the badges have the right color, but the header is still white with a visible line under it. The reason is that React Navigation draws the header using <code>lib\/theme.ts<\/code>, and that file still has the old palette. Nothing is broken and nothing warns you, so this mistake is easy to miss. If you&#8217;re designing the same interface in Figma, the shadcn Figma resources can also help you keep the design and implementation aligned.<\/p>\n<p>Update <code>lib\/theme.ts<\/code> to match:<\/p>\n<pre><code class=\"language-tsx\">import { DarkTheme, DefaultTheme, type Theme } from 'expo-router\/react-navigation';\n\nexport const THEME = {\n  light: {\n    background: '#fcf8f3',\n    foreground: '#261d16',\n    card: '#fffffd',\n    primary: '#6e4836',\n    border: '#e3d9cd',\n    destructive: '#e7000b',\n    \/* the rest of the list *\/\n  },\n  dark: {\n    background: '#130e0a',\n    foreground: '#f4f1ec',\n    card: '#201913',\n    primary: '#f1c68b',\n    border: '#3a3129',\n    destructive: '#ff6467',\n    \/* the rest of the list *\/\n  },\n};\n\nexport const NAV_THEME: Record<'light' | 'dark', Theme> = {\n  light: {\n    ...DefaultTheme,\n    colors: {\n      background: THEME.light.background,\n      border: THEME.light.border,\n      card: THEME.light.background,\n      notification: THEME.light.destructive,\n      primary: THEME.light.primary,\n      text: THEME.light.foreground,\n    },\n  },\n  dark: {\n    ...DarkTheme,\n    colors: {\n      background: THEME.dark.background,\n      border: THEME.dark.border,\n      card: THEME.dark.background,\n      notification: THEME.dark.destructive,\n      primary: THEME.dark.primary,\n      text: THEME.dark.foreground,\n    },\n  },\n};\n<\/code><\/pre>\n<p>This isn&#8217;t a direct copy of <code>global.css<\/code>, so three points need explanation:<\/p>\n<ul>\n<li><strong>Use hex colors instead of<\/strong> <code>oklch()<\/code><strong>:<\/strong> Uniwind converts <code>oklch()<\/code> for your classes, but React Navigation does not, so give it a format that React Native can read directly. You can convert a color with any online converter, or paste the <code>oklch()<\/code> value into your browser&#8217;s developer tools color picker and read the hex value.<\/li>\n<li><strong>Map React Navigation&#8217;s<\/strong> <code>card<\/code> <strong>to your<\/strong> <code>background<\/code><strong>, not your<\/strong> <code>card<\/code><strong>.<\/strong> The two names look the same but mean different things. In shadcn, <code>card<\/code> is a raised surface on top of the page. In React Navigation, <code>card<\/code> is the background of the screen and header. If you map them by name, the header ends up a shade lighter than the page. You won&#8217;t notice this with the stock template because it uses the same value for <code>card<\/code> and <code>background<\/code>. It only shows up once you create a theme where cards stand out from the page, like this one.<\/li>\n<li><strong>Use a solid color in place of a transparent border.<\/strong> In dark mode, <code>--color-border<\/code> is <code>oklch(1 0 0 \/ 12%)<\/code>, which is white at 12% opacity. A navigation theme needs a solid color, so work out what that border looks like on your background and use that value.<\/li>\n<\/ul>\n<p>After this change, the header and page match in both light and dark mode, and you didn&#8217;t edit any component files:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915219_900_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"The final theme with a matching header\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/11\/1793915219_701_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u0642\u0627\u0645\u06cc-\u0627\u06cc\u067e\u0644\u06cc-\u06a9\u06cc\u0634\u0646-\u0645\u06cc\u06ba-shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u06cc\u0633\u06d2.png\" alt=\"The final theme in the other mode\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>Switch between light and dark a few times and watch the header. If it&#8217;s a shade lighter or darker than the page, one of the values in <code>lib\/theme.ts<\/code> is still from the old palette.<\/p>\n<h2 id=\"heading-common-mistakes-and-how-to-fix-them\">Common Mistakes and How to Fix Them<\/h2>\n<p>If you&#8217;re coming from web development, some of these differences may catch you off guard. I&#8217;ve collected the issues covered in the tutorial in the table below, along with the fix for each one. You can refer back to it when something doesn&#8217;t behave as expected.<\/p>\n<table>\n<thead>\n<tr>\n<th>What you do<\/th>\n<th>What happens<\/th>\n<th>The fix<\/th>\n<\/tr>\n<\/thead>\n<tbody wp_automatic_readability=\"40\">\n<tr wp_automatic_readability=\"4\">\n<td><code><badge>Medium<\/badge><\/code><\/td>\n<td>Red screen: &quot;Text strings must be rendered within a <code><text\/><\/code>.&#8221;<\/td>\n<td>Wrap the text: <code><badge><text>Medium<\/text><\/badge><\/code>. The same applies to <code>Button<\/code>.<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"5\">\n<td><code>{count && <line\/>}<\/code> when <code>count<\/code> is <code>0<\/code><\/td>\n<td>The same error, caused by a stray <code>0<\/code><\/td>\n<td><code>{count > 0 ? <line\/> : null}<\/code><\/td>\n<\/tr>\n<tr wp_automatic_readability=\"2\">\n<td><code>space-y-3<\/code> on a column<\/td>\n<td>Nothing happens and there is no warning<\/td>\n<td>Use <code>gap-3<\/code> on the parent<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"6\">\n<td><code>className=\"p-4\"<\/code> on a <code>ScrollView<\/code><\/td>\n<td>Padding is clipped and gaps are ignored<\/td>\n<td>Use <code>contentContainerClassName<\/code><\/td>\n<\/tr>\n<tr wp_automatic_readability=\"2\">\n<td><code>truncate<\/code> on a long name<\/td>\n<td>The text isn&#8217;t truncated and the price is pushed off screen<\/td>\n<td>Use <code>numberOfLines={1}<\/code><\/td>\n<\/tr>\n<tr wp_automatic_readability=\"5\">\n<td>Using <code>flex<\/code> and expecting a row<\/td>\n<td>Items stack vertically<\/td>\n<td>React Native defaults to a column, so add <code>flex-row<\/code><\/td>\n<\/tr>\n<tr wp_automatic_readability=\"4\">\n<td><code>hover:bg-accent<\/code><\/td>\n<td>Nothing happens on a device<\/td>\n<td>Use <code>active:<\/code> for the pressed state<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"5\">\n<td>Deleting <code>PortalHost<\/code> from the layout<\/td>\n<td>Dropdowns open into nothing, with no error<\/td>\n<td>Put it back<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"6\">\n<td>A Select near the bottom of the screen<\/td>\n<td>The last option is under the home indicator<\/td>\n<td>Pass <code>insets<\/code> to <code>SelectContent<\/code><\/td>\n<\/tr>\n<tr wp_automatic_readability=\"7\">\n<td>Showing <code>option.label<\/code> from <code>onValueChange<\/code><\/td>\n<td>Correct on native, but the raw value on the web<\/td>\n<td>Look up the label from your own data<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"6\">\n<td>A bottom bar with only <code>p-4<\/code><\/td>\n<td>The button is under the gesture bar<\/td>\n<td>Use <code>paddingBottom: insets.bottom + 12<\/code> in <code>style<\/code><\/td>\n<\/tr>\n<tr>\n<td>28-point stepper buttons<\/td>\n<td>Hard to tap with a thumb<\/td>\n<td>Add <code>hitSlop={8}<\/code><\/td>\n<\/tr>\n<tr wp_automatic_readability=\"4\">\n<td>Changing only <code>global.css<\/code> for a new theme<\/td>\n<td>The header keeps the old colors<\/td>\n<td>Update <code>lib\/theme.ts<\/code> too<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"3\">\n<td><code><avatar\/><\/code> without <code>alt<\/code><\/td>\n<td>TypeScript won&#8217;t compile<\/td>\n<td><code>alt<\/code> is required, and it becomes the accessibility label<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"6\">\n<td><code>rounded-2xl<\/code> on <code>Avatar<\/code> only<\/td>\n<td>A circular fallback inside rounded corners<\/td>\n<td>Repeat it on <code>AvatarFallback<\/code><\/td>\n<\/tr>\n<tr wp_automatic_readability=\"6\">\n<td>Guarding haptics with <code>Platform.OS !== 'web'<\/code><\/td>\n<td>A working web fallback is removed<\/td>\n<td><code>expo-haptics<\/code> already handles the web<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"7\">\n<td>Right-aligned prices in a normal font<\/td>\n<td>Digits shift whenever the number changes<\/td>\n<td>Use <code>tabular-nums<\/code>, which also works on native<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"2\">\n<td><code><separator classname=\"h-hairline\"\/><\/code><\/td>\n<td>Both height classes are kept<\/td>\n<td>See below<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The last row needs more explanation, because it looks like a bug in <code>cn()<\/code>, but it&#8217;s not.<\/p>\n<p><code>cn()<\/code> uses <code>tailwind-merge<\/code>, which resolves conflicts between classes. It knows the default Tailwind scale, but it doesn&#8217;t know about custom values you declare in <code>global.css<\/code>. The value <code>hairline<\/code> comes from <code>--spacing-hairline: hairlineWidth()<\/code>, so <code>tailwind-merge<\/code> can&#8217;t tell that <code>h-hairline<\/code> and <code>h-[1px]<\/code>    \u0627\u06cc\u06a9 \u06c1\u06cc \u067e\u0631\u0627\u067e\u0631\u0679\u06cc \u06a9\u0648 \u0633\u06cc\u0679 \u06a9\u0631\u0646\u0627 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-jsx\">cn('h-[1px] w-full', 'h-hairline my-1')  \/\/ 'h-[1px] w-full h-hairline my-1'\ncn('h-[1px] w-full', 'h-2 my-1')         \/\/ 'w-full h-2 my-1'\n<\/code><\/pre>\n<p>\u062f\u0648\u0633\u0631\u0627 \u0646\u062a\u06cc\u062c\u06c1 \u062f\u0631\u0633\u062a \u06c1\u06d2\u06d4 \u067e\u06c1\u0644\u06d2 \u0645\u06cc\u06ba\u060c \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628 \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0648\u0646 \u0633\u06cc \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u062c\u06cc\u062a\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u062f\u06cc\u06af\u0631 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u06cc\u0688\u0632 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba: <code>size-14<\/code> \u067e\u0631 <code>size-8<\/code>\u06cc\u06c1 \u0646\u0627\u0645 \u06c1\u06d2\u060c \u062a\u0648 \u06cc\u06c1 \u0635\u062d\u06cc\u062d \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>tailwind-merge<\/code> \u0645\u06cc\u06ba \u0627\u0633\u06d2 \u067e\u06c1\u0686\u0627\u0646\u062a\u0627 \u06c1\u0648\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0648\u06c1 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u067e\u06cc\u0645\u0627\u0646\u0648\u06ba \u06a9\u0648 \u0633\u0645\u062c\u06be\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u0627\u0646\u06c1\u06cc\u06ba \u06cc\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06a9\u06d2 \u0633\u06a9\u06be\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <code>extendTailwindMerge<\/code> \u06a9\u0648 <code>lib\/utils.ts<\/code>. \u0628\u0635\u0648\u0631\u062a \u062f\u06cc\u06af\u0631\u060c \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u0642\u062f\u0631 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06cc\u0627 \u062c\u0632\u0648 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0633\u0679\u06cc\u067e\u0631 \u0628\u0679\u0646\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u062a\u0639\u0644\u0642\u06c1 \u0645\u062b\u0627\u0644 \u0628\u06be\u06cc \u06c1\u06d2\u06d4 \u0648\u06c1 \u06af\u0632\u0631 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba <code>size-7<\/code> \u06a9\u0648 <code>Button<\/code> \u062c\u0633 \u06a9\u06d2 \u0622\u0626\u06cc\u06a9\u0646 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u06c1\u06d2\u06d4 <code>h-10 w-10 sm:h-9 sm:w-9<\/code>:<\/p>\n<pre><code class=\"language-jsx\">cn('h-10 w-10 sm:h-9 sm:w-9', 'size-7 rounded-full')\n\/\/ 'sm:h-9 sm:w-9 size-7 rounded-full'\n<\/code><\/pre>\n<p><code>size-7<\/code>    \u0628\u06cc\u0633 \u06a9\u06cc \u062c\u06af\u06c1 \u0644\u06d2 \u0644\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 <code>h-10 w-10<\/code>\u0644\u06cc\u06a9\u0646 \u062f\u0648\u0646\u0648\u06ba <code>sm:<\/code> \u06a9\u0644\u0627\u0633\u06cc\u06ba \u0648\u06c1\u06cc \u0631\u06c1\u06cc\u06ba \u06af\u06cc\u06d4 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 <code>tailwind-merge<\/code> \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0648\u06cc\u0631\u06cc\u0626\u0646\u0679\u0633 \u06a9\u0648 \u0645\u062e\u062a\u0644\u0641 \u06a9\u0644\u0627\u0633\u0632 \u0633\u0645\u062c\u06be\u06cc\u06ba\u06d4 \u0641\u0648\u0646 \u067e\u0631 \u06a9\u0648\u0626\u06cc \u0641\u0631\u0642 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 <code>sm:<\/code> \u06cc\u06c1 640px \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0641\u0648\u0646 \u0627\u0633 \u0633\u06d2 \u06a9\u0645 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u062a\u0627\u06c1\u0645\u060c \u0688\u06cc\u0633\u06a9 \u0679\u0627\u067e \u0628\u0631\u0627\u0624\u0632\u0631\u0632 \u0645\u06cc\u06ba\u060c \u0628\u0679\u0646 36 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u062a\u06a9 \u0628\u0691\u06be \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-conclusion\">\u0646\u062a\u06cc\u062c\u06c1<\/h2>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0646\u06d2 React Native Reusables\u060c Expo\u060c \u0627\u0648\u0631 Uniwind \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u06a9\u0627\u0641\u06cc \u0634\u0627\u067e \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0627\u0648\u0631 \u0686\u06cc\u06a9 \u0622\u0624\u0679 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0628\u0646\u0627\u06cc\u0627 \u06c1\u06d2\u06d4 \u0622\u0631\u0688\u0631 \u06a9\u06cc \u0642\u0637\u0627\u0631\u060c \u067e\u06a9 \u0627\u067e \u06a9\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a\u060c \u0627\u0646\u0648\u0627\u0626\u0633 \u06a9\u0627 \u062e\u0644\u0627\u0635\u06c1\u060c \u0686\u0633\u067e\u0627\u06ba \u0627\u062f\u0627\u0626\u06cc\u06af\u06cc \u0628\u0627\u0631\u060c \u0627\u0648\u0631 \u062a\u0635\u062f\u06cc\u0642\u06cc \u0688\u0627\u0626\u06cc\u0644\u0627\u06af \u0634\u0627\u0645\u0644 \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4 \u06c1\u0645 \u0646\u06d2 \u06cc\u06c1 \u0628\u06be\u06cc \u062f\u06cc\u06a9\u06be\u0627 \u06a9\u06c1 \u06a9\u0633 \u0637\u0631\u062d \u0631\u062c\u0633\u0679\u0631\u06cc \u0627\u0648\u0631 CLI \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0627\u062c\u0632\u0627\u0621 \u06a9\u0627 \u0633\u0648\u0631\u0633 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u062a\u06be\u06cc\u0645 \u0679\u0648\u06a9\u0646\u0632 \u0622\u067e \u06a9\u06d2 \u0627\u06cc\u067e \u06a9\u06d2 \u0631\u0646\u06af\u0648\u06ba \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u062c\u0628 \u06a9\u0648\u0626\u06cc \u0686\u06cc\u0632 \u062a\u0648\u0642\u0639 \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u06a9\u0627\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0631\u06c1\u06cc \u06c1\u06d2 \u062a\u0648 \u0627\u0633 \u06a9\u06cc \u0639\u0627\u062f\u062a \u0688\u0627\u0644\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u0627\u06cc\u06a9 \u0686\u06cc\u0632 \u062c\u0632\u0648 \u06a9\u06d2 \u0645\u0627\u062e\u0630 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 \u062c\u0632\u0648 \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e \u0627\u0633\u06d2 \u06a9\u06be\u0648\u0644 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u0637\u0631\u062d \u06c1\u0645 \u0646\u06d2 \u0648\u06cc\u0628 \u0627\u0648\u0631 \u0645\u0642\u0627\u0645\u06cc \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0633\u0644\u06cc\u06a9\u0679 \u0644\u06cc\u0628\u0644\u0632 \u0645\u06cc\u06ba \u0641\u0631\u0642 \u06a9\u0648 \u0633\u0645\u062c\u06be\u0627\u06d4 \u06cc\u06c1 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u06a9\u0648 \u0628\u06be\u06cc \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0622\u067e \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0627\u0633 \u06a9\u06d2 \u0627\u0631\u062f \u06af\u0631\u062f \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0633 \u06a9\u06d2 \u06a9\u0646 \u062d\u0635\u0648\u06ba \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u06c1\u0645\u0627\u0631\u06d2 GitHub \u0630\u062e\u06cc\u0631\u06d2 \u0645\u06cc\u06ba \u0645\u06a9\u0645\u0644 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u062a\u0644\u0627\u0634 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0645\u0633\u0627\u0626\u0644 \u06a9\u0627 \u0634\u06a9\u0627\u0631 \u06c1\u06cc\u06ba \u06cc\u0627 \u0627\u067e\u0646\u06d2 \u06a9\u0648\u0688 \u06a9\u0627 \u062a\u06cc\u0627\u0631 \u0634\u062f\u06c1 \u0633\u06a9\u0631\u06cc\u0646 \u0633\u06d2 \u0645\u0648\u0627\u0632\u0646\u06c1 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u06a9\u0648 \u06a9\u0644\u0648\u0646 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0639\u0645\u0644 \u062f\u0631\u0622\u0645\u062f \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0627\u067e\u0646\u06d2 \u0627\u06af\u0644\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0632\u06cc\u062f \u0645\u06a9\u0645\u0644 \u0646\u0642\u0637\u06c1 \u0622\u063a\u0627\u0632 \u062a\u0644\u0627\u0634 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 shadcn \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u067e\u0631 \u0627\u06cc\u06a9 \u0646\u0638\u0631 \u0688\u0627\u0644\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u06cc\u06ba \u0646\u06d2 \u0641\u0648\u0646 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u06a9\u06d2 \u0648\u06cc\u0648 \u067e\u0648\u0631\u0679 \u0645\u06cc\u06ba React Native Web \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u0679\u0633 \u062d\u0627\u0635\u0644 \u06a9\u06cc\u06d2\u06d4 \u06cc\u06c1\u06cc \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 iOS \u0627\u0648\u0631 Android \u067e\u0631 \u0628\u06be\u06cc \u0686\u0644\u062a\u0627 \u06c1\u06d2\u06d4 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u06a9\u06d2 \u0641\u0631\u0642 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u0645\u062a\u0639\u0644\u0642\u06c1 \u0633\u06cc\u06a9\u0634\u0646\u0632 \u0645\u06cc\u06ba \u06a9\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u060c \u0628\u0634\u0645\u0648\u0644 \u0645\u0631\u062d\u0644\u06c1 7 \u0645\u06cc\u06ba \u0644\u06cc\u0628\u0644 \u0627\u0648\u0631 \u067e\u0648\u0631\u0679\u0644 \u06c1\u0648\u0633\u0679 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u060c \u0645\u0631\u062d\u0644\u06c1 9 \u0645\u06cc\u06ba \u0633\u06cc\u0641 \u0632\u0648\u0646 \u06c1\u06cc\u0646\u0688\u0644\u0646\u06af\u060c \u0627\u0648\u0631 \u0645\u0631\u062d\u0644\u06c1 10 \u0645\u06cc\u06ba \u06c1\u06cc\u067e\u0679\u06a9\u0633\u06d4<\/p>\n<h3 id=\"heading-resources\">\u0648\u0633\u0627\u0626\u0644<\/h3>\n<p><strong>\u0645\u0642\u0627\u0645\u06cc \u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u067e\u0631 \u0631\u062f \u0639\u0645\u0644 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong><\/p>\n<p><strong>\u0627\u0648\u0632\u0627\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2<\/strong><\/p>\n<p><strong>API \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/strong><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u06a9\u0686\u06be React Native \u0627\u06cc\u067e\u0633 \u0628\u0646\u0627\u0626\u06cc \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0622\u067e \u06a9\u06d2 \u0644\u06cc\u06d2 \u0648\u0627\u0642\u0641 \u06c1\u0648\u06ba \u06af\u06d2\u06d4 \u062a\u0645 \u06c1\u0648 colors.ts \u0641\u0627\u0626\u0644\u06cc\u06ba \u0627\u0648\u0631 \u0633\u0627\u062f\u06c1 Button \u0639\u0646\u0635\u0631 \u067e\u06c1\u0644\u06d2 \u062a\u0648 \u0633\u0628 \u06a9\u0686\u06be \u0679\u06be\u06cc\u06a9 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 \u067e\u06be\u0631 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0645\u06cc\u06ba \u0686\u0646\u062f \u0628\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644\u06cc \u0622\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0686\u06be\u0648\u0679\u06d2 \u0631\u0646\u06af \u06a9\u06d2 \u0688\u06be\u06cc\u0631 \u0628\u0691\u06be\u0646\u06d2 \u0644\u06af\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u0627 \u0628\u0679\u0646 \u06c1\u0631 \u0628\u0627\u0631 \u062c\u0628 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":32001,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-32000","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/32000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/comments?post=32000"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/32000\/revisions"}],"predecessor-version":[{"id":32002,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/32000\/revisions\/32002"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/media\/32001"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/media?parent=32000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/categories?post=32000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/tags?post=32000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}