{"id":5176,"date":"2023-01-03T12:56:48","date_gmt":"2023-01-03T12:56:48","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=5176"},"modified":"2023-01-04T09:15:20","modified_gmt":"2023-01-04T09:15:20","slug":"how-to-set-up-hermes-in-react-native","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/how-to-set-up-hermes-in-react-native\/","title":{"rendered":"How to set up Hermes in React Native?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">The release of React Native 0.70 version has without a doubt created a huge opportunity and scope for improvements and introduced some brand-new and interesting features that have led to some major benefits to not just organizations but also developers as it promises a better future for React Native mobile app development ecosystem.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The advantages of employing Hermes as the JavaScript engine for your React Native application will be discussed in this article, along with how to create and run a React Native application using Hermes. You may follow along as we take you through each step to launch your React Native application using Hermes as the JavaScript engine.<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"What-exactly-is-Hermes-in-React-Native\"><\/span><span style=\"font-weight: 400;\">What exactly is Hermes in React Native?\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">An open-source JavaScript engine called Hermes is meant to improve performance by speeding up app launches and precompiling JavaScript into useful bytecode.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Whats-new-in-React-Native-070-version\"><\/span><span style=\"font-weight: 400;\">What\u2019s new in React Native 0.70 version?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Hermes will be the default engine beginning with React Native 0.70, according to a blog post on the <\/span><a href=\"https:\/\/reactnative.dev\/blog\/2022\/07\/08\/hermes-as-the-default\"><span style=\"font-weight: 400;\">React Native website<\/span><\/a><span style=\"font-weight: 400;\">. This might result in a paradigm shift in the way React Native developers create and test mobile applications. It is very obvious that developers will save a significant amount of development time deploying new software if they place a major emphasis on performance optimization.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The following is a list of Hemes&#8217; break-in modifications in React Native 0.70:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">more performance improvement<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Integration of Hermes with React Native: Future Hermes features will be developed alongside React Native to maintain compatibility<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00a0iOS Intl: Intl will now have native support for iOS developers.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You can read more about what\u2019s new in Hermes: <\/span><a href=\"https:\/\/dianapps.com\/blog\/react-native-0-70-released\/\"><span style=\"font-weight: 400;\">React Native 0.70<\/span><\/a><span style=\"font-weight: 400;\"> in this announcement.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Is-Hermes-a-good-choice-with-React-Native\"><\/span><span style=\"font-weight: 400;\">Is Hermes a good choice with React Native?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The JavaScript engine has received a tonne of support from the React Native developer community since Hermes was introduced as an opt-in JavaScript compilation engine in React Native 0.70, largely because of how efficient it has been.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hermes offers a GUI for visualizing the performance parameters of your application while in development, as well as a significant reduction in bundle size, load time, and consumption size. This functionality is very useful for developers to understand how apps will operate in production and after release.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Does-Hermes-make-React-Native-app-development-faster\"><\/span><span style=\"font-weight: 400;\">Does Hermes make React Native app development faster?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Yes, and Hermes is the fastest JavaScript engine for creating React Native applications, is the long and short of it (according to research conducted by maintainers of React Native). Time to Interactive (TTI), binary size, and consumption size were chosen as the three criteria that the research focused on since they are significant to developers.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Time to Interactive (TTI) measures how long it takes for a user to engage with an app once it has been opened.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The bundled React Native application&#8217;s binary size is represented by its APK (Android) or APA file size (iOS)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The size of an app, once it has been installed on a device, is its memory usage.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The process of creating an application using Hermes is rather simple; in fact, Hermes can be set up and operated with just three lines of code:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5178 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/react-native-herms-1.png\" alt=\"react native herms\" width=\"725\" height=\"127\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/react-native-herms-1.png 725w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/react-native-herms-1-640x112.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/react-native-herms-1-400x70.png 400w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><br \/>\n<span style=\"font-weight: 400;\">Keep in mind that Hermes on iOS is still in its infancy and hasn&#8217;t achieved complete reliability. Visit the official React Native GitHub repo to file a bug report if you encounter one.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why-is-performance-improvement-crucial\"><\/span><span style=\"font-weight: 400;\">Why is performance improvement crucial?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">One of the most important factors to consider when developing a mobile application, regardless of whether it has already been released into production or is still under development, is performance. React Native&#8217;s performance gap is closed by Hermes.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How-Hermes-enhances-React-Natives-overall-performance\"><\/span><span style=\"font-weight: 400;\">How Hermes enhances React Native&#8217;s overall performance<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let&#8217;s go through the advantages of using Hermes as your default compilation engine before selecting Hermes as the JavaScript engine for your React Native application:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Hermes precompiles application source code to bytecode before startup time.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Faster TTI: Hermes speeds up interaction time, improving user experience.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A more compact app bundle: Applications created using Hermes are somewhat less in size than those created with other JavaScript engines.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Here is how Hermes functions in the background:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5179 \" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/hermes-behind-scenes.jpg\" alt=\"\" width=\"760\" height=\"375\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/hermes-behind-scenes.jpg 730w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/hermes-behind-scenes-640x316.jpg 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/hermes-behind-scenes-400x197.jpg 400w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The Hermes playground&#8217;s code input is in the left pane, and the right pane shows the output as bytecode. Also displayed is the load time. In this instance, compiling and running the sum function took 60ms.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"What-is-Hermes-function-in-React-Native\"><\/span><span style=\"font-weight: 400;\">What is Hermes&#8217; function in React Native?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Hermes is a JavaScript engine for React Native that precompiles JavaScript into effective bytecode to save build time, as we&#8217;ve mentioned. Hermes has been demonstrated to have a smaller APK size, less memory use, and faster startup times, all of which improve user experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You may use the tutorial in the following parts to configure Hermes as your app engine to better learn how it functions with React Native. Hermes will be your default, though, if you are using React Native 0.70, so you may skip to the blog&#8217;s section on debugging.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Also read: <\/span><a href=\"https:\/\/dianapps.com\/blog\/how-to-improve-the-performance-of-a-react-native-app\/\"><span style=\"font-weight: 400;\">How to improve the performance of a react native app<\/span><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Using-Hermes-in-React-Native%E2%80%93\"><\/span><span style=\"font-weight: 400;\">Using Hermes in React Native\u2013\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In this article, we&#8217;ll demonstrate how to create a relatively straightforward React Native application that shows weather data based on fictitious data. The app will show the most recent US weather forecasts.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The final application should be as follows:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5180 \" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/finished-app.jpg\" alt=\"\" width=\"741\" height=\"422\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/finished-app.jpg 730w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/finished-app-640x365.jpg 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/finished-app-400x228.jpg 400w\" sizes=\"(max-width: 741px) 100vw, 741px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Make sure you are using React Native 0.70 before you start.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Copy\/paste the following code into a new React Native project by using the console to find your working directory:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5182 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/React-native-herms-4.png\" alt=\"\" width=\"729\" height=\"40\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/React-native-herms-4.png 729w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/React-native-herms-4-640x35.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/React-native-herms-4-400x22.png 400w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"1-Android-Hermes-activation\"><\/span><span style=\"font-weight: 400;\">1. Android Hermes activation<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Open your newly created project in your choice code editor and change your <\/span><strong>android\/app\/build <\/strong><span style=\"font-weight: 400;\">to enable Hermes on Android.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To create the following Gradle file:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5183 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Enabling-Hermes-on-Android.png\" alt=\"\" width=\"727\" height=\"138\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Enabling-Hermes-on-Android.png 727w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Enabling-Hermes-on-Android-640x121.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Enabling-Hermes-on-Android-400x76.png 400w\" sizes=\"(max-width: 727px) 100vw, 727px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Run the project on Android using the following code next:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5184 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/npx-react-1.png\" alt=\"\" width=\"728\" height=\"40\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/npx-react-1.png 728w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/npx-react-1-640x35.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/npx-react-1-400x22.png 400w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-iOS-Hermes-enabled\"><\/span><span style=\"font-weight: 400;\">2. iOS Hermes enabled<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Open your newly formed project in your favorite code editor, change your <\/span><strong>Podfile<\/strong><span style=\"font-weight: 400;\">, and set <\/span><strong>hermes_enabled<\/strong><span style=\"font-weight: 400;\"> to true to enable Hermes on iOS. Below is a sample of the code:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5185 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/iOS-Hermes-enabled.png\" alt=\"\" width=\"725\" height=\"128\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/iOS-Hermes-enabled.png 725w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/iOS-Hermes-enabled-640x113.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/iOS-Hermes-enabled-400x71.png 400w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><br \/>\n<span style=\"font-weight: 400;\">Run pod installation next.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5186 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Run-pod-installation-next.png\" alt=\"\" width=\"728\" height=\"40\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Run-pod-installation-next.png 728w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Run-pod-installation-next-640x35.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Run-pod-installation-next-400x22.png 400w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Finally, launch your iOS app using the following code:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5188 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/5.png\" alt=\"run your iOS app\" width=\"734\" height=\"53\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/5.png 734w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/5-640x46.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/5-400x29.png 400w\" sizes=\"(max-width: 734px) 100vw, 734px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Your app should seem as follows:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5189 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/hermes-ios-screen.jpg\" alt=\"\" width=\"730\" height=\"417\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/hermes-ios-screen.jpg 730w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/hermes-ios-screen-640x366.jpg 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/hermes-ios-screen-400x228.jpg 400w\" sizes=\"(max-width: 730px) 100vw, 730px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Hermes is noted as the app&#8217;s engine at the top-right corner, as you&#8217;ll see. This demonstrates that Hermes is operating.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After finishing the Hermes setup, let&#8217;s go on to creating our application.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Building-a-React-Native-app-with-Hermes-support\"><\/span><span style=\"font-weight: 400;\">Building a React Native app with Hermes support\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Clone the beginning file from <\/span><span style=\"font-weight: 400;\">Github<\/span><span style=\"font-weight: 400;\"> initially.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5190 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/beginning-file-from-Github-initially.png\" alt=\"\" width=\"740\" height=\"57\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/beginning-file-from-Github-initially.png 740w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/beginning-file-from-Github-initially-640x49.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/beginning-file-from-Github-initially-400x31.png 400w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Change the text on the <\/span><span style=\"font-weight: 400;\">Home <\/span><span style=\"font-weight: 400;\">screen with the following code:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5177 \" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/import-React-from-react-import-StyleSheet-Text-Image-View-TouchableOpacity-FlatList-from-react-native-import-axios-from-axios-import-data-icons-from-..constants-const-Home-const-weathe-1.png\" alt=\"\" width=\"868\" height=\"1737\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/import-React-from-react-import-StyleSheet-Text-Image-View-TouchableOpacity-FlatList-from-react-native-import-axios-from-axios-import-data-icons-from-..constants-const-Home-const-weathe-1-512x1024.png 512w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/import-React-from-react-import-StyleSheet-Text-Image-View-TouchableOpacity-FlatList-from-react-native-import-axios-from-axios-import-data-icons-from-..constants-const-Home-const-weathe-1-768x1536.png 768w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/import-React-from-react-import-StyleSheet-Text-Image-View-TouchableOpacity-FlatList-from-react-native-import-axios-from-axios-import-data-icons-from-..constants-const-Home-const-weathe-1-640x1280.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/import-React-from-react-import-StyleSheet-Text-Image-View-TouchableOpacity-FlatList-from-react-native-import-axios-from-axios-import-data-icons-from-..constants-const-Home-const-weathe-1-400x800.png 400w\" sizes=\"(max-width: 868px) 100vw, 868px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The code has a clear explanation. There are three parts: the mocked data rendered into a React component using the <\/span><strong>useState<\/strong><span style=\"font-weight: 400;\"> hook in React, the function that renders the data into a React component, and the code that renders the data using the <\/span><strong>FlatList<\/strong><span style=\"font-weight: 400;\"> in React Native in the <\/span><span style=\"font-weight: 400;\">Home<\/span><span style=\"font-weight: 400;\"> component. The same method might be used to obtain actual data from an API, but it is outside the purview of this lesson.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"DianApps-Your-one-stop-React-Native-app-development-solution-partner\"><\/span><span style=\"font-weight: 400;\">DianApps: Your one-stop React Native app development solution partner<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As a partner in React Native app development, DianApps enables you to prioritize bugs, prioritize issues, and analyze performance in your React Native apps.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By clearly demonstrating how users are interacting with your app, we also aid in your efforts to enhance conversion rates and product use. The product analytics capabilities of DianApps provide the reasons why customers don&#8217;t finish a specific flow or don&#8217;t use a new feature.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><span style=\"font-weight: 400;\">Conclusion<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">These were our take on providing you with how to set up Hermes in React Native. React Native now makes it much simpler to optimize the performance of mobile apps because of Hermes, a lightweight JavaScript engine. More information on Hermes is on React Native&#8217;s official website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Start proactively managing your React Native apps \u2014 consult <\/span><a href=\"https:\/\/dianapps.com\/react-native-app-development\"><b>React Native app development services<\/b><\/a><span style=\"font-weight: 400;\"> with our team of experts for free.<\/span><\/p>\n<p>Image Source: https:\/\/blog.logrocket.com\/using-hermes-react-native\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The release of React Native 0.70 version has without a doubt created a huge opportunity and scope for improvements and introduced some brand-new and interesting features that have led to some major benefits to not just organizations but also developers as it promises a better future for React Native mobile app development ecosystem.\u00a0 The advantages [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":5192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[56],"class_list":["post-5176","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-react-native-app-development"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-25-1140x445.png",1140,445,true],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-25-463x348.png",463,348,true],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-25-300x165.png",300,165,true],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-25.png",1600,880,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to set up Hermes in React Native?<\/title>\n<meta name=\"description\" content=\"How to set up Hermes in React Native? Read on the blog to get all the vital information!\" \/>\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\/how-to-set-up-hermes-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to set up Hermes in React Native?\" \/>\n<meta property=\"og:description\" content=\"How to set up Hermes in React Native? Read on the blog to get all the vital information!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/how-to-set-up-hermes-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-03T12:56:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-04T09:15:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-25.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\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=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to set up Hermes in React Native?","description":"How to set up Hermes in React Native? Read on the blog to get all the vital information!","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\/how-to-set-up-hermes-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"How to set up Hermes in React Native?","og_description":"How to set up Hermes in React Native? Read on the blog to get all the vital information!","og_url":"https:\/\/dianapps.com\/blog\/how-to-set-up-hermes-in-react-native\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2023-01-03T12:56:48+00:00","article_modified_time":"2023-01-04T09:15:20+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/01\/Untitled-design-25.png","type":"image\/png"}],"author":"Harshita Sharma","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Harshita Sharma","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/how-to-set-up-hermes-in-react-native\/","url":"https:\/\/dianapps.com\/blog\/how-to-set-up-hermes-in-react-native\/","name":"How to set up Hermes in React Native?","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2023-01-03T12:56:48+00:00","dateModified":"2023-01-04T09:15:20+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/6672b5142fe10cc5379a72656c884045"},"description":"How to set up Hermes in React Native? Read on the blog to get all the vital information!","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/how-to-set-up-hermes-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/how-to-set-up-hermes-in-react-native\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/how-to-set-up-hermes-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to set up Hermes in React Native?"}]},{"@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\/5176","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=5176"}],"version-history":[{"count":2,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5176\/revisions"}],"predecessor-version":[{"id":5193,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5176\/revisions\/5193"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/5192"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=5176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=5176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=5176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}