{"id":9311,"date":"2024-05-24T10:58:22","date_gmt":"2024-05-24T10:58:22","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=9311"},"modified":"2024-05-24T11:03:12","modified_gmt":"2024-05-24T11:03:12","slug":"react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/","title":{"rendered":"React Native 0.74 &#8211; Yoga 3.0, Bridgeless New Architecture, and more"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">With its previous hit of <\/span><a href=\"https:\/\/dianapps.com\/blog\/whats-in-the-new-react-native-0-73\/\"><span style=\"font-weight: 400;\">0.73<\/span><\/a><span style=\"font-weight: 400;\">, the React Native development community is back with yet another noteworthy release\u2013 the React Native 0.74.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this update, developers will observe some ground-breaking feature renewals along with easy and effective mobile app development solutions that are said to behave in the most commendable manner. To add more, React Native has also released Yoga 3.0 (an ultimate web component support) with a new package manager Yarn 3 that has replaced Yarn Classic.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Starting off, we have a lot of updates coming from React Native 0.74! Let\u2019s catch them all in this blog!\u00a0<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"The-Limelight-of-React-Native-074\"><\/span><span style=\"font-weight: 400;\">The Limelight of React Native 0.74<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<h2><span class=\"ez-toc-section\" id=\"The-Yoga-30\"><\/span><span style=\"font-weight: 400;\">The Yoga 3.0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">First off let\u2019s deeply understand what is Yoga in React Native.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Yoga is an open-source, cross-platform layout engine that is developed by Facebook. It is designed to work with React Native and provides a flexible, high-performance layout system that can be used to build complex responsive user interfaces. Yoga is based on the <\/span><a href=\"https:\/\/dianapps.com\/blog\/how-to-use-flexbox-in-react-native\/\"><span style=\"font-weight: 400;\">Flexbox layout model<\/span><\/a><span style=\"font-weight: 400;\">, which provides a simple and intuitive way to define the layout of a user interface.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The main feature of React Native 0.74 is the incorporation of Yoga 3.0, which is the most recent version of the layout engine that renders Uls in your application. Yoga 3.0 places a high priority on predictable layout behavior, which is essential to ensuring a consistent user experience on a range of screens and devices. This predictability results from a more comprehensive set of rules that control the size and placement of items in the layout of your program.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Even while predictability is crucial, the React Native team is aware of the enormous ecosystem of current codebases. Some old layout characteristics have been painstakingly maintained to guarantee compatibility with a large number of real-world applications. Future iterations, on the other hand, will provide developers with more precise control over layout conformity, letting them customize the rendering behavior to suit their requirements.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A crucial caveat to remember with Yoga 3.0 is its revised handling of edges within row-reverse containers. It flips the behavior of left\/right and start\/end edges when dealing with margins, paddings, or borders. This aligns with web conventions but might necessitate adjustments in your existing code that previously relied on the inverted behavior.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Embrace Yoga 3.0 to harness the following benefits:\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Simplified-Layout-Development\"><\/span><span style=\"font-weight: 400;\">Simplified Layout Development<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Predicted layouts translate to less time debugging unexpected rendering issues.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Enhanced-Cross-Platform-Consistency\"><\/span><span style=\"font-weight: 400;\">Enhanced Cross-Platform Consistency<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your app\u2019s UI will behave as intended on various devices with minimal variations.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Future-Proofing-Your-Code\"><\/span><span style=\"font-weight: 400;\">Future-Proofing Your Code<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Granular layout conformance options in upcoming releases provide even more control over rendering behavior.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Support-for-align-content-%E2%80%98space-evenly\"><\/span><span style=\"font-weight: 400;\">Support for align-content: \u2018space-evenly\u2019<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Yoga 3.0 offers alignment help.Content: &#8220;evenly in space.&#8221; Using uniformly spaced gaps between the borders of the line and the container, space-evenly distributes the lines in a multi-line flex container.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"New-Architecture-Bridgeless-by-Default\"><\/span><span style=\"font-weight: 400;\">New Architecture: Bridgeless by Default<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">With this version, when the <\/span><a href=\"https:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/\"><span style=\"font-weight: 400;\">New Architecture<\/span><\/a><span style=\"font-weight: 400;\"> is activated, Bridgeless Mode will now be the default. This post contains further information regarding our decision to make Bridgeless the default. To facilitate the transition, we improved the interop layers to include Bridgeless and collaborated with other libraries to ensure their compatibility with Bridgeless from the start.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We also worked on improving the New Renderer Interop layers in addition to Bridgeless. The most exciting part is that you no longer need to declare which components must pass through it because it is now enabled by default! Here&#8217;s where you can read more about them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lastly, the react-native-new-architecture repository has documentation if you want to know more about the New Architecture. Reactnative.dev will use this information when the New Architecture takes over as the default.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Updates-to-the-Batched-OnLayout-Architecture\"><\/span><span style=\"font-weight: 400;\">Updates to the Batched OnLayout Architecture<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">OnLayout callback state modifications are now batch-processed. A fresh render commit would have been generated by the onLayout event for each state modification.<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">function MyComponent(props) {\r\n\r\n\u00a0\u00a0const [state1, setState1] = useState(false);\r\n\r\n\u00a0\u00a0const [state2, setState2] = useState(false);\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onLayout={() =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setState1(true);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onLayout={() =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ When this event is executed, state1's new value is no longer observable here.\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setState2(true);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0);\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">SetState1 and SetState2 modifications are batch-processed in 0.74. This modification permits fewer re-renders and is anticipated behavior in React.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Yarn-3-%E2%80%93-New-Project-Yarn\"><\/span><span style=\"font-weight: 400;\">Yarn 3 &#8211; New Project Yarn<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">With the React Native Community CLI, Yarn 3 is now the default JavaScript package manager for newly created projects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Yarn 3.x will be used in conjunction with nodeLinker: node-modules, a mode that offers React Native library compatibility. Yarn Classic (1.x, deprecated) is now the default instead of Yarn Classic. Use this approach to update the Yarn version within your current application.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9315 size-full aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/image_2024_05_24T10_25_07_471Z.png\" alt=\"\" width=\"1032\" height=\"166\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/image_2024_05_24T10_25_07_471Z.png 1032w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/image_2024_05_24T10_25_07_471Z-1024x165.png 1024w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/image_2024_05_24T10_25_07_471Z-768x124.png 768w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/image_2024_05_24T10_25_07_471Z-640x103.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/image_2024_05_24T10_25_07_471Z-400x64.png 400w\" sizes=\"(max-width: 1032px) 100vw, 1032px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Latest-Changes-Enhancements\"><\/span><span style=\"font-weight: 400;\">Latest Changes &amp; Enhancements<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Android-Minimum-SDK-Bump-Android-60\"><\/span><span style=\"font-weight: 400;\">Android Minimum SDK Bump (Android 6.0)<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Android 6.0 is the minimum Android SDK version required for React Native 0.74, which is 23. This was Android 5.0 (API 21) in the past. View this change&#8217;s context by going here.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Bonus-Smaller-Android-apps\"><\/span><span style=\"font-weight: 400;\">Bonus: Smaller Android apps<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">By combining many enhancements at our native build with the minimal SDK bump, we were able to significantly lower the app&#8217;s size on user devices.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For instance, a freshly developed app using React Native 0.74 saves around 13% of the user&#8217;s device&#8217;s capacity, saving about 4MB.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9316 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/0.74-android-app-size-4200c5fc0a6daaff0b2a377c6f77af2c.jpg\" alt=\"\" width=\"1009\" height=\"383\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/0.74-android-app-size-4200c5fc0a6daaff0b2a377c6f77af2c-768x292.jpg 768w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/0.74-android-app-size-4200c5fc0a6daaff0b2a377c6f77af2c-640x243.jpg 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/0.74-android-app-size-4200c5fc0a6daaff0b2a377c6f77af2c-400x152.jpg 400w\" sizes=\"(max-width: 1009px) 100vw, 1009px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Elimination-of-Outdated-PropTypes\"><\/span><span style=\"font-weight: 400;\">Elimination of Outdated PropTypes<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">PropTypes, an API that has been deprecated since React 15.5 in 2017, was still included in React Native releases prior to 0.74! In order to reduce memory cost and app size (26.4kB in a minified bundle), we are currently deleting all built-in PropTypes from React Native app development.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Image.propTypes, Text.propTypes, TextInput.propTypes, ColorPropType, EdgeInsetsPropType, PointPropType, and ViewPropTypes are among the PropTypes properties that have been eliminated (see commit).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You should switch to a type system like TypeScript if your application or library uses PropTypes.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"PushNotificationIOS-API-Changes-Deprecated\"><\/span><span style=\"font-weight: 400;\">PushNotificationIOS API Changes (Deprecated)<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We are working to deprecate the PushNotificationIOS library in React Native 0.74. This release&#8217;s modifications are mostly focused on getting rid of references to outdated iOS APIs. With its migration to Apple&#8217;s User Notifications framework, PushNotificationIOS now offers additional APIs for managing and scheduling notifications.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The developers at React Native intend to remove this library in the upcoming 0.75 release, moving it from the React Native core into the @react-native-community\/push-notification-ios community package. Before the next release, you must switch if you are still using PushNotificationIOS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Also read:<\/span><a href=\"https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/\"><span style=\"font-weight: 400;\"> Integrating Push Notifications in React Native Using Firebase<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"API-Modifications\"><\/span><span style=\"font-weight: 400;\">API Modifications<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Since it was unnecessary, the didRegisterUserNotificationSettings: callback on RCTPushNotificationManager has been removed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In 0.75, the RCTPushNotificationManager callbacks listed below will no longer be supported and removed:<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">+ (void)didReceiveLocalNotification:(UILocalNotification *)notification;\r\n\r\n+ (void)didReceiveRemoteNotification:(NSDictionary *)notification;<\/pre>\n<p><span style=\"font-weight: 400;\">You must now explicitly specify the initialNotification on RCTPushNotificationManager in order to use getInitialNotification() to receive the notification that began the application:<\/span><\/p>\n<p><b><i>[RCTPushNotificationManager setInitialNotification:response.notification];<\/i><\/b><\/p>\n<p><span style=\"font-weight: 400;\">Notification&#8217;s properties have changed on the JS side. The deprecated methods alertAction and repeatInterval will be eliminated in 0.75:<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">type Notification = {\r\n\r\n\u00a0\u00a0...\r\n\r\n\u00a0\u00a0\/\/ NEW: Seconds from now to display the notification.\r\n\r\n\u00a0\u00a0fireIntervalSeconds?: ?number,\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0\/\/ CHANGED: Used only for scheduling notifications. Will be null when\r\n\r\n\u00a0\u00a0\/\/ retrieving notifications using `getScheduledLocalNotifications` or\r\n\r\n\u00a0\u00a0\/\/ `getDeliveredNotifications`.\r\n\r\n\u00a0\u00a0soundName?: ?string,\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0\/\/ DEPRECATED: This was used for iOS's legacy UILocalNotification.\r\n\r\n\u00a0\u00a0alertAction?: ?string,\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0\/\/ DEPRECATED: Use `fireDate` or `fireIntervalSeconds` instead.\r\n\r\n\u00a0\u00a0repeatInterval?: ?string,\r\n\r\n};<\/pre>\n<p><span style=\"font-weight: 400;\">Lastly, PushNotificationIOS.removeEventListener no longer uses the handler argument, which has been eliminated.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Flipper-removal-Plugin-for-React-Native\"><\/span><span style=\"font-weight: 400;\">Flipper removal Plugin for React Native<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Flipper is no longer supported for use in analyzing React Native layouts, network requests, or other capabilities of React Native plugins. We have eliminated the setup code and native Flipper libraries from brand-new React Native applications as of 0.74. This results in a faster local setup and fewer dependencies (refer to the original RFC).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Upgrade Helper shows you how to remove Flipper from your app. Ignore the appropriate diff lines if you wish to keep Flipper in an existing application.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Debugging-JavaScript\"><\/span><span style=\"font-weight: 400;\">Debugging JavaScript<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">For 0.74, we still advise<\/span><a href=\"https:\/\/dianapps.com\/blog\/how-to-set-up-hermes-in-react-native\/\"><span style=\"font-weight: 400;\"> setting up Hermes<\/span><\/a><span style=\"font-weight: 400;\"> Debugger for debugging. Another option is to use Expo&#8217;s Experimental New Debugger, which is also the default.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Also read:<\/span><a href=\"https:\/\/dianapps.com\/blog\/common-debugging-and-troubleshooting-of-react-native-apps\/\"><span style=\"font-weight: 400;\"> Common debugging and troubleshooting of React Native apps\u00a0<\/span><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Other-Breaking-Changes\"><\/span><span style=\"font-weight: 400;\">Other Breaking Changes\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"General\"><\/span><span style=\"font-weight: 400;\">General<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Always refer to the writing direction when starting or ending a style (#42251).<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Android\"><\/span><span style=\"font-weight: 400;\">Android<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Removal of FabricUIManagerProvider&#8217;s JSIModule* (#42059).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use TurboModules instead of this API, which was underutilized in open source.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Take UIManagerModule down.UIManagerModule.dismissPopupMenu and showPopupMenu (#42441)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">This API will be retired in 0.75 and has been transferred to the @react-native\/popup-menu-android npm package.<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"iOS\"><\/span><span style=\"font-weight: 400;\">iOS<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Remove the parameters for configFilename and configKey from the iOS codegen CLI (#41533).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Modify bundleURL handling (#43994).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Previously, bundleURL was put in an instance variable upon React Native startup, and it was not updateable.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Currently, bundleUrl is a function that uses a new URL on each refresh by reevaluating itself as necessary.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Only apps that have changed the bundleURL variable after the app has begun will be impacted by this modification. In this instance, transfer the logic for updating the variable to AppDelegate&#8217;s bundleURL method.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Update-to-074-Concluding-Note\"><\/span><span style=\"font-weight: 400;\">Update to 0.74: Concluding Note<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In addition to the Upgrading documentation, please utilize the React Native Upgrade Helper to see code changes between React Native versions for existing projects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To start a fresh project:<\/span><\/p>\n<p><b><i>npx react-native@latest init MyProject<\/i><\/b><\/p>\n<p><span style=\"font-weight: 400;\">Expo SDK 51 will support React Native 0.74 if you use it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">React Native 0.74 is a major advancement for the technology. With its emphasis on predictability, faster development, and performance enhancements, this version gives developers the tools they need to more easily and effectively create amazing mobile apps.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Examine these improvements in detail to see how they might improve your development process!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want to update to 0.74, get in touch with us today!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>With its previous hit of 0.73, the React Native development community is back with yet another noteworthy release\u2013 the React Native 0.74.\u00a0 In this update, developers will observe some ground-breaking feature renewals along with easy and effective mobile app development solutions that are said to behave in the most commendable manner. To add more, React [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":9312,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[650,66],"class_list":["post-9311","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-react-native-0-74","tag-react-native-apps"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/React-Native-0.74-1140x445.png",1140,445,true],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/React-Native-0.74-463x348.png",463,348,true],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/React-Native-0.74-300x169.png",300,169,true],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/React-Native-0.74.png",1536,864,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Native 0.74 - Yoga 3.0, Bridgeless New Architecture<\/title>\n<meta name=\"description\" content=\"From enhancing its capabilities in Yoga 3.0 to bringing a new package to manage Yarn 3, the latest React Native 0.74 is here for a worthwhile reason!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native 0.74 - Yoga 3.0, Bridgeless New Architecture\" \/>\n<meta property=\"og:description\" content=\"From enhancing its capabilities in Yoga 3.0 to bringing a new package to manage Yarn 3, the latest React Native 0.74 is here for a worthwhile reason!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-24T10:58:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-24T11:03:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/React-Native-0.74.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"864\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Harshita Sharma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Harshita Sharma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native 0.74 - Yoga 3.0, Bridgeless New Architecture","description":"From enhancing its capabilities in Yoga 3.0 to bringing a new package to manage Yarn 3, the latest React Native 0.74 is here for a worthwhile reason!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/","og_locale":"en_US","og_type":"article","og_title":"React Native 0.74 - Yoga 3.0, Bridgeless New Architecture","og_description":"From enhancing its capabilities in Yoga 3.0 to bringing a new package to manage Yarn 3, the latest React Native 0.74 is here for a worthwhile reason!","og_url":"https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2024-05-24T10:58:22+00:00","article_modified_time":"2024-05-24T11:03:12+00:00","og_image":[{"width":1536,"height":864,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/React-Native-0.74.png","type":"image\/png"}],"author":"Harshita Sharma","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Harshita Sharma","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/","url":"https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/","name":"React Native 0.74 - Yoga 3.0, Bridgeless New Architecture","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2024-05-24T10:58:22+00:00","dateModified":"2024-05-24T11:03:12+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/6672b5142fe10cc5379a72656c884045"},"description":"From enhancing its capabilities in Yoga 3.0 to bringing a new package to manage Yarn 3, the latest React Native 0.74 is here for a worthwhile reason!","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/react-native-0-74-yoga-3-0-bridgeless-new-architecture-and-more\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Native 0.74 &#8211; Yoga 3.0, Bridgeless New Architecture, and more"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/6672b5142fe10cc5379a72656c884045","name":"Harshita Sharma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2025\/04\/unnamed-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2025\/04\/unnamed-96x96.png","caption":"Harshita Sharma"},"description":"A competent and enthusiastic writer, having excellent persuasive skills in the tech, marketing, and event industry. With vast knowledge about the latest industry trends, she is familiar with creating engaging content gigs.","sameAs":["https:\/\/www.linkedin.com\/in\/harshita-sharma-958662198"],"url":"https:\/\/dianapps.com\/blog\/author\/harshita\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/9311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=9311"}],"version-history":[{"count":5,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/9311\/revisions"}],"predecessor-version":[{"id":9319,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/9311\/revisions\/9319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/9312"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=9311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=9311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=9311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}