{"id":1014,"date":"2018-05-08T13:49:55","date_gmt":"2018-05-08T13:49:55","guid":{"rendered":"https:\/\/www.darrenlambert.com\/?p=1014"},"modified":"2018-05-15T20:23:36","modified_gmt":"2018-05-15T20:23:36","slug":"how-to-enable-hot-reloading-in-react-native","status":"publish","type":"post","link":"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/","title":{"rendered":"How to enable Hot Reloading in React Native"},"content":{"rendered":"<p>By default Hot Reloading in React Native only works if you extend React.Component.<br \/>\nIf you are using your own base classes to inherit from you need to change the .babelrc file.<\/p>\n<p>Below is my working example.  In the superClasses section you will see BasePanel and InfoPanel which are my base classes.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">{\r\n &quot;presets&quot;: &#x5B;&quot;babel-preset-expo&quot;],\r\n &quot;env&quot;: {\r\n  &quot;development&quot;: {\r\n    &quot;plugins&quot;: &#x5B;\r\n      &#x5B;&quot;react-transform&quot;,\r\n        {\r\n          &quot;transforms&quot;: &#x5B;{\r\n             &quot;transform&quot;: &quot;react-transform-hmr&quot;,\r\n             &quot;imports&quot;: &#x5B;&quot;react&quot;],\r\n             &quot;locals&quot;: &#x5B;&quot;module&quot;]\r\n           }],\r\n          &quot;superClasses&quot;: &#x5B;&quot;BasePanel&quot;, &quot;InfoPanel&quot;, &quot;React.Component&quot;, &quot;Component&quot;]\r\n        }\r\n      ]\r\n     ]  \r\n    }\r\n  }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>By default Hot Reloading in React Native only works if you extend React.Component. If you are using your own base classes to inherit from you need to change the .babelrc file. Below is my working example. In the superClasses section you will see BasePanel and InfoPanel which are my base classes. { &quot;presets&quot;: &#x5B;&quot;babel-preset-expo&quot;], &quot;env&quot;: &hellip;<\/p>\n","protected":false},"author":1,"featured_media":1027,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[59],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to enable Hot Reloading in React Native - Darren Lambert<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-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 enable Hot Reloading in React Native - Darren Lambert\" \/>\n<meta property=\"og:description\" content=\"By default Hot Reloading in React Native only works if you extend React.Component. If you are using your own base classes to inherit from you need to change the .babelrc file. Below is my working example. In the superClasses section you will see BasePanel and InfoPanel which are my base classes. { &quot;presets&quot;: &#x5B;&quot;babel-preset-expo&quot;], &quot;env&quot;: &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Darren Lambert\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-08T13:49:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-15T20:23:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.darrenlambert.com\/wp-content\/uploads\/2018\/05\/react-native.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"414\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Darren\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Darren\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/\",\"url\":\"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/\",\"name\":\"How to enable Hot Reloading in React Native - Darren Lambert\",\"isPartOf\":{\"@id\":\"https:\/\/www.darrenlambert.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.darrenlambert.com\/wp-content\/uploads\/2018\/05\/react-native.jpeg\",\"datePublished\":\"2018-05-08T13:49:55+00:00\",\"dateModified\":\"2018-05-15T20:23:36+00:00\",\"author\":{\"@id\":\"https:\/\/www.darrenlambert.com\/#\/schema\/person\/ba3d82eb3f9925e946dae3b57e35bb79\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/#primaryimage\",\"url\":\"https:\/\/www.darrenlambert.com\/wp-content\/uploads\/2018\/05\/react-native.jpeg\",\"contentUrl\":\"https:\/\/www.darrenlambert.com\/wp-content\/uploads\/2018\/05\/react-native.jpeg\",\"width\":800,\"height\":414},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.darrenlambert.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to enable Hot Reloading in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.darrenlambert.com\/#website\",\"url\":\"https:\/\/www.darrenlambert.com\/\",\"name\":\"Darren Lambert\",\"description\":\"WordPress &amp; WooCommerce Expert\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.darrenlambert.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.darrenlambert.com\/#\/schema\/person\/ba3d82eb3f9925e946dae3b57e35bb79\",\"name\":\"Darren\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.darrenlambert.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/076d975a0d00c5b2d53e2f76076cf5cf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/076d975a0d00c5b2d53e2f76076cf5cf?s=96&d=mm&r=g\",\"caption\":\"Darren\"},\"url\":\"https:\/\/www.darrenlambert.com\/author\/darren\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to enable Hot Reloading in React Native - Darren Lambert","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:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"How to enable Hot Reloading in React Native - Darren Lambert","og_description":"By default Hot Reloading in React Native only works if you extend React.Component. If you are using your own base classes to inherit from you need to change the .babelrc file. Below is my working example. In the superClasses section you will see BasePanel and InfoPanel which are my base classes. { &quot;presets&quot;: &#x5B;&quot;babel-preset-expo&quot;], &quot;env&quot;: &hellip;","og_url":"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/","og_site_name":"Darren Lambert","article_published_time":"2018-05-08T13:49:55+00:00","article_modified_time":"2018-05-15T20:23:36+00:00","og_image":[{"width":800,"height":414,"url":"https:\/\/www.darrenlambert.com\/wp-content\/uploads\/2018\/05\/react-native.jpeg","type":"image\/jpeg"}],"author":"Darren","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Darren","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/","url":"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/","name":"How to enable Hot Reloading in React Native - Darren Lambert","isPartOf":{"@id":"https:\/\/www.darrenlambert.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/#primaryimage"},"image":{"@id":"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.darrenlambert.com\/wp-content\/uploads\/2018\/05\/react-native.jpeg","datePublished":"2018-05-08T13:49:55+00:00","dateModified":"2018-05-15T20:23:36+00:00","author":{"@id":"https:\/\/www.darrenlambert.com\/#\/schema\/person\/ba3d82eb3f9925e946dae3b57e35bb79"},"breadcrumb":{"@id":"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/#primaryimage","url":"https:\/\/www.darrenlambert.com\/wp-content\/uploads\/2018\/05\/react-native.jpeg","contentUrl":"https:\/\/www.darrenlambert.com\/wp-content\/uploads\/2018\/05\/react-native.jpeg","width":800,"height":414},{"@type":"BreadcrumbList","@id":"https:\/\/www.darrenlambert.com\/how-to-enable-hot-reloading-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.darrenlambert.com\/"},{"@type":"ListItem","position":2,"name":"How to enable Hot Reloading in React Native"}]},{"@type":"WebSite","@id":"https:\/\/www.darrenlambert.com\/#website","url":"https:\/\/www.darrenlambert.com\/","name":"Darren Lambert","description":"WordPress &amp; WooCommerce Expert","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.darrenlambert.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.darrenlambert.com\/#\/schema\/person\/ba3d82eb3f9925e946dae3b57e35bb79","name":"Darren","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.darrenlambert.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/076d975a0d00c5b2d53e2f76076cf5cf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/076d975a0d00c5b2d53e2f76076cf5cf?s=96&d=mm&r=g","caption":"Darren"},"url":"https:\/\/www.darrenlambert.com\/author\/darren\/"}]}},"jetpack_featured_media_url":"https:\/\/www.darrenlambert.com\/wp-content\/uploads\/2018\/05\/react-native.jpeg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.darrenlambert.com\/wp-json\/wp\/v2\/posts\/1014"}],"collection":[{"href":"https:\/\/www.darrenlambert.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.darrenlambert.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.darrenlambert.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.darrenlambert.com\/wp-json\/wp\/v2\/comments?post=1014"}],"version-history":[{"count":0,"href":"https:\/\/www.darrenlambert.com\/wp-json\/wp\/v2\/posts\/1014\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.darrenlambert.com\/wp-json\/wp\/v2\/media\/1027"}],"wp:attachment":[{"href":"https:\/\/www.darrenlambert.com\/wp-json\/wp\/v2\/media?parent=1014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.darrenlambert.com\/wp-json\/wp\/v2\/categories?post=1014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.darrenlambert.com\/wp-json\/wp\/v2\/tags?post=1014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}