{"componentChunkName":"component---src-templates-markdown-post-template-tsx","path":"/blog/id/improve-your-react-native-android-app-performance-by-25","result":{"data":{"markdownRemark":{"html":"<p>React Native is a great library to build Native Apps for Android and iOS in JavaScript. It was developed by Facebook and used internally. Initially, the library was intended for iOS only. After some time, its popularity has gotten bigger, which lead to the support for Android.</p>\n<p>For execution of the JavaScript code, there is the JavaScriptCore (JSC). The react native project relies on that, your device is not capable of interpreting JavaScript as if it would be machine readable code. JSC is the JavaScript engine that is used by Safari and thus Webkits, so it powers a large amount of the web.</p>\n<p>On iOS, React Native uses the JavaScriptCore provided by the iOS platform. The Android platform uses a JavaScriptCore version bundled alongside the app, which also means it increases its bundled size. Up until React Native version 0.58.x, the Android JSC was outdated and only supported 32bit builds.</p>\n<p>So, to enable 64bit builds for Android you should only need to enable separate builds per CPU architecture and include the \"armv64-v8a\" architecture. React Native 0.59 includes a JSC upgrade, which should support that feature.</p>\n<p><div id=\"gist107121659\" class=\"gist\">\n    <div class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      <div class=\"gist-data\">\n        <div class=\"js-gist-file-update-container js-task-list-container\">\n  <div id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy\" class=\"file my-2\">\n    \n    <div itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-groovy  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"improve-your-react-native-android-app-performance-by-25-0.groovy content, created by reime005 on 10:36PM on December 27, 2020.\"\n    >\n\n        \n<div class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  <template class=\"js-file-alert-template\">\n  <div data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  <svg aria-hidden=\"true\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    <path d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"></path>\n</svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\"Link--inTextBlock\" href=\"https://github.co/hiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters</a>\n    </span>\n\n\n  <div data-view-component=\"true\" class=\"flash-action\">        <a href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n</a>\n</div>\n</div></template>\n<template class=\"js-line-alert-template\">\n  <span aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    <svg aria-hidden=\"true\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    <path d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"></path>\n</svg>\n</span></template>\n\n  <table data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"improve-your-react-native-android-app-performance-by-25-0.groovy\">\n        <tr>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\"></td>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-LC1\" class=\"blob-code blob-code-inner js-file-line\">splits {</td>\n        </tr>\n        <tr>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\"></td>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-LC2\" class=\"blob-code blob-code-inner js-file-line\">    abi {</td>\n        </tr>\n        <tr>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\"></td>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-LC3\" class=\"blob-code blob-code-inner js-file-line\">        enable true</td>\n        </tr>\n        <tr>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\"></td>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-LC4\" class=\"blob-code blob-code-inner js-file-line\">        include &quot;armeabi-v7a&quot;, &quot;x86&quot;, &quot;arm64-v8a&quot;, &quot;x86-64&quot;</td>\n        </tr>\n        <tr>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\"></td>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-LC5\" class=\"blob-code blob-code-inner js-file-line\">    }</td>\n        </tr>\n        <tr>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\"></td>\n          <td id=\"file-improve-your-react-native-android-app-performance-by-25-0-groovy-LC6\" class=\"blob-code blob-code-inner js-file-line\">}</td>\n        </tr>\n  </table>\n</div>\n\n\n    </div>\n\n  </div>\n</div>\n\n      </div>\n      <div class=\"gist-meta\">\n        <a href=\"https://gist.github.com/reime005/2651bebbf32bf892b6abbfcea78ca529/raw/91ddc786d3d08d105749d842ee5a0ef674305cc4/improve-your-react-native-android-app-performance-by-25-0.groovy\" style=\"float:right\" class=\"Link--inTextBlock\">view raw</a>\n        <a href=\"https://gist.github.com/reime005/2651bebbf32bf892b6abbfcea78ca529#file-improve-your-react-native-android-app-performance-by-25-0-groovy\" class=\"Link--inTextBlock\">\n          improve-your-react-native-android-app-performance-by-25-0.groovy\n        </a>\n        hosted with &#10084; by <a class=\"Link--inTextBlock\" href=\"https://github.com\">GitHub</a>\n      </div>\n    </div>\n</div></p>\n<p>I've tested and compared the new JSC (32bit vs 64bit) with the 0.59.3 release candidate. I let made a release build and ran some 'computationally intensive' operations that were AES encryptions (JavaScript only).</p>\n<p>The result: on the 32 bit build, the operations took 2.4 seconds on average. The 64 bit builds lead to an average of 1.8 seconds. I know that this would not hold as a scientific proof, but anyway. The 64 bit version was ~25% faster!</p>","frontmatter":{"date":"March 10, 2019","slug":"improve-your-react-native-android-app-performance-by-25","title":"Improve your React Native Android App Performance by 25%"},"fields":{"readingTime":{"minutes":1.32}}}},"pageContext":{"slug":"improve-your-react-native-android-app-performance-by-25","currentPage":4}}}