{"id":90844,"date":"2025-01-01T20:46:45","date_gmt":"2025-01-01T17:16:45","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/"},"modified":"2025-01-01T20:46:45","modified_gmt":"2025-01-01T17:16:45","slug":"react-natives-new-architecture-sync-and-async-rendering","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/","title":{"rendered":"React Native&#39;s New Architecture: Sync and async rendering"},"content":{"rendered":"<div data-article-id=\"2182515\" id=\"article-body\">\n<p><strong>\u0646\u0648\u0634\u062a\u0647 \u0627\u0645\u0627\u0646\u0648\u0626\u0644 \u062c\u0627\u0646\u270f\ufe0f<\/strong><\/p>\n<p>React Native \u0628\u0627 \u0627\u0646\u062a\u0634\u0627\u0631 New Architecture \u062e\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0627\u062f.<\/p>\n<p>New Architecture \u06a9\u0647 \u0627\u06a9\u0646\u0648\u0646 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0646\u0635\u0628\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0633\u062a\u060c \u0628\u0647 \u0634\u06a9\u0627\u06cc\u0627\u062a \u062f\u06cc\u0631\u06cc\u0646\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0633\u0631\u0639\u062a \u0648 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06af\u0631 \u0627\u0632 React Native 0.76 \u06cc\u0627 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0627\u06cc\u0646 \u067e\u06cc\u0634\u0631\u0641\u062a\u200c\u0647\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f \u0648 \u0632\u0645\u0627\u0646 \u0647\u06cc\u062c\u0627\u0646\u200c\u0627\u0646\u06af\u06cc\u0632\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0634\u0641 \u0627\u06cc\u0646 \u06a9\u0647 \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc\u062a\u0627\u0646 \u0686\u0647 \u0645\u0639\u0646\u0627\u06cc\u06cc \u062f\u0627\u0631\u062f\u060c \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/p>\n<p>\u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f React Native \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u062a\u0631\u060c \u062a\u062c\u0631\u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647 \u0648 \u0647\u0645\u0633\u0648\u06cc\u06cc \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 React \u0639\u0631\u0636\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0628\u0631\u0631\u0633\u06cc \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u0647\u0645\u0632\u0645\u0627\u0646 \u0648 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0627 \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u062f. \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0639\u06cc\u0627\u0631\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0642\u0627\u06cc\u0633\u0647 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0648 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u0686\u0646\u062f \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0642\u0628\u0644 \u0627\u0632 \u0627\u062f\u0627\u0645\u0647 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0622\u0646\u0647\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n<ul>\n<li>    Node.js \u2265v20 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a<\/li>\n<li>    \u062f\u0627\u0646\u0634 React<\/li>\n<li>    \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0631\u0627 \u0628\u0627 React Native \u062a\u062c\u0631\u0628\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%AC%D8%AF%DB%8C%D8%AF_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%AC%D8%AF%DB%8C%D8%AF\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#Asynchronous_layout_and_effects\" >Asynchronous layout and effects<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#Project_setup\" >Project setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#Run_the_app\" >Run the app<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#Helper_functions\" >Helper functions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#Dynamic_styling_based_on_position\" >Dynamic styling based on position<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#ToolTip_component\" >ToolTip component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#Target%D8%AC%D8%B2%D8%A1\" >Target\u062c\u0632\u0621<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#%D8%AC%D8%B2%D8%A1_%D9%86%D9%85%D8%A7%DB%8C%D8%B4%DB%8C\" >\u062c\u0632\u0621 \u0646\u0645\u0627\u06cc\u0634\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86_%D9%88_%D8%AC%D9%84%D9%88%D9%87_%D9%87%D8%A7%DB%8C_%D9%87%D9%85%D8%B2%D9%85%D8%A7%D9%86\" >\u0686\u06cc\u062f\u0645\u0627\u0646 \u0648 \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0647\u0645\u0632\u0645\u0627\u0646<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#ToolTip_%D8%AC%D8%B2%D8%A1\" >ToolTip  \u062c\u0632\u0621<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#Target_%D8%AC%D8%B2%D8%A1\" >Target  \u062c\u0632\u0621<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#Demo_%D8%AC%D8%B2%D8%A1\" >Demo  \u062c\u0632\u0621<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#%D9%85%D8%B9%DB%8C%D8%A7%D8%B1%D9%87%D8%A7%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%AC%D8%AF%DB%8C%D8%AF\" >\u0645\u0639\u06cc\u0627\u0631\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#%D8%B4%D8%A8%DB%8C%D9%87_%D8%B3%D8%A7%D8%B2_%D9%85%D8%AC%D8%A7%D8%B2%DB%8C_Google_Pixel_5_API_33\" >\u0634\u0628\u06cc\u0647 \u0633\u0627\u0632 \u0645\u062c\u0627\u0632\u06cc: Google Pixel 5 API 33<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/react-natives-new-architecture-sync-and-async-rendering\/#LogRocket_%D9%81%D9%88%D8%B1%D8%A7%D9%8B_%D9%85%D8%B4%DA%A9%D9%84%D8%A7%D8%AA_%D8%B1%D8%A7_%D8%AF%D8%B1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_React_Native_%D8%AE%D9%88%D8%AF_%D8%AF%D9%88%D8%A8%D8%A7%D8%B1%D9%87_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >LogRocket: \u0641\u0648\u0631\u0627\u064b \u0645\u0634\u06a9\u0644\u0627\u062a \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React Native \u062e\u0648\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%AC%D8%AF%DB%8C%D8%AF_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>New Architecture \u0637\u0631\u0627\u062d\u06cc \u0645\u062c\u062f\u062f \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc React Native \u0628\u0631\u0627\u06cc \u0631\u0641\u0639 \u0686\u0627\u0644\u0634 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0648 \u0647\u0645\u0632\u0645\u0627\u0646 \u0631\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0637\u0648\u0631 \u0633\u0646\u062a\u06cc\u060c React Native \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u06a9\u062f \u0628\u0648\u0645\u06cc \u0628\u0647 \u06cc\u06a9 \u067e\u0644 \u0645\u062a\u06a9\u06cc \u0628\u0648\u062f. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647 \u062e\u0648\u0628\u06cc \u06a9\u0627\u0631 \u06a9\u0631\u062f\u060c \u0633\u0631\u0628\u0627\u0631 \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f. \u0627\u06a9\u0646\u0648\u0646\u060c New Architecture \u067e\u0644 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u06cc\u0646 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0628\u0648\u0645\u06cc \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0631\u0627\u0628\u0637 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (JSI) \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u06a9\u062f\u0647\u0627\u06cc \u0628\u0648\u0645\u06cc C\u060c C++ \u06cc\u0627 Kotlin (\u062f\u0631 \u0627\u0646\u062f\u0631\u0648\u06cc\u062f) \u0631\u0627 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0644 \u0632\u062f\u0646 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062d\u0627\u0641\u0638\u0647 \u0645\u0634\u062a\u0631\u06a9 \u0628\u06cc\u0646 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0644\u0627\u06cc\u0647 \u0647\u0627\u06cc \u0628\u0648\u0645\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f.<\/p>\n<p>\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 React Native \u0628\u0627 \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0647\u0631\u0645\u0633 \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9\u060c \u06a9\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0647 \u0627\u0633\u0645\u0628\u0644\u06cc \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u062c\u0641\u062a \u0634\u0648\u062f\u060c \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647 \u0633\u0631\u06cc\u0639 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646\u200c\u067e\u0630\u06cc\u0631 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/p>\n<p>\u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0633\u0627\u0626\u0644 \u0631\u0627\u06cc\u062c \u062f\u0631 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc\u060c \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0648\u062f\u0646 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0645\u06cc\u0627\u0646\u06cc \u06cc\u0627 \u067e\u0631\u0634 \u0647\u0627\u06cc \u0628\u0635\u0631\u06cc \u0628\u06cc\u0646 \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0637\u0631\u062d \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0647\u0627 \u0627\u0633\u062a.<\/p>\n<p>\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0634\u0627\u0645\u0644 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc \u0647\u0645\u0632\u0645\u0627\u0646\u060c \u0631\u0646\u062f\u0631 \u0647\u0645\u0632\u0645\u0627\u0646\u060c \u0631\u0627\u0628\u0637 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (JSI) \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 React 18+ \u0645\u0627\u0646\u0646\u062f \u0627\u0646\u062a\u0642\u0627\u0644 \u062a\u0639\u0644\u06cc\u0642\u060c \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631 \u0648 <code>useLayoutEffect<\/code>.<\/p>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0631\u0627 \u0647\u062f\u0641 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u0646\u062f\u060c \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%AC%D8%AF%DB%8C%D8%AF\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React Native 0.76 \u06cc\u0627 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0627 New Architecture \u0639\u0631\u0636\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06af\u0631 \u0627\u0632 Expo \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c React Native 0.76 \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 Expo SDK 52 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u0639\u0631\u0641\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0642\u062f\u06cc\u0645\u06cc \u062f\u0627\u0631\u06cc\u062f\u060c React Native Upgrade Helper \u0627\u0628\u0632\u0627\u0631 \u0645\u0641\u06cc\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0646\u062a\u0642\u0627\u0644 \u06a9\u062f React Native \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0646\u0633\u062e\u0647 \u0628\u0647 \u0646\u0633\u062e\u0647 \u062f\u06cc\u06af\u0631 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn14v84haieb9xlxffrqj.png\" alt=\"\u06a9\u0645\u06a9 \u06a9\u0646\u0646\u062f\u0647 \u0627\u0631\u062a\u0642\u0627\u0621 \u0628\u0648\u0645\u06cc react\" loading=\"lazy\" width=\"800\" height=\"450\" title=\"\"><\/p>\n<p>\u062a\u0646\u0647\u0627 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062c\u0631\u06cc\u0627\u0646 \u0641\u0639\u0644\u06cc \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f <code>react-native<\/code> \u0646\u0633\u062e\u0647 \u0648 \u0646\u0633\u062e\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0647 \u0622\u0646 \u0627\u0631\u062a\u0642\u0627 \u062f\u0647\u06cc\u062f. \u0633\u067e\u0633 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0644\u0627\u0632\u0645 \u0631\u0627 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u0635\u0631\u0627\u0641 \u0627\u0632 \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 <strong>\u0627\u0646\u062f\u0631\u0648\u06cc\u062f:<\/strong><\/p>\n<ol>\n<li>\n<p>\u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>android\/gradle.properties<\/code> \u0641\u0627\u06cc\u0644<\/p>\n<\/li>\n<li>\n<p>\u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f <code>newArchEnabled<\/code> \u067e\u0631\u0686\u0645 \u0627\u0632 <code>true<\/code> \u0628\u0647 <code>false<\/code><\/p>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/gradle.properties <\/span>\n    <span class=\"o\">+<\/span><span class=\"nx\">newArchEnabled<\/span><span class=\"o\">=<\/span><span class=\"kc\">false<\/span><span class=\"err\">\u00a0<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u0635\u0631\u0627\u0641 \u0627\u0632 \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 <strong>iOS:<\/strong><\/p>\n<ol>\n<li>  \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>ios\/Podfile<\/code> \u0641\u0627\u06cc\u0644<\/li>\n<li>\n<p>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>ENV['RCT_NEW_ARCH_ENABLED'] = '0'<\/code> \u062f\u0631 \u0645\u062d\u062f\u0648\u062f\u0647 \u0627\u0635\u0644\u06cc \u067e\u0627\u062f\u0641\u0627\u06cc\u0644 (\u0645\u0631\u062c\u0639 \u067e\u0627\u062f\u0641\u0627\u06cc\u0644 \u062f\u0631 \u0642\u0627\u0644\u0628):<\/p>\n<pre class=\"highlight ruby\"><code><span class=\"o\">+<\/span> <span class=\"no\">ENV<\/span><span class=\"p\">[<\/span><span class=\"s1\">'RCT_NEW_ARCH_ENABLED'<\/span><span class=\"p\">]<\/span><span class=\"o\">=<\/span> <span class=\"s1\">&#39;0&#39;<\/span>\n<span class=\"nb\">\u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f<\/span> <span class=\"no\">\u063a\u0644\u0627\u0641<\/span><span class=\"o\">::<\/span><span class=\"no\">\u0642\u0627\u0628\u0644 \u0627\u062c\u0631\u0627<\/span><span class=\"p\">.<\/span><span class=\"nf\">execute_command<\/span><span class=\"p\">(<\/span><span class=\"s1\">\"\u06af\u0631\u0647\"<\/span><span class=\"p\">\u060c<\/span> <span class=\"p\">[<\/span><span class=\"s1\">'-p'<\/span><span class=\"p\">,<\/span>  \n <span class=\"err\">'<\/span><span class=\"nb\">require<\/span><span class=\"p\">.<\/span><span class=\"nf\">resolve<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre>\n<\/li>\n<li>\n<p>Install your CocoaPods dependencies with the command:<\/p>\n<pre class=\"highlight ruby\"><code><span class=\"n\">bundle<\/span> <span class=\"nb\">exec<\/span> <span class=\"n\">pod<\/span> <span class=\"n\">install<\/span>\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>To understand async and sync rendering in React Native, you should be familiar with <code>UseLayoutEffect<\/code> vs. <code>UseEffect<\/code>in React.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Asynchronous_layout_and_effects\"><\/span>\n<p>  Asynchronous layout and effects<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>One of the most common issues with the legacy architecture was the visual glitches during layout changes. This is because developers needed to use the asynchronous <code>onLayout<\/code> event to read layout information of a view (which was also asynchronous). This caused at least one frame to render an incorrect layout before it could be read and updated.<\/p>\n<p>The New Architecture solves this issue by allowing synchronous access to layout information and ensuring properly scheduled updates. This way, users never see any intermediate state.<\/p>\n<p>To experience the improvements in performance and user experience provided by the New Architecture, we\u2019ll build an adaptive tooltip using the legacy architecture to experience the visual glitches.<\/p>\n<p>In the next section, we\u2019ll build the same using the New Architecture. You\u2019ll see that the tooltip will align perfectly without intermediate state jumps, which solves the visual glitches issue that causes a poor user experience.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Project_setup\"><\/span>\n<p>  Project setup<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ensure you have a React Native environment configured. Check out the React Native CLI Quickstart guide if you haven\u2019t done this.<\/p>\n<p>Run the following in your project folder:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx react-native init ToolTipApp\n<span class=\"nb\">cd <\/span>ToolTipApp\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Run_the_app\"><\/span>\n<p>  Run the app<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Start the Metro server:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx react-native start\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Open another terminal and run:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx react-native run-android\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>or:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx react-native run-ios\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Helper_functions\"><\/span>\n<p>  Helper functions<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We\u2019ll implement two helper functions to calculate the x and y positions of the tooltip based on:<\/p>\n<ul>\n<li>  The dimensions and position of the tooltip <code>(toolTip<\/code>)<\/li>\n<li>  The target element (<code>target<\/code>)<\/li>\n<li>  The boundaries of the root view (<code>rootView<\/code>)<\/li>\n<\/ul>\n<p>In the <code>src<\/code> directory, create a <code>utils<\/code> folder. Inside it, add a new file named <code>helper.js<\/code> and include the following code:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">calculateX<\/span><span class=\"p\">(<\/span><span class=\"nx\">toolTip<\/span><span class=\"p\">,<\/span> <span class=\"nx\">target<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rootView<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"nx\">toolTipX<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">2<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">toolTip<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span> \n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">toolTipX<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">rootView<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">toolTipX<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span><span class=\"p\">;<\/span> \n  <span class=\"p\">}<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">toolTipX<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">toolTip<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nx\">rootView<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">rootView<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">toolTipX<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">rootView<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">rootView<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">toolTip<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span><span class=\"p\">;<\/span> \n  <span class=\"p\">}<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">toolTipX<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">rootView<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span><span class=\"p\">;<\/span> \n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">calculateY<\/span><span class=\"p\">(<\/span><span class=\"nx\">toolTip<\/span><span class=\"p\">,<\/span> <span class=\"nx\">target<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rootView<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"nx\">toolTipY<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">toolTip<\/span><span class=\"p\">.<\/span><span class=\"nx\">height<\/span><span class=\"p\">;<\/span> \n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">toolTipY<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">rootView<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">toolTipY<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">height<\/span><span class=\"p\">;<\/span> \n  <span class=\"p\">}<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">toolTipY<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">rootView<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>We\u2019ll also create another helper function for artificial delays:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">wait<\/span><span class=\"p\">(<\/span><span class=\"nx\">ms<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">end<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">()<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">ms<\/span><span class=\"p\">;<\/span>\n  <span class=\"k\">while <\/span><span class=\"p\">(<\/span><span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">()<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">end<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Dynamic_styling_based_on_position\"><\/span>\n<p>  Dynamic styling based on position<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We\u2019ll create another helper function <code>getStyle<\/code> which returns the appropriate alignment styles for each tooltip position:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">getStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">position<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">switch <\/span><span class=\"p\">(<\/span><span class=\"nx\">position<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">case<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">top-left<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span>\n      <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"na\">justifyContent<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex-start<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">alignItems<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex-start<\/span><span class=\"dl\">'<\/span> <span class=\"p\">};<\/span>\n    <span class=\"k\">case<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">center-center<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span>\n      <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"na\">justifyContent<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">center<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">alignItems<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">center<\/span><span class=\"dl\">'<\/span> <span class=\"p\">};<\/span>\n    <span class=\"k\">case<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bottom-right<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span>\n      <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"na\">justifyContent<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex-end<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">alignItems<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex-end<\/span><span class=\"dl\">'<\/span> <span class=\"p\">};<\/span>\n    <span class=\"nl\">default<\/span><span class=\"p\">:<\/span>\n      <span class=\"k\">return<\/span> <span class=\"p\">{};<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"ToolTip_component\"><\/span>\n<p>  <code>ToolTip<\/code> component<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <code>ToolTip<\/code> component measures its dimensions (<code>rect<\/code>) asynchronously after layout and dynamically updates its position using the <code>calculateX<\/code> and <code>calculateY<\/code> functions.<\/p>\n<p>In the <code>src<\/code> directory, create a <code>components<\/code> folder. Inside it, add a new file named <code>ToolTip.jsx<\/code> and include the following code:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">View<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-native<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">calculateX<\/span><span class=\"p\">,<\/span> <span class=\"nx\">calculateY<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/utils\/helper<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">ToolTip<\/span><span class=\"p\">({<\/span> <span class=\"nx\">position<\/span><span class=\"p\">,<\/span> <span class=\"nx\">targetRect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rootRect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">ref<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">rect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setRect<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">\u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f<\/span><span class=\"p\">.<\/span><span class=\"nf\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0627\u0644\u062a<\/span><span class=\"p\">(<\/span><span class=\"kc\">\u062a\u0647\u06cc<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"kd\">\u067e\u0627\u06cc\u0627\u0646<\/span> <span class=\"nx\">onLayout<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">\u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f<\/span><span class=\"p\">.<\/span><span class=\"nf\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0645\u0627\u0633 \u0628\u0631\u06af\u0634\u062a\u06cc<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=><\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">\u0631\u062c\u0648\u0639 \u06a9\u0646\u06cc\u062f<\/span><span class=\"p\">.<\/span><span class=\"nx\">\u062c\u0627\u0631\u06cc<\/span><span class=\"p\">?.<\/span><span class=\"nf\">\u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u062f\u0631 \u067e\u0646\u062c\u0631\u0647<\/span><span class=\"p\">((<\/span><span class=\"nx\">x<\/span><span class=\"p\">\u060c<\/span> <span class=\"nx\">y<\/span><span class=\"p\">\u060c<\/span> <span class=\"nx\">\u0639\u0631\u0636<\/span><span class=\"p\">\u060c<\/span> <span class=\"nx\">\u0627\u0631\u062a\u0641\u0627\u0639<\/span><span class=\"p\">)<\/span> <span class=\"o\">=><\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setRect<\/span><span class=\"p\">({<\/span> <span class=\"nx\">x<\/span><span class=\"p\">\u060c<\/span> <span class=\"nx\">y<\/span><span class=\"p\">\u060c<\/span> <span class=\"nx\">\u0639\u0631\u0636<\/span><span class=\"p\">\u060c<\/span> <span class=\"nx\">\u0627\u0631\u062a\u0641\u0627\u0639<\/span> <span class=\"p\">})\u061b<\/span>\n    <span class=\"p\">})\u061b<\/span>\n  <span class=\"p\">}\u060c<\/span> <span class=\"p\">[])<\/span>\n\n  <span class=\"kd\">\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f<\/span> <span class=\"nx\">\u0633\u0645\u062a \u0686\u067e<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n  <span class=\"kd\">\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f<\/span> <span class=\"nx\">\u0628\u0627\u0644\u0627<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"k\">\u0627\u06af\u0631 <\/span><span class=\"p\">(<\/span><span class=\"nx\">\u0631\u0627\u0633\u062a<\/span> <span class=\"o\">&&<\/span> <span class=\"nx\">targetRect<\/span> <span class=\"o\">&&<\/span> <span class=\"nx\">rootRect<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">\u0633\u0645\u062a \u0686\u067e<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">\u0645\u062d\u0627\u0633\u0628\u0647 X<\/span><span class=\"p\">(<\/span><span class=\"nx\">\u0631\u0627\u0633\u062a<\/span><span class=\"p\">\u060c<\/span> <span class=\"nx\">targetRect<\/span><span class=\"p\">\u060c<\/span> <span class=\"nx\">rootRect<\/span><span class=\"p\">)<\/span> \n    <span class=\"nx\">\u0628\u0627\u0644\u0627<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">\u0645\u062d\u0627\u0633\u0628\u0647 Y<\/span><span class=\"p\">(<\/span><span class=\"nx\">\u0631\u0627\u0633\u062a<\/span><span class=\"p\">\u060c<\/span> <span class=\"nx\">targetRect<\/span><span class=\"p\">\u060c<\/span> <span class=\"nx\">rootRect<\/span><span class=\"p\">)<\/span> \n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">\u0628\u0627\u0632\u06af\u0634\u062a <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\"><<\/span><span class=\"nx\">\u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/span>\n      <span class=\"nx\">\u0631\u062c\u0648\u0639 \u06a9\u0646\u06cc\u062f<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">\u0631\u062c\u0648\u0639 \u06a9\u0646\u06cc\u062f<\/span><span class=\"p\">}<\/span>\n      <span class=\"nx\">onLayout<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onLayout<\/span><span class=\"p\">}<\/span>\n      <span class=\"nx\">\u0633\u0628\u06a9<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span>\n        <span class=\"na\">\u0645\u0648\u0642\u0639\u06cc\u062a<\/span><span class=\"p\">:<\/span> <span class=\"dl\">&#39;<\/span><span class=\"s1\">\u0645\u0637\u0644\u0642<\/span><span class=\"dl\">&#39;<\/span><span class=\"p\">\u060c<\/span>\n        <span class=\"na\">\u0645\u0631\u0632 \u0631\u0646\u06af<\/span><span class=\"p\">:<\/span> <span class=\"dl\">&#39;<\/span><span class=\"s1\">\u0633\u0628\u0632<\/span><span class=\"dl\">&#39;<\/span><span class=\"p\">\u060c<\/span>\n        <span class=\"na\">\u0639\u0631\u0636 \u0645\u0631\u0632<\/span><span class=\"p\">:<\/span> <span class=\"mi\">2<\/span><span class=\"p\">\u060c<\/span>\n        <span class=\"na\">\u0634\u0639\u0627\u0639 \u0645\u0631\u0632\u06cc<\/span><span class=\"p\">:<\/span> <span class=\"mi\">8<\/span><span class=\"p\">\u060c<\/span>\n        <span class=\"na\">\u0628\u0627\u0644\u0634\u062a\u06a9<\/span><span class=\"p\">:<\/span> <span class=\"mi\">4<\/span><span class=\"p\">\u060c<\/span>\n        <span class=\"nx\">\u0628\u0627\u0644\u0627<\/span><span class=\"p\">\u060c<\/span>\n        <span class=\"nx\">\u0633\u0645\u062a \u0686\u067e<\/span><span class=\"p\">\u060c<\/span>\n      <span class=\"p\">}}<\/span>\n    <span class=\"o\">><\/span>\n      <span class=\"p\">{<\/span><span class=\"nx\">\u06a9\u0648\u062f\u06a9\u0627\u0646<\/span><span class=\"p\">}<\/span>\n    <span class=\"o\"><<\/span><span class=\"sr\">\/\u0646\u0645\u0627\u06cc\u0634<\/span><span class=\"err\">>\n<\/span>  <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0627\u0632 a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>ref<\/code> \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u06cc\u06a9 \u0645\u0631\u062c\u0639 \u0628\u0647 <code>View<\/code> \u0639\u0646\u0635\u0631\u060c \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0628\u0639\u0627\u062f \u0648 \u0645\u0648\u0642\u0639\u06cc\u062a \u0622\u0646 \u0631\u0627 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 <code>onLayout<\/code> \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc \u0635\u0641\u062d\u0647\u200c\u0622\u0631\u0627\u06cc\u06cc \u0627\u0646\u062c\u0627\u0645 \u0634\u0648\u062f\u060c \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f <code>View<\/code> \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc\u060c <code>measureInWindow<\/code> \u0645\u062a\u062f \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>x<\/code>\u060c <code>y<\/code>\u060c <code>width<\/code>\u060c \u0648 <code>height<\/code>\u060c \u06a9\u0647 \u0633\u067e\u0633 \u062f\u0631 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f <code>rect<\/code> \u062f\u0648\u0644\u062a<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Target%D8%AC%D8%B2%D8%A1\"><\/span>\n<p>  <code>Target<\/code>\u062c\u0632\u0621<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 <code>Target<\/code> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0628\u0639\u0627\u062f \u0622\u0646 \u0631\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0647 \u0622\u0646 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u06a9\u0646\u062f <code>ToolTip<\/code> \u062c\u0632\u0621<\/p>\n<p>\u062f\u0631 <code>components<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>Target.jsx<\/code> \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0634\u0627\u0645\u0644 \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">Pressable<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">View<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-native<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ToolTip<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/ToolTip<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Target<\/span><span class=\"p\">({<\/span> <span class=\"nx\">toolTipText<\/span><span class=\"p\">,<\/span> <span class=\"nx\">targetText<\/span><span class=\"p\">,<\/span> <span class=\"nx\">position<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rootRect<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">targetRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">rect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setRect<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">onLayout<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useCallback<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">targetRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">measureInWindow<\/span><span class=\"p\">((<\/span><span class=\"nx\">x<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">,<\/span> <span class=\"nx\">width<\/span><span class=\"p\">,<\/span> <span class=\"nx\">height<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setRect<\/span><span class=\"p\">({<\/span> <span class=\"nx\">x<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">,<\/span> <span class=\"nx\">width<\/span><span class=\"p\">,<\/span> <span class=\"nx\">height<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">View<\/span>\n        <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">targetRef<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">onLayout<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onLayout<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span>\n          <span class=\"na\">borderColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">red<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">borderWidth<\/span><span class=\"p\">:<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">padding<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}}<\/span>\n      <span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Text<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">targetText<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Text<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/View<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">ToolTip<\/span> <span class=\"nx\">position<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">position<\/span><span class=\"p\">}<\/span> <span class=\"nx\">rootRect<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">rootRect<\/span><span class=\"p\">}<\/span> <span class=\"nx\">targetRect<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">rect<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Text<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">toolTipText<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Text<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ToolTip<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>useCallback<\/code> \u0628\u0631\u0627\u06cc \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc\u200c\u0647\u0627\u06cc \u0646\u0645\u0627 \u0648 \u0633\u067e\u0633 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u0648\u0642\u0639\u06cc\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AC%D8%B2%D8%A1_%D9%86%D9%85%D8%A7%DB%8C%D8%B4%DB%8C\"><\/span>\n<p>  \u062c\u0632\u0621 \u0646\u0645\u0627\u06cc\u0634\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u062c\u0632\u0621 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0645\u0648\u0642\u0639\u06cc\u062a a \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f <code>Target<\/code> \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0631 \u0647\u0631 \u062b\u0627\u0646\u06cc\u0647\u060c \u062f\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0645\u06cc \u0686\u0631\u062e\u062f\u060c \u0648 \u0627\u0628\u0639\u0627\u062f \u0646\u0645\u0627\u06cc \u0631\u06cc\u0634\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627\u06cc \u0646\u0633\u0628\u06cc \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 <code>components<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>Demo.jsx<\/code> \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0634\u0627\u0645\u0644 \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">Text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">View<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-native<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Target<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Target<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Demo<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">positions<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">top-left<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">top-right<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">center-center<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bottom-left<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bottom-right<\/span><span class=\"dl\">'<\/span><span class=\"p\">];<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">index<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIndex<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">rect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setRect<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">ref<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">interval<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">setInterval<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setIndex<\/span><span class=\"p\">((<\/span><span class=\"nx\">prevIndex<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span><span class=\"nx\">prevIndex<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"o\">%<\/span> <span class=\"nx\">positions<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">);<\/span> \n    <span class=\"p\">},<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">clearInterval<\/span><span class=\"p\">(<\/span><span class=\"nx\">interval<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">onLayout<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useCallback<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">measureInWindow<\/span><span class=\"p\">((<\/span><span class=\"nx\">x<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">,<\/span> <span class=\"nx\">width<\/span><span class=\"p\">,<\/span> <span class=\"nx\">height<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setRect<\/span><span class=\"p\">({<\/span> <span class=\"nx\">x<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">,<\/span> <span class=\"nx\">width<\/span><span class=\"p\">,<\/span> <span class=\"nx\">height<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">position<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">positions<\/span><span class=\"p\">[<\/span><span class=\"nx\">index<\/span><span class=\"p\">];<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">style<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">getStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">position<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Text<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">margin<\/span><span class=\"p\">:<\/span> <span class=\"mi\">20<\/span> <span class=\"p\">}}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Position<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nx\">position<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Text<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">View<\/span> <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">ref<\/span><span class=\"p\">}<\/span> <span class=\"nx\">onLayout<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onLayout<\/span><span class=\"p\">}<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">style<\/span><span class=\"p\">,<\/span> <span class=\"na\">flex<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"na\">borderWidth<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span> <span class=\"p\">}}<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Target<\/span> <span class=\"nx\">toolTipText<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">This is the tooltip<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">targetText<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">This is the target<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">position<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">position<\/span><span class=\"p\">}<\/span> <span class=\"nx\">rootRect<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">rect<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/View<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 <code>useEffect<\/code> \u0647\u0648\u06a9\u060c \u0641\u0627\u0635\u0644\u0647\u200c\u0627\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0634\u0627\u062e\u0635 \u0645\u0648\u0642\u0639\u06cc\u062a \u062f\u0631 \u0647\u0631 \u062b\u0627\u0646\u06cc\u0647 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u0622\u0631\u0627\u06cc\u0647 \u0631\u0633\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0627\u0644\u0641 \u0631\u0627 \u0646\u06cc\u0632 \u067e\u06cc\u0648\u0633\u062a \u06a9\u0631\u062f\u06cc\u0645 <code>ref<\/code> \u0628\u0647 \u0631\u06cc\u0634\u0647 <code>View<\/code> \u0638\u0631\u0641 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f <code>measureInWindow<\/code> \u0631\u0648\u0634 \u062f\u0631 <code>onLayout<\/code> \u067e\u0627\u0633\u062e \u062a\u0645\u0627\u0633 \u0628\u0631\u0627\u06cc \u06af\u0631\u0641\u062a\u0646 <code>x<\/code>\u060c <code>y<\/code>\u060c <code>width<\/code>\u060c \u0648 <code>height<\/code> \u0627\u0632 \u0638\u0631\u0641 \u0631\u06cc\u0634\u0647 \u0627\u06cc\u0646 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0631 <code>rect<\/code> \u062f\u0648\u0644\u062a \u0648 \u0628\u0647 \u062a\u0635\u0648\u06cc\u0628 \u0631\u0633\u06cc\u062f <code>Target<\/code> \u062c\u0632\u0621\u060c \u0648 \u0622\u0646 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u0646\u0648\u06a9 \u0627\u0628\u0632\u0627\u0631 \u062e\u0648\u062f \u0631\u0627 \u0646\u0633\u0628\u062a \u0628\u0647 \u0645\u062d\u0641\u0638\u0647 \u0631\u06cc\u0634\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0645\u0648 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0634\u0628\u06cc\u0647 \u0628\u0627\u0634\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftrulkp0eq1ob4w3ntkta.gif\" alt=\"\u0645\u0624\u0644\u0641\u0647 \u0646\u0645\u0627\u06cc\u0634\u06cc\" loading=\"lazy\" width=\"627\" height=\"1121\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u0628\u0647 \u062a\u0641\u0627\u0648\u062a \u0632\u0645\u0627\u0646\u06cc \u0628\u06cc\u0646 \u062d\u0631\u06a9\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0648 \u062c\u0632\u0621 \u0647\u062f\u0641 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u0628\u0635\u0631\u06cc \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647\u062a\u0631\u060c \u0647\u0631 \u062f\u0648 \u0645\u0624\u0644\u0641\u0647 \u0628\u0627\u06cc\u062f \u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0627 \u0647\u0645 \u062d\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86_%D9%88_%D8%AC%D9%84%D9%88%D9%87_%D9%87%D8%A7%DB%8C_%D9%87%D9%85%D8%B2%D9%85%D8%A7%D9%86\"><\/span>\n<p>  \u0686\u06cc\u062f\u0645\u0627\u0646 \u0648 \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0647\u0645\u0632\u0645\u0627\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc \u0648 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0631\u06cc\u0632\u06cc\u200c\u0634\u062f\u0647 \u0628\u0647\u200c\u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0627\u0632 \u0645\u0634\u06a9\u0644\u0627\u062a \u0628\u0635\u0631\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0628\u0647 \u0637\u0648\u0631\u06cc \u06a9\u0647 \u0647\u06cc\u0686 \u062d\u0627\u0644\u062a \u0645\u06cc\u0627\u0646\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0628\u0627\u0634\u062f.<\/p>\n<p>\u0628\u0627 \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>[useLayoutEffect](https:\/\/react.dev\/reference\/react\/useLayoutEffect)<\/code> \u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc \u0648 \u0627\u0639\u0645\u0627\u0644 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc \u0628\u0647 \u0637\u0648\u0631 \u0647\u0645\u0632\u0645\u0627\u0646 \u062f\u0631 \u06cc\u06a9 commit\u060c \u0627\u0632 \u00ab\u067e\u0631\u0634\u00bb \u0628\u0635\u0631\u06cc \u0627\u062c\u062a\u0646\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"ToolTip_%D8%AC%D8%B2%D8%A1\"><\/span>\n<p>  <code>ToolTip<\/code>  \u062c\u0632\u0621<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f <code>targetRect<\/code>\u060c <code>rootRect<\/code>\u0648 \u0627\u0628\u0639\u0627\u062f \u062e\u0627\u0635 \u0622\u0646:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">ToolTip<\/span><span class=\"p\">({<\/span><span class=\"nx\">position<\/span><span class=\"p\">,<\/span> <span class=\"nx\">targetRect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rootRect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">children<\/span><span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">ref<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">rect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setRect<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useLayoutEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">wait<\/span><span class=\"p\">(<\/span><span class=\"mi\">200<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Simulate delay<\/span>\n    <span class=\"nf\">setRect<\/span><span class=\"p\">(<\/span><span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">getBoundingClientRect<\/span><span class=\"p\">());<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">setRect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">position<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"kd\">let<\/span> <span class=\"nx\">left<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">top<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">rect<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">targetRect<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">rootRect<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">left<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">calculateX<\/span><span class=\"p\">(<\/span><span class=\"nx\">rect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">targetRect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rootRect<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">top<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">calculateY<\/span><span class=\"p\">(<\/span><span class=\"nx\">rect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">targetRect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rootRect<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">View<\/span>\n      <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">ref<\/span><span class=\"p\">}<\/span>\n      <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span>\n        <span class=\"na\">position<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">absolute<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">borderColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">green<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">borderRadius<\/span><span class=\"p\">:<\/span> <span class=\"mi\">8<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">borderWidth<\/span><span class=\"p\">:<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">padding<\/span><span class=\"p\">:<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">top<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">left<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}}<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/View<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 <code>useLayoutEffect<\/code> \u0647\u0648\u06a9\u060c \u0645\u0627 \u06cc\u06a9 \u062a\u0627\u062e\u06cc\u0631 \u0631\u0627 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 (\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>wait<\/code> function) \u0648 \u0633\u067e\u0633 \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u0648\u0642\u0639\u06cc\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>getBoundingClientRect()<\/code> \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0631\u062c\u0627\u0639 \u0634\u062f\u0647 <code>View<\/code> \u0639\u0646\u0635\u0631 \u0627\u06cc\u0646 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0631 <code>rect<\/code> \u062d\u0627\u0644\u062a \u0648 \u0628\u0631\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0646\u0633\u0628\u062a \u0628\u0647 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0648 \u0638\u0631\u0641 \u0631\u06cc\u0634\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>calculateX<\/code> \u0648 <code>calculateY<\/code> \u062a\u0648\u0627\u0628\u0639<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Target_%D8%AC%D8%B2%D8%A1\"><\/span>\n<p>  <code>Target<\/code>  \u062c\u0632\u0621<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0631\u0627 \u0646\u0633\u0628\u062a \u0628\u0647 \u062e\u0648\u062f\u0634 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0628\u0639\u0627\u062f \u0622\u0646 \u0631\u0627 \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>getBoundingClientRect<\/code>.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">Target<\/span><span class=\"p\">({<\/span><span class=\"nx\">toolTipText<\/span><span class=\"p\">,<\/span> <span class=\"nx\">targetText<\/span><span class=\"p\">,<\/span> <span class=\"nx\">position<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rootRect<\/span><span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">targetRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">rect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setRect<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useLayoutEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">wait<\/span><span class=\"p\">(<\/span><span class=\"mi\">200<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Simulate delay<\/span>\n    <span class=\"nf\">setRect<\/span><span class=\"p\">(<\/span><span class=\"nx\">targetRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">getBoundingClientRect<\/span><span class=\"p\">());<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">setRect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">position<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">View<\/span>\n        <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">targetRef<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span>\n          <span class=\"na\">borderColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">red<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">borderWidth<\/span><span class=\"p\">:<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">padding<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}}<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Text<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">targetText<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Text<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/View<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">ToolTip<\/span> <span class=\"nx\">position<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">position<\/span><span class=\"p\">}<\/span> <span class=\"nx\">rootRect<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">rootRect<\/span><span class=\"p\">}<\/span> <span class=\"nx\">targetRect<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">rect<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Text<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">toolTipText<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Text<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ToolTip<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>useRef<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0631\u062c\u0639 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 (<code>targetRef<\/code>) \u0648 <code>useState<\/code> \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0627\u0628\u0639\u0627\u062f \u0648 \u0645\u0648\u0642\u0639\u06cc\u062a \u0622\u0646 (<code>rect<\/code>). \u062f\u0631 <code>useLayoutEffect<\/code> \u0647\u0648\u06a9\u060c \u0645\u0627 \u06cc\u06a9 \u062a\u0627\u062e\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>wait<\/code> \u062a\u0627\u0628\u0639\u060c \u0633\u067e\u0633 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc <code>rect<\/code> \u0627\u06cc\u0627\u0644\u062a \u0628\u0627 \u062a\u0645\u0627\u0633 <code>getBoundingClientRect()<\/code> \u0631\u0648\u06cc \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u0645\u0648\u0642\u0639\u06cc\u062a \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0622\u0646.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Demo_%D8%AC%D8%B2%D8%A1\"><\/span>\n<p>  <code>Demo<\/code>  \u062c\u0632\u0621<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0628\u0627 \u0686\u0631\u062e\u0634 \u062f\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627\u06cc \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 \u0647\u0631 \u062b\u0627\u0646\u06cc\u0647\u060c \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a \u067e\u0648\u06cc\u0627 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">Demo<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">toolTipText<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">This is the tooltip<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">targetText<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">This is the target<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">ref<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">index<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIndex<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">rect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setRect<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">setPosition<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">setInterval<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setIndex<\/span><span class=\"p\">((<\/span><span class=\"nx\">index<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"o\">%<\/span> <span class=\"nx\">positions<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Cycle positions<\/span>\n    <span class=\"p\">},<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">clearInterval<\/span><span class=\"p\">(<\/span><span class=\"nx\">setPosition<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">index<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">position<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">positions<\/span><span class=\"p\">[<\/span><span class=\"nx\">index<\/span><span class=\"p\">];<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">style<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">getStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">position<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useLayoutEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">wait<\/span><span class=\"p\">(<\/span><span class=\"mi\">200<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setRect<\/span><span class=\"p\">(<\/span><span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">getBoundingClientRect<\/span><span class=\"p\">());<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">setRect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">position<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Text<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span><span class=\"na\">margin<\/span><span class=\"p\">:<\/span> <span class=\"mi\">20<\/span><span class=\"p\">}}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Position<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nx\">position<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Text<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">View<\/span>\n        <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{...<\/span><span class=\"nx\">style<\/span><span class=\"p\">,<\/span> <span class=\"na\">flex<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"na\">borderWidth<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">}}<\/span>\n        <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">ref<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Target<\/span>\n          <span class=\"nx\">toolTipText<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">toolTipText<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">targetText<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">targetText<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">rootRect<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">rect<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">position<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">position<\/span><span class=\"p\">}<\/span>\n        <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/View<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0631\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>index<\/code> \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0645\u0648\u0642\u0639\u06cc\u062a \u0641\u0639\u0644\u06cc\u060c \u06a9\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0686\u0631\u062e\u0647 <code>positions<\/code> \u0622\u0631\u0627\u06cc\u0647 \u0647\u0631 \u062b\u0627\u0646\u06cc\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>setInterval<\/code> \u062f\u0631 \u06cc\u06a9 <code>useEffect<\/code> \u0642\u0644\u0627\u0628. \u0627\u06cc\u0646 <code>position<\/code> \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0631\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u0633\u0628\u06a9 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0628\u0631\u0627\u06cc \u0631\u06cc\u0634\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f <code>View<\/code> \u0638\u0631\u0641 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>getStyle<\/code> \u062a\u0627\u0628\u0639<\/p>\n<p>\u0627\u06cc\u0646 <code>useLayoutEffect<\/code> \u0627\u0632 \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u0627\u0628\u0639\u0627\u062f \u0648 \u0645\u0648\u0642\u0639\u06cc\u062a \u0638\u0631\u0641 \u0631\u06cc\u0634\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f (<code>ref<\/code>) \u067e\u0633 \u0627\u0632 \u06cc\u06a9 \u062a\u0627\u062e\u06cc\u0631 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0634\u062f\u0647\u060c \u0630\u062e\u06cc\u0631\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0631 <code>rect<\/code> \u062f\u0648\u0644\u062a \u0627\u06cc\u0646 <code>rect<\/code> \u0633\u067e\u0633 \u0628\u0647 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u0634\u0648\u062f <code>Target<\/code> \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 \u0646\u0633\u0628\u062a \u0628\u0647 \u0645\u062d\u0641\u0638\u0647 \u0631\u06cc\u0634\u0647.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0645\u0648 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0634\u0628\u06cc\u0647 \u0628\u0627\u0634\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8g66tfras2cgki9zye3l.gif\" alt=\"\u0645\u0648\u0644\u0641\u0647 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0631\u0646\u062f\u0631 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0628\u0648\u0645\u06cc react\" loading=\"lazy\" width=\"627\" height=\"1121\" data-animated=\"true\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B9%DB%8C%D8%A7%D8%B1%D9%87%D8%A7%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%AC%D8%AF%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0639\u06cc\u0627\u0631\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062a\u06cc\u0645 React Native \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u062a\u0631\u06a9\u06cc\u0628 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0648 \u062c\u062f\u06cc\u062f \u0648 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0634\u06a9\u0627\u0641 \u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u062f\u0631 \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0645\u0639\u06cc\u0627\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0631\u0632\u06cc\u0627\u0628\u06cc \u062a\u0641\u0627\u0648\u062a\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0628\u06cc\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0648 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0648 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0644\u0648\u0646 \u06a9\u0631\u062f\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">git<\/span> <span class=\"nx\">clone<\/span> <span class=\"o\">--<\/span><span class=\"nx\">branch<\/span> <span class=\"k\">new<\/span><span class=\"o\">-<\/span><span class=\"nx\">architecture<\/span><span class=\"o\">-<\/span><span class=\"nx\">benchmarks<\/span> <span class=\"nx\">https<\/span><span class=\"p\">:<\/span><span class=\"c1\">\/\/github.com\/react-native-community\/RNNewArchitectureApp<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633\u060c \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">cd<\/span> <span class=\"nx\">RNNewArchitectureApp<\/span><span class=\"o\">\/<\/span><span class=\"nx\">App<\/span>\n<span class=\"nx\">yarn<\/span> <span class=\"nx\">install<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">RCT_NEW_ARCH_ENABLED<\/span><span class=\"o\">=<\/span><span class=\"mi\">1<\/span> <span class=\"nx\">npx<\/span> <span class=\"nx\">pod<\/span><span class=\"o\">-<\/span><span class=\"nx\">install<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0631\u06a9\u062a \u0628\u0647 <code>ios<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">cd<\/span> <span class=\"nx\">ios<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>MeasurePerformance.xcworkspace<\/code>. \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f <code>CMD + I<\/code> \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0647\u06cc\u0646\u0647 \u06cc\u0627 <code>CMD + R<\/code> \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0631\u0648\u06cc\u062f\u060c \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0627 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">yarn<\/span> <span class=\"nx\">android<\/span> <span class=\"o\">--<\/span><span class=\"nx\">mode<\/span> <span class=\"nx\">release<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>yarn android<\/code> \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631 \u062d\u0627\u0644\u062a \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0634\u0628\u06cc\u0647 \u0628\u0627\u0634\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsxomkvio9q1ab488az4u.jpeg\" alt=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u062c\u0631\u0627\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc\" loading=\"lazy\" width=\"472\" height=\"1023\" title=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa47gjn4m98lbebsynbwi.jpeg\" alt=\"\u0632\u0645\u0627\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0628\u0631\u0627\u06cc \u062f\u0648\u06cc\u062f\u0646\" loading=\"lazy\" width=\"472\" height=\"1023\" title=\"\"><\/p>\n<p>\u0631\u0648\u06cc \u0647\u0631 \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u0686\u0642\u062f\u0631 \u0637\u0648\u0644 \u0645\u06cc \u06a9\u0634\u062f \u062a\u0627 \u0627\u062c\u0632\u0627\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0639\u062f\u060c \u0628\u0647 <strong>\u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f<\/strong> \u0628\u0631\u06af\u0647\u060c \u0641\u0631\u0622\u06cc\u0646\u062f \u0631\u0627 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u0646\u062a\u0627\u06cc\u062c \u0631\u0627 \u0628\u0627 \u0647\u0645 \u0645\u0642\u0627\u06cc\u0633\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0627\u06cc \u0627\u0632 \u0646\u062a\u0627\u06cc\u062c \u0645\u0646 \u0627\u0633\u062a:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B4%D8%A8%DB%8C%D9%87_%D8%B3%D8%A7%D8%B2_%D9%85%D8%AC%D8%A7%D8%B2%DB%8C_Google_Pixel_5_API_33\"><\/span>\n<p>  \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632 \u0645\u062c\u0627\u0632\u06cc: Google Pixel 5 API 33<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"table-wrapper-paragraph\">\n<table>\n<thead>\n<tr>\n<th>\u0633\u0646\u0627\u0631\u06cc\u0648<\/th>\n<th>\u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc<\/th>\n<th>\u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f<\/th>\n<th>\u062a\u0641\u0627\u0648\u062a<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1500<\/td>\n<td>282 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>252 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>\u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f 8\u066a \u0633\u0631\u06cc\u0639\u062a\u0631 \u0627\u0633\u062a<\/td>\n<\/tr>\n<tr>\n<td>5000<\/td>\n<td>1088 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>1035 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>\u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f 4\u066a \u0633\u0631\u06cc\u0639\u062a\u0631 \u0627\u0633\u062a<\/td>\n<\/tr>\n<tr>\n<td>1500<\/td>\n<td>512 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>503 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>\u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f 1\u066a \u0633\u0631\u06cc\u0639\u062a\u0631 \u0627\u0633\u062a<\/td>\n<\/tr>\n<tr>\n<td>5000<\/td>\n<td>2156 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>2083 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>\u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f 3\u066a \u0633\u0631\u06cc\u0639\u062a\u0631 \u0627\u0633\u062a<\/td>\n<\/tr>\n<tr>\n<td>1500<\/td>\n<td>406 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>402 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>\u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0628\u0627 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc \u062e\u0646\u062b\u06cc \u0627\u0633\u062a<\/td>\n<\/tr>\n<tr>\n<td>5000<\/td>\n<td>1414 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>1378 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647<\/td>\n<td>\u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f 3\u066a \u0633\u0631\u06cc\u0639\u062a\u0631 \u0627\u0633\u062a<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0631\u0646\u062f\u0631 \u0647\u0645\u0632\u0645\u0627\u0646 \u0648 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0631\u0627 \u062f\u0631 React Native \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0639\u0645\u0644\u06cc \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u06cc\u0645 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0648 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0627 \u0647\u0645 \u0645\u0642\u0627\u06cc\u0633\u0647 \u06a9\u0631\u062f\u06cc\u0645. \u0628\u0627 \u0646\u062a\u0627\u06cc\u062c \u0645\u0639\u06cc\u0627\u0631\u060c \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647 \u0627\u062a\u062e\u0627\u0630 \u0627\u06cc\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u0645. \u0627\u06af\u0631 \u0627\u0632 React Native 0.76 \u06cc\u0627 \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c New Architecture \u0642\u0628\u0644\u0627\u064b \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u062e\u0627\u0631\u062c \u0627\u0632 \u062c\u0639\u0628\u0647 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u0636\u0627\u0641\u06cc \u0646\u062f\u0627\u0631\u062f.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"LogRocket_%D9%81%D9%88%D8%B1%D8%A7%D9%8B_%D9%85%D8%B4%DA%A9%D9%84%D8%A7%D8%AA_%D8%B1%D8%A7_%D8%AF%D8%B1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_React_Native_%D8%AE%D9%88%D8%AF_%D8%AF%D9%88%D8%A8%D8%A7%D8%B1%D9%87_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  LogRocket: \u0641\u0648\u0631\u0627\u064b \u0645\u0634\u06a9\u0644\u0627\u062a \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React Native \u062e\u0648\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F96e6oorkzy1vl0vm12sp.png\" alt=\"\u0641\u0648\u0631\u0627\u064b \u0645\u0634\u06a9\u0644\u0627\u062a \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React Native \u062e\u0648\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"398\" title=\"\"><\/p>\n<p>LogRocket \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0646\u0638\u0627\u0631\u062a\u06cc React Native \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0645\u0634\u06a9\u0644\u0627\u062a \u0631\u0627 \u0641\u0648\u0631\u0627\u064b \u0628\u0627\u0632\u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u062f\u060c \u0627\u0634\u06a9\u0627\u0644\u0627\u062a \u0631\u0627 \u0627\u0648\u0644\u0648\u06cc\u062a \u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React Native \u062e\u0648\u062f \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>LogRocket \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0646\u062d\u0648\u0647 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627\u060c \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0646\u0631\u062e \u062a\u0628\u062f\u06cc\u0644 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f. \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u0645\u062d\u0635\u0648\u0644 LogRocket \u062f\u0644\u0627\u06cc\u0644\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0686\u0631\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u06cc\u06a9 \u062c\u0631\u06cc\u0627\u0646 \u062e\u0627\u0635 \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u0646\u0645\u06cc \u06a9\u0646\u0646\u062f \u06cc\u0627 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062c\u062f\u06cc\u062f \u0631\u0627 \u0627\u062a\u062e\u0627\u0630 \u0646\u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0646\u0638\u0627\u0631\u062a \u0641\u0639\u0627\u0644 \u0628\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc React Native \u062e\u0648\u062f \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f &#8211; LogRocket \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0627\u06cc\u06af\u0627\u0646 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0646\u0648\u0634\u062a\u0647 \u0627\u0645\u0627\u0646\u0648\u0626\u0644 \u062c\u0627\u0646\u270f\ufe0f React Native \u0628\u0627 \u0627\u0646\u062a\u0634\u0627\u0631 New Architecture \u062e\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0627\u062f. New Architecture \u06a9\u0647 \u0627\u06a9\u0646\u0648\u0646 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0646\u0635\u0628\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0633\u062a\u060c \u0628\u0647 \u0634\u06a9\u0627\u06cc\u0627\u062a \u062f\u06cc\u0631\u06cc\u0646\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0633\u0631\u0639\u062a \u0648 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06af\u0631 \u0627\u0632 React Native 0.76 \u06cc\u0627 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0627\u06cc\u0646 \u067e\u06cc\u0634\u0631\u0641\u062a\u200c\u0647\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f \u0648 \u0632\u0645\u0627\u0646 \u0647\u06cc\u062c\u0627\u0646\u200c\u0627\u0646\u06af\u06cc\u0632\u06cc \u0628\u0631\u0627\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":90845,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyxu8kmul76szlfapeluo.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-90844","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/90844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=90844"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/90844\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/90845"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=90844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=90844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=90844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}