{"id":5473,"date":"2021-03-31T11:10:00","date_gmt":"2021-03-31T09:10:00","guid":{"rendered":"https:\/\/pagepro.co\/blog\/?p=5473"},"modified":"2024-10-14T16:54:40","modified_gmt":"2024-10-14T14:54:40","slug":"react-native-over-the-air-updates","status":"publish","type":"post","link":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/","title":{"rendered":"How To Use React Native Over The Air Updates (OTA)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"what-are-over-the-air-ota-updates-why-might-i-need-them\">What are Over The Air (OTA) updates? Why might I need them?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Over The Air (OTA) updates are one of the <a href=\"https:\/\/pagepro.co\/blog\/react-native-pros-and-cons\/\" target=\"_blank\" rel=\"noreferrer noopener\">advantages of React Native apps<\/a> over native ones. In React Native apps, code is split into two parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Native binaries<\/strong> \u2013 the part with native code that is compiled<\/li>\n\n\n\n<li><strong>Javascript bundle<\/strong> \u2013 the bundle with Javascript code and assets that is not compiled<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Normally when you want to update your app, you need first to build it and then send it to App Store or Google Play. A major drawback of this solution is the time needed for these stores to approve your update. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine a situation where an app with a critical error was published to users by mistake. In these cases, every second count. And this is where Over The Air (OTA) may help us.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In short, OTA allows us to send updated Javascript bundles directly to users <strong>without the need of accepting<\/strong> them by Apple or Google. We can fix errors or push small updates (more on those later) almost immediately. This gives you more confidence about the stability of the app \u2013 there is always something that we can do instead of just waiting for an update to be accepted while users can&#8217;t use the app<\/p>\n\n\n<div class=\"c-newsletter-sendgrid-wrapper js-newsletter-sendgrid-wrapper ga-filedownload-viewed\">\n    <div class=\"c-newsletter-sendgrid\">\n                    <p class=\"c-newsletter-sendgrid__title\">\n                Get the list of Over 100 React Native App Examples            <\/p>\n        \n         \n            <p class=\"c-newsletter-sendgrid__description\">\n                Discover wide adoption of React Native across industries and app categories!             <\/p>\n        \n        <form action=\"\" class=\"c-newsletter-sendgrid__form f-form js-newsletter-sendgrid\" data-key=\"e3f9a26a-2d4a-4469-a83c-e3ae691a411f\">\n            <div class=\"c-newsletter-sendgrid__form-mail\">\n                <label class=\"c-label\" for=\"newsletter_email\">Company E-mail address<\/label>\n                <input class=\"c-input js-newsletter-sendgrid-email\" type=\"email\" id=\"newsletter_email\" required>\n                <input class=\"c-newsletter-sendgrid__button ga-cta-filedownload\" type=\"submit\" value=\"Download Now\">\n            <\/div>\n            <div class=\"c-newsletter-sendgrid__form-consent\">\n                                                        <input class=\"c-checkbox js-newsletter-consent\" type=\"checkbox\" name=\"newsletter_consent\" id=\"newsletter_consent_1\" required>\n                    <label class=\"c-label\" for=\"newsletter_consent_1\">By providing your e-mail address, you agree to our Privacy Policy. We will not send you any spam \u2013 only link for downloading the e-book and probably some more useful resources in the future.<\/label>\n                            <\/div>\n        <\/form>\n\n        <div class=\"c-newsletter-sendgrid__cover-container\">\n                            <img decoding=\"async\" class=\"c-newsletter-sendgrid__cover-1\" src=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2024\/01\/113-rn-apps.png\" alt=\"A bold, geometric cover design featuring red and black diagonal shapes and white text that reads 113 REACT NATIVE APPS. Showcasing the React Native Tech Stack, the pagepro logo appears in the top left corner.\" >\n                                                    <span class=\"c-newsletter-sendgrid__type\">PDF<\/span>\n                    <\/div>\n\n        <div class=\"c-newsletter-sendgrid__popup-wrapper js-newsletter-sendgrid-popup is-hidden\">\n            <div class=\"c-newsletter-sendgrid__popup\">\n                <div class=\"c-newsletter-sendgrid__popup-icon\">\n                    <svg width=\"140\" height=\"140\" viewBox=\"0 0 140 140\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <g clip-path=\"url(#clip0_6621_2135)\">\n                    <path d=\"M65.625 100.625C65.625 109.908 69.3125 118.81 75.8763 125.374C82.44 131.938 91.3424 135.625 100.625 135.625C109.908 135.625 118.81 131.938 125.374 125.374C131.938 118.81 135.625 109.908 135.625 100.625C135.625 91.3424 131.938 82.44 125.374 75.8763C118.81 69.3125 109.908 65.625 100.625 65.625C91.3424 65.625 82.44 69.3125 75.8763 75.8763C69.3125 82.44 65.625 91.3424 65.625 100.625Z\" stroke=\"#0A2B3D\" stroke-width=\"8.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <path d=\"M116.223 90.4517L99.2774 113.044C98.9005 113.545 98.4206 113.959 97.8701 114.259C97.3196 114.558 96.7113 114.737 96.0862 114.781C95.461 114.826 94.8335 114.736 94.246 114.518C93.6584 114.3 93.1244 113.959 92.6799 113.517L83.9299 104.767\" stroke=\"#0A2B3D\" stroke-width=\"8.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <path d=\"M48.125 91.875H13.125C10.8044 91.875 8.57876 90.9531 6.93782 89.3122C5.29687 87.6712 4.375 85.4456 4.375 83.125V13.125C4.375 10.8044 5.29687 8.57876 6.93782 6.93782C8.57876 5.29687 10.8044 4.375 13.125 4.375H118.125C120.446 4.375 122.671 5.29687 124.312 6.93782C125.953 8.57876 126.875 10.8044 126.875 13.125V52.5\" stroke=\"#0A2B3D\" stroke-width=\"8.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <path d=\"M124.898 7.5835L77.3909 44.1235C74.0176 46.7185 69.881 48.1255 65.625 48.1255C61.3691 48.1255 57.2325 46.7185 53.8592 44.1235L6.35254 7.5835\" stroke=\"#0A2B3D\" stroke-width=\"8.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/g>\n                    <defs>\n                    <clipPath id=\"clip0_6621_2135\">\n                    <rect width=\"140\" height=\"140\" fill=\"white\"\/>\n                    <\/clipPath>\n                    <\/defs>\n                    <\/svg>\n                <\/div>\n                                    <p class=\"c-newsletter-sendgrid__popup-text\">\n                        Check your inbox for free materials                    <\/p>\n                                <div class=\"c-newsletter-sendgrid__popup-action\">\n                    <button class=\"c-newsletter-sendgrid__button c-newsletter-sendgrid__button--full-width js-newsletter-sendgrid-popup-close\">Close<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"this-sounds-great-are-there-any-limitations\">This sounds great! Are there any limitations?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As good as it may sound, there are a few things that we need to keep in mind, and we always remind ourselves about them during the <a href=\"https:\/\/pagepro.co\/services\/react-native-development\" target=\"_blank\" rel=\"noreferrer noopener\">React Native consultancy<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The first thing is that OTA updates only work with Javascript bundles. You may think that this isn&#8217;t really a big limitation because, in React Native, we write almost all code in JS. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While this may be true, there still are modules that we install to our app. If a module changes your Android or ios directories, you can&#8217;t use OTA to update your app. That&#8217;s because these directories&#8217; contents are used to compile Native binaries, which OTA can&#8217;t update.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The second thing is what we can do with OTA. Technically we can change everything in our app, but App Store and Google Play limit us. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Google Play is less restrictive \u2013 they say that apps installed from Google Play shouldn&#8217;t update in other ways than by Google services, <a href=\"https:\/\/support.google.com\/googleplay\/android-developer\/answer\/9888379?hl=en\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">but Javascript bundles aren&#8217;t restricted to do so<\/a>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apple is more restrictive in these manners. <a href=\"https:\/\/developer.apple.com\/programs\/information\/Apple_Developer_Program_Information_8_12_15.pdf\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Take a look at paragraph 3.3.2<\/a>, which says that OTA updates can&#8217;t make significant changes in the app. To keep it simple, we should use such updates only to fix bugs or make performance improvements without making significant changes to the app&#8217;s UI or usability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-start-using-ota\">How to start using OTA?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We need a server that will receive our updates and send them to users of our app to use OTA. While we can make our own server, we can also use dedicated solutions. In this article, we will use <a href=\"https:\/\/github.com\/microsoft\/react-native-code-push\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">CodePush <\/a>from Microsoft App Center.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"setting-up-codepush-on-app-center\"><span class=\"underline-accent\">Setting up CodePush on App Center<\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, we have to create an app on the App Center. We choose Android as an OS (if you are also making an app for iOS, you need to create a second app) and React Native as a platform.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"588\" height=\"914\" src=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-10.png\" alt=\"\" class=\"wp-image-5610\" srcset=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-10.png 588w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-10-193x300.png 193w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-10-215x334.png 215w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-10-324x504.png 324w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After creating our app, we go to Distribute -&gt; CodePush in the left menu. There we can create a new deployment for our app.<br><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"266\" height=\"596\" src=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-12.png\" alt=\"\" class=\"wp-image-5612\" srcset=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-12.png 266w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-12-134x300.png 134w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-12-149x334.png 149w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">After this, we should have our deployment visible in CodePush. The last step is to go to settings (the wrench icon in the upper right corner) and check our deployment keys. We should have two because CodePush makes two branches by default. We will need these codes later when we are sending our updates.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"687\" height=\"430\" src=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-14.png\" alt=\"\" class=\"wp-image-5614\" srcset=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-14.png 687w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-14-300x188.png 300w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-14-500x313.png 500w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-14-324x203.png 324w\" sizes=\"auto, (max-width: 687px) 100vw, 687px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-code-mind-cta c-cta-block\" style=\"background-color:#00141F;color:#FFFFFF\"><div class=\"c-cta-block__content\"><p class=\"c-cta-block__title\">Kickoff your app with React Native  experts!<\/p><div class=\"c-cta-block__action\"><a href=\"https:\/\/pagepro.co\/contact\" class=\"c-cta-block__button ga-cta ga-cta-consultation theme-bg-3\">Book a free consultation call<\/a><\/div><\/div><\/div>\n\n\n\n<div class=\"c-newsletter-block-acf\">\n    <p class=\"c-newsletter-block-acf__title c-newsletter__header\">\n        EXPERT INSIGHTS, FRICTIONLESSLY DELIVERED!    <\/p>\n    <p class=\"c-newsletter-block-acf__desc c-newsletter__header\">\n        Curated tech news delivered straight to your inbox every month.\r\n    <\/p>\n    <form method=\"post\" class=\"c-newsletter-block-acf__form js-newsletter-form c-newsletter__action\" name=\"newsletter-block-form\">\n        <input name=\"newsletter-email\" id=\"newsletter-email\" type=\"text\" class=\"c-newsletter-block-acf__input js-newsletter-input\" placeholder=\"Company Email\" \/>\n        <input name=\"newsletter-campaign\" id=\"newsletter-campaign\" type=\"hidden\" value=\"\" \/>\n        <div class=\"c-newsletter-block-acf__group\">\n            <input name=\"consent\" id=\"consent\" type=\"checkbox\" class=\"js-newsletter-consent\" \/>\n            <label class=\"c-newsletter-block-acf__label\" for=\"consent\">I accept the <a href=\"https:\/\/pagepro.co\/privacy-policy\">Privacy Policy<\/a> and agree to process my personal data by Pagepro for marketing purposes.<\/label>\n        <\/div>\n        <input type=\"submit\" class=\"c-newsletter-block-acf__button button js-newsletter-sub ga-newsletter-form-content\" value=\"Sign up\" \/>\n        <p class=\"theme-size-1 js-message-valid is-hidden is-invalid\"><\/p>\n    <\/form>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"installing-codepush-plugin\"><span class=\"underline-accent\">Installing CodePush plugin<\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s assume you already have React Native app. To add the CodePush plugin first, we have to install it using <code>yarn<\/code> or <code>npm<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code-mind-code c-code\"><code class=\"bash\">#using yarn\nyarn add react-native-code-push\n\n#using npm\nnpm install react-native-code-push\n\n#only for ios app\ncd ios &amp;&amp; pod install<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After installing the plugin, we need to set it up. Here we will only go with the Android setup. You can find the iOS setup <a href=\"https:\/\/github.com\/microsoft\/react-native-code-push\/blob\/master\/docs\/setup-ios.md\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, we need to add these lines at the end of  <code>android\/settings.gradle<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code-mind-code c-code\"><code class=\"javascript\">include ':app', ':react-native-code-push'\nproject(':react-native-code-push').projectDir = new File(rootProject.projectDir, '..\/node_modules\/react-native-code-push\/android\/app')<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Next we add <code>codepush.gradle<\/code> in <code>android\/app\/build.gradle<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code-mind-code c-code\"><code class=\"javascript\">apply from: \"..\/..\/node_modules\/react-native\/react.gradle\"\n\/\/ add this line\napply from: \"..\/..\/node_modules\/react-native-code-push\/android\/codepush.gradle\"<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now we update <code>MainApplication.java<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code-mind-code c-code\"><code class=\"java\">...\n\/\/ 1. Import the plugin class.\nimport com.microsoft.codepush.react.CodePush;\n\npublic class MainApplication extends Application implements ReactApplication {\n\n    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n        ...\n\n        \/\/ 2. Override the getJSBundleFile method in order to let\n        \/\/ the CodePush runtime determine where to get the JS\n        \/\/ bundle location from on each app start\n        @Override\n        protected String getJSBundleFile() {\n            return CodePush.getJSBundleFile();\n        }\n    };\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we need to set is the deployment key. We have to tell the app which branch on App Center it should check for updates. To do so, we have to update <code>android\\app\\src\\main\\res\\values\\strings.xml<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code-mind-code c-code\"><code class=\"html\">&lt;resources>\n    &lt;string name=\"app_name\">OtaExample&lt;\/string>\n    &lt;string moduleConfig=\"true\" name=\"CodePushDeploymentKey\">YOUR_KEY&lt;\/string>\n&lt;\/resources>\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is the key we obtain from CodePush on App Center. To update our app later, we have to push updates to the same branch that we connect here with the deployment key. You can find more info about using multiple deployments <a href=\"https:\/\/github.com\/microsoft\/react-native-code-push\/blob\/master\/README.md#multi-deployment-testing\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, we wrap our app root component with CodePush HOC.<\/p>\n\n\n\n<pre class=\"wp-block-code-mind-code c-code\"><code class=\"jsx\">import codePush from 'react-native-code-push';\n\nconst App = () => {\n  return (\n    &lt;>\n      &lt;StatusBar barStyle=\"dark-content\" \/>\n      &lt;SafeAreaView>\n        &lt;ScrollView\n          contentInsetAdjustmentBehavior=\"automatic\"\n          style={styles.scrollView}>\n          &lt;View style={styles.body}>\n            &lt;Text>Test&lt;\/Text>\n          &lt;\/View>\n        &lt;\/ScrollView>\n      &lt;\/SafeAreaView>\n    &lt;\/>\n  );\n};\n\nexport default codePush(App);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">By default, CodePush will check for updates on every app launch and install them in the background, which means that the user will get the changes on the next launch after the update. This behaviour focuses on the best TTI (time to interactive), so the user doesn&#8217;t have to wait for the update to download and install before using the app. How to install updates, and how often they can be changed \u2013 more about you can find <a href=\"https:\/\/github.com\/microsoft\/react-native-code-push#plugin-usage\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lets-send-our-first-update-ota\">Lets send our first update OTA!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After all these configurations, we are <strong>finally able to send OTA updates<\/strong>. To do so, we first have to install and login into CodePush globally. We need to log in only once.<\/p>\n\n\n\n<pre class=\"wp-block-code-mind-code c-code\"><code class=\"bash\">#using yarn\nyarn global add appcenter-cli\n\n#using npm\nnpm install -g appcenter-cli\n\n#will open a dialog to login into appcenter\nappcenter login\n\n#to send update OTA\nappcenter codepush release-cordova -a &lt;ownerName>\/&lt;appName><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">So let&#8217;s do it! First, let&#8217;s make a release build of our react native app and install it on the device. More about building release APK for Android you can find <a href=\"https:\/\/reactnative.dev\/docs\/signed-apk-android#generating-the-release-apk\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.<br><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"792\" src=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-15.png\" alt=\"\" class=\"wp-image-5616\" srcset=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-15.png 380w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-15-144x300.png 144w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-15-160x334.png 160w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-15-324x675.png 324w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Above you can see our app launched on an emulator. Let&#8217;s make some changes and send them Over The Air!<\/p>\n\n\n\n<pre class=\"wp-block-code-mind-code c-code\"><code class=\"jsx\">const App = () => {\n  return (\n    &lt;>\n      &lt;StatusBar barStyle=\"dark-content\" \/>\n      &lt;SafeAreaView>\n        &lt;ScrollView\n          contentInsetAdjustmentBehavior=\"automatic\"\n          style={styles.scrollView}>\n          &lt;View style={styles.body}>\n            &lt;Text>Test&lt;\/Text>\n            &lt;Text>Testing OTA updates!&lt;\/Text>\n          &lt;\/View>\n        &lt;\/ScrollView>\n      &lt;\/SafeAreaView>\n    &lt;\/>\n  );\n};<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">We added <code>&lt;Text&gt;Testing OTA updates!&lt;\/Text&gt;<\/code> to our app. Now let&#8217;s push this change using the command above! Then we can launch our app (we won&#8217;t see the changes first) and wait 10-15 seconds. After relaunching our app, we should see this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"379\" height=\"791\" src=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-16.png\" alt=\"\" class=\"wp-image-5617\" srcset=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-16.png 379w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-16-144x300.png 144w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-16-160x334.png 160w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/02\/image-16-324x676.png 324w\" sizes=\"auto, (max-width: 379px) 100vw, 379px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusions\">Conclusions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">OTA updates are a powerful tool that you can add with ease to React Native apps. They give us another <strong>way to update<\/strong> which is almost <strong>immediate and invisible for users.<\/strong> Thanks to this, we can always fix our app even on production without waiting for App Store or Google Play to accept our update. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have to keep in mind that we cannot update native libraries, which will be required in some situations and not making updates that change the UI or functionalities of our app because it&#8217;s not allowed by Apple and Google policies.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"read-more\">Read more<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pagepro.co\/blog\/publishing-expo-react-native-app-to-ios-and-android\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to publish React Native App to iOS and Android<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pagepro.co\/blog\/how-to-quit-expo-app-ios-android\/\">How to Quic Expo App Completely from iOS to Android?<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pagepro.co\/blog\/how-to-optimize-images-for-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">Optimizing Images for Web Performance<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pagepro.co\/blog\/react-native-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">50 Examples of Great React Native Apps in 2021<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over The Air updates is a powerful tool that you can add to React Native with ease. Learn how to add them to your app and why it&#8217;s worth it.<\/p>\n","protected":false},"author":25,"featured_media":6613,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":[],"rop_publish_now_history":[],"rop_publish_now_status":"pending","footnotes":""},"categories":[294,94],"tags":[],"class_list":["post-5473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-development","category-react-native"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Use React Native Over The Air Updates (OTA) - Pagepro<\/title>\n<meta name=\"description\" content=\"Over The Air (OTA) updates is a powerful tool you can add to React Native with ease. Learn how to add them to your app and why it&#039;s worth it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Use React Native Over The Air Updates (OTA) - Pagepro\" \/>\n<meta property=\"og:description\" content=\"Over The Air (OTA) updates is a powerful tool you can add to React Native with ease. Learn how to add them to your app and why it&#039;s worth it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/\" \/>\n<meta property=\"og:site_name\" content=\"Pagepro\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/thisispagepro\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-31T09:10:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-14T14:54:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/05\/ReactNativepicture.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"682\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daniel Ni\u017cy\u0144ski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Ni\u017cy\u0144ski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/\"},\"author\":{\"name\":\"Daniel Ni\u017cy\u0144ski\",\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/#\\\/schema\\\/person\\\/adda50101116bf3d52a8e51025bcdae5\"},\"headline\":\"How To Use React Native Over The Air Updates (OTA)\",\"datePublished\":\"2021-03-31T09:10:00+00:00\",\"dateModified\":\"2024-10-14T14:54:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/\"},\"wordCount\":1117,\"publisher\":{\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ReactNativepicture.png\",\"articleSection\":[\"Mobile Dev\",\"React Native\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/\",\"url\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/\",\"name\":\"How To Use React Native Over The Air Updates (OTA) - Pagepro\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ReactNativepicture.png\",\"datePublished\":\"2021-03-31T09:10:00+00:00\",\"dateModified\":\"2024-10-14T14:54:40+00:00\",\"description\":\"Over The Air (OTA) updates is a powerful tool you can add to React Native with ease. Learn how to add them to your app and why it's worth it.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/#primaryimage\",\"url\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ReactNativepicture.png\",\"contentUrl\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ReactNativepicture.png\",\"width\":1200,\"height\":682,\"caption\":\"White icon of an atom with an orbiting electron and a smartphone in front, centred on a dark background with red glowing lines\u2014a nod to react native benefits\u2014and a bright red circle at the top.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/react-native-over-the-air-updates\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pagepro.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Use React Native Over The Air Updates (OTA)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/\",\"name\":\"Pagepro\",\"description\":\"Frictionless Next.js, Expo &amp; Sanity Development Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/#organization\",\"name\":\"Pagepro\",\"url\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/logo_pagepro-b66d228a1e-1.png\",\"contentUrl\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/logo_pagepro-b66d228a1e-1.png\",\"width\":440,\"height\":200,\"caption\":\"Pagepro\"},\"image\":{\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/thisispagepro\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/#\\\/schema\\\/person\\\/adda50101116bf3d52a8e51025bcdae5\",\"name\":\"Daniel Ni\u017cy\u0144ski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f72093a6db1e7ee320e3a06733bec105cf5769bde90ff976d4e17289c6e99fa0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f72093a6db1e7ee320e3a06733bec105cf5769bde90ff976d4e17289c6e99fa0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f72093a6db1e7ee320e3a06733bec105cf5769bde90ff976d4e17289c6e99fa0?s=96&d=mm&r=g\",\"caption\":\"Daniel Ni\u017cy\u0144ski\"},\"description\":\"Daniel is a distinguished Senior React Native Developer at Pagepro, renowned for his exceptional problem-solving skills and proactive approach. His journey in mobile app development is marked by a series of successfully tackled challenges, where he has consistently resolved some of the most intricate issues in mobile app development.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/daniel-ni\u017cy\u0144ski-17322a1b3\\\/\"],\"url\":\"https:\\\/\\\/pagepro.co\\\/blog\\\/author\\\/daniel_nizynski\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Use React Native Over The Air Updates (OTA) - Pagepro","description":"Over The Air (OTA) updates is a powerful tool you can add to React Native with ease. Learn how to add them to your app and why it's worth it.","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:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/","og_locale":"en_US","og_type":"article","og_title":"How To Use React Native Over The Air Updates (OTA) - Pagepro","og_description":"Over The Air (OTA) updates is a powerful tool you can add to React Native with ease. Learn how to add them to your app and why it's worth it.","og_url":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/","og_site_name":"Pagepro","article_publisher":"https:\/\/www.facebook.com\/thisispagepro","article_published_time":"2021-03-31T09:10:00+00:00","article_modified_time":"2024-10-14T14:54:40+00:00","og_image":[{"width":1200,"height":682,"url":"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/05\/ReactNativepicture.png","type":"image\/png"}],"author":"Daniel Ni\u017cy\u0144ski","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Daniel Ni\u017cy\u0144ski","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/#article","isPartOf":{"@id":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/"},"author":{"name":"Daniel Ni\u017cy\u0144ski","@id":"https:\/\/pagepro.co\/blog\/#\/schema\/person\/adda50101116bf3d52a8e51025bcdae5"},"headline":"How To Use React Native Over The Air Updates (OTA)","datePublished":"2021-03-31T09:10:00+00:00","dateModified":"2024-10-14T14:54:40+00:00","mainEntityOfPage":{"@id":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/"},"wordCount":1117,"publisher":{"@id":"https:\/\/pagepro.co\/blog\/#organization"},"image":{"@id":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/#primaryimage"},"thumbnailUrl":"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/05\/ReactNativepicture.png","articleSection":["Mobile Dev","React Native"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/","url":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/","name":"How To Use React Native Over The Air Updates (OTA) - Pagepro","isPartOf":{"@id":"https:\/\/pagepro.co\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/#primaryimage"},"image":{"@id":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/#primaryimage"},"thumbnailUrl":"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/05\/ReactNativepicture.png","datePublished":"2021-03-31T09:10:00+00:00","dateModified":"2024-10-14T14:54:40+00:00","description":"Over The Air (OTA) updates is a powerful tool you can add to React Native with ease. Learn how to add them to your app and why it's worth it.","breadcrumb":{"@id":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/#primaryimage","url":"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/05\/ReactNativepicture.png","contentUrl":"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/05\/ReactNativepicture.png","width":1200,"height":682,"caption":"White icon of an atom with an orbiting electron and a smartphone in front, centred on a dark background with red glowing lines\u2014a nod to react native benefits\u2014and a bright red circle at the top."},{"@type":"BreadcrumbList","@id":"https:\/\/pagepro.co\/blog\/react-native-over-the-air-updates\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pagepro.co\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/pagepro.co\/blog\/"},{"@type":"ListItem","position":3,"name":"How To Use React Native Over The Air Updates (OTA)"}]},{"@type":"WebSite","@id":"https:\/\/pagepro.co\/blog\/#website","url":"https:\/\/pagepro.co\/blog\/","name":"Pagepro","description":"Frictionless Next.js, Expo &amp; Sanity Development Blog","publisher":{"@id":"https:\/\/pagepro.co\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pagepro.co\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pagepro.co\/blog\/#organization","name":"Pagepro","url":"https:\/\/pagepro.co\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pagepro.co\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2020\/08\/logo_pagepro-b66d228a1e-1.png","contentUrl":"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2020\/08\/logo_pagepro-b66d228a1e-1.png","width":440,"height":200,"caption":"Pagepro"},"image":{"@id":"https:\/\/pagepro.co\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/thisispagepro"]},{"@type":"Person","@id":"https:\/\/pagepro.co\/blog\/#\/schema\/person\/adda50101116bf3d52a8e51025bcdae5","name":"Daniel Ni\u017cy\u0144ski","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f72093a6db1e7ee320e3a06733bec105cf5769bde90ff976d4e17289c6e99fa0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f72093a6db1e7ee320e3a06733bec105cf5769bde90ff976d4e17289c6e99fa0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f72093a6db1e7ee320e3a06733bec105cf5769bde90ff976d4e17289c6e99fa0?s=96&d=mm&r=g","caption":"Daniel Ni\u017cy\u0144ski"},"description":"Daniel is a distinguished Senior React Native Developer at Pagepro, renowned for his exceptional problem-solving skills and proactive approach. His journey in mobile app development is marked by a series of successfully tackled challenges, where he has consistently resolved some of the most intricate issues in mobile app development.","sameAs":["https:\/\/www.linkedin.com\/in\/daniel-ni\u017cy\u0144ski-17322a1b3\/"],"url":"https:\/\/pagepro.co\/blog\/author\/daniel_nizynski\/"}]}},"_links":{"self":[{"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/posts\/5473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/comments?post=5473"}],"version-history":[{"count":34,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/posts\/5473\/revisions"}],"predecessor-version":[{"id":18101,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/posts\/5473\/revisions\/18101"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/media\/6613"}],"wp:attachment":[{"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/media?parent=5473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/categories?post=5473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/tags?post=5473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}