{"id":364,"date":"2019-04-24T15:04:37","date_gmt":"2019-04-24T13:04:37","guid":{"rendered":"http:\/\/productcrafters.io\/blog\/?p=364"},"modified":"2026-01-19T23:09:36","modified_gmt":"2026-01-19T21:09:36","slug":"responsive-react-native-apps","status":"publish","type":"post","link":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/","title":{"rendered":"How to Build Responsive React-Native Apps?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Styling of the mobile app may be tricky &#8211; there are a lot of screens sizes and screen ratios, especially for Android devices. When you develop an app, in most cases you have only one wireframe version in Invision\/Sketch per platform. For example in <a href=\"https:\/\/productcrafters.io\/beautyadvisor.html\">our last project<\/a>, we targeted iOS only and had wireframes for iPhone X and iPhone 8 only. Suddenly the client decided to support iPhone 8 Plus, 6, 6 Plus, XS, XR. This year we will see the new iPhone with different screen size and dimension. I&#8217;m sure it will be a new requirement. If we just <strong>hardcoded in the original design<\/strong> for iPhone X, it would <strong>cause us big troubles<\/strong> just before project launch. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">How to create a responsive react-native app from a mockup?<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-370\" src=\"http:\/\/productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/Screen-Shot-2019-04-22-at-3.25.50-PM-230x380.png\" alt=\"Responsive React Native app\" width=\"305\" height=\"504\" srcset=\"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/Screen-Shot-2019-04-22-at-3.25.50-PM-230x380.png 230w, https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/Screen-Shot-2019-04-22-at-3.25.50-PM-768x1270.png 768w, https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/Screen-Shot-2019-04-22-at-3.25.50-PM-619x1024.png 619w, https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/Screen-Shot-2019-04-22-at-3.25.50-PM.png 986w\" sizes=\"(max-width: 305px) 100vw, 305px\" \/><\/p>\n<h3>Step 1: Move from physical to density independent pixels<\/h3>\n<p>According to <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/height-and-width#fixed-dimensions\">docs<\/a>:<\/p>\n<blockquote><p>\u00a0All dimensions in React Native are unitless, and represent density-independent pixels (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Device-independent_pixel\">wiki<\/a>).<\/p><\/blockquote>\n<p>Any mockup is designed with physical pixels. So we need to <span style=\"font-weight: 400;\">convert pixels to density independent pixels.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We calculate relative width and height for the current screen size.\u00a0<\/span><\/p>\n<pre><code class=\"js\">\r\nexport const deviceWidth = Dimensions.get('window').width\r\nexport const deviceHeight = Dimensions.get('window').height\r\nexport const calcHeight = x =&gt; PixelRatio.roundToNearestPixel((deviceHeight * x) \/ 100)\r\nexport const calcWidth = x =&gt; PixelRatio.roundToNearestPixel((deviceWidth * x) \/ 100)\r\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">We avoid using ANY hardcoded constants in the layout. It&#8217;s very tempting to use <strong>+10 px<\/strong> to align space between to controls. But if we do this and somebody will run the app on a device with another screen density\/ratio this single line will make a lot of trouble for us.<\/span><\/p>\n<pre><code class=\"css\">\r\nheaderText: {\r\n  ...textHeaderStyle,\r\n  paddingTop: calcHeight(4),\r\n  paddingLeft: calcWidth(16.5),\r\n  paddingRight: calcWidth(16.5),\r\n  textAlign: 'center',\r\n  lineHeight: 17\r\n}\r\n<\/code><\/pre>\n<h3>Step 2: Use different styles\/const in React-Native for different device models<\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-403\" src=\"http:\/\/productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/iPhone-8-Plus-X-12.1-2019-04-22-17-47-33-369x380.png\" alt=\"React Native beauty app\" width=\"753\" height=\"776\" srcset=\"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/iPhone-8-Plus-X-12.1-2019-04-22-17-47-33-369x380.png 369w, https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/iPhone-8-Plus-X-12.1-2019-04-22-17-47-33.png 687w\" sizes=\"(max-width: 753px) 100vw, 753px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In our experience, we got a situation when responsive styles work great for all devices. But there are devices with much wider screens (iPhone X vs iPhone iPad) have much different aspect ratio. \u00a0In this situation, responsive styles will be not enough.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Our responsive helpers use a linear function to the width or height of the device. Linear responsiveness is not a universal instrument \u2019cause if you start using it for fonts or borders\/paddings, you will see how ugly can be the design of your app. The main use of linear responsive helpers is a layout, like columns width, sidebars or items grid.<\/span><\/p>\n<pre><code class=\"js\">\r\nimport { Dimensions, Platform } from 'react-native'\r\n\r\nexport const isIphoneX = () =&gt; {\r\n  const dimen = Dimensions.get('window')\r\n  return (\r\n    Platform.OS === 'ios' &amp;&amp; !Platform.isPad &amp;&amp; !Platform.isTVOS &amp;&amp; \r\n    (dimen.height === 812 || dimen.width === 812 || (dimen.height === 896 || dimen.width === 896))\r\n  )\r\n}\r\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">This is our helper function to ensure, the current device is iPhone X. Now when we know this, let&#8217;s apply the appropriate style:<\/span><\/p>\n<pre><code class=\"js\">const style = isPhoneX() ? style1 : style2<\/code><\/pre>\n<h3>Step 3: Different layouts for smartphones and tablets, portrait and landscape mode<\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-376\" src=\"http:\/\/productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/A-Useful-Guide-To-Master-Responsive-Design-Using-CSS-380x236.png\" alt=\"Different layouts for smartphones and tablets, portrait and landscape mode\" width=\"661\" height=\"411\" srcset=\"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/A-Useful-Guide-To-Master-Responsive-Design-Using-CSS-380x236.png 380w, https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/A-Useful-Guide-To-Master-Responsive-Design-Using-CSS-200x125.png 200w, https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/A-Useful-Guide-To-Master-Responsive-Design-Using-CSS.png 492w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Are you working on the app that also may be launched on the tablet, start from UX for it. How do you want to rebuild the app interface for the much wider screen? What controls do you want to put on free space? What controls\/components you need to remove if the screen is much narrower?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Discuss it with the client as soon as possible to avoid spending time on reworking functional screens. Make sure you have approved mockup before working on styles.<\/span><\/p>\n<h3>Step 4: Pictures<\/h3>\n<p>To get astonishing image quality on React-Native and in the same time save internet traffic, we need to ask backend for image size for specific mobile app screen size. For sure while image is loading we will show spinner.<\/p>\n<p>So now we need to do vice versa &#8211; convert density-independent pixels that we have in image style to physical pixels, that backend works with. In BeatyAdvisor project we use <a href=\"https:\/\/cloudinary.com\">Cloudinary<\/a> for easily <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#resizing_and_cropping_images\">image processing\u00a0<\/a>It allows to resize image using single param in URL. To calculate it there is built-in helper:<\/p>\n<pre><code class=\"js\">\r\nconst imgWidthDP = 68\r\nconst imgWidth = PixelRatio.getPixelSizeForLayoutSize(imgWidthPx)\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Styling of the mobile app may be tricky &#8211; there are a lot of screens sizes and screen ratios, especially for Android devices. When&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1905,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Native Responsive Design: Complete Guide 2026 | ProductCrafters<\/title>\n<meta name=\"description\" content=\"Master React Native responsive design for all devices. Learn screen size handling, flexible layouts, dimensions API, and responsive patterns.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native Responsive Design: Complete Guide 2026 | ProductCrafters\" \/>\n<meta property=\"og:description\" content=\"Master React Native responsive design for all devices. Learn screen size handling, flexible layouts, dimensions API, and responsive patterns.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"ProductCrafters\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/productcrafters\" \/>\n<meta property=\"article:author\" content=\"#\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-24T13:04:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-19T21:09:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/React_Native_Animation-1280x680.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Oleg Kalyta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@#\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oleg Kalyta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/\"},\"author\":{\"name\":\"Oleg Kalyta\",\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/#\/schema\/person\/65956d0c96a9ca33a2e160ed676cd854\"},\"headline\":\"How to Build Responsive React-Native Apps?\",\"datePublished\":\"2019-04-24T13:04:37+00:00\",\"dateModified\":\"2026-01-19T21:09:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/\"},\"wordCount\":562,\"publisher\":{\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/React_Native_Animation-1280x680.png\",\"articleSection\":[\"Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/\",\"url\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/\",\"name\":\"React Native Responsive Design: Complete Guide 2026 | ProductCrafters\",\"isPartOf\":{\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/React_Native_Animation-1280x680.png\",\"datePublished\":\"2019-04-24T13:04:37+00:00\",\"dateModified\":\"2026-01-19T21:09:36+00:00\",\"description\":\"Master React Native responsive design for all devices. Learn screen size handling, flexible layouts, dimensions API, and responsive patterns.\",\"breadcrumb\":{\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#primaryimage\",\"url\":\"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/React_Native_Animation-1280x680.png\",\"contentUrl\":\"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/React_Native_Animation-1280x680.png\",\"width\":1280,\"height\":680,\"caption\":\"How to Build Responsive React-Native Apps\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stage.productcrafters.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Development\",\"item\":\"https:\/\/stage.productcrafters.io\/blog\/development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Build Responsive React-Native Apps?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/#website\",\"url\":\"https:\/\/stage.productcrafters.io\/blog\/\",\"name\":\"ProductCrafters\",\"description\":\"Our insights on development and business topics.\",\"publisher\":{\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stage.productcrafters.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/#organization\",\"name\":\"ProductCrafters\",\"url\":\"https:\/\/stage.productcrafters.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/favicon.png\",\"contentUrl\":\"https:\/\/productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/favicon.png\",\"width\":64,\"height\":64,\"caption\":\"ProductCrafters\"},\"image\":{\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/productcrafters\",\"https:\/\/www.linkedin.com\/company\/18621816\",\"https:\/\/github.com\/ProductCrafters\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/#\/schema\/person\/65956d0c96a9ca33a2e160ed676cd854\",\"name\":\"Oleg Kalyta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/stage.productcrafters.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7933ebedbe0e78c4a330b2080f5a4e429545588429c7f678fd0c87bb48ec123f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7933ebedbe0e78c4a330b2080f5a4e429545588429c7f678fd0c87bb48ec123f?s=96&d=mm&r=g\",\"caption\":\"Oleg Kalyta\"},\"description\":\"Founder\",\"sameAs\":[\"#\",\"https:\/\/www.linkedin.com\/in\/olegkalyta\/\",\"https:\/\/x.com\/#\"],\"url\":\"https:\/\/stage.productcrafters.io\/blog\/author\/oleg\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native Responsive Design: Complete Guide 2026 | ProductCrafters","description":"Master React Native responsive design for all devices. Learn screen size handling, flexible layouts, dimensions API, and responsive patterns.","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:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/","og_locale":"en_US","og_type":"article","og_title":"React Native Responsive Design: Complete Guide 2026 | ProductCrafters","og_description":"Master React Native responsive design for all devices. Learn screen size handling, flexible layouts, dimensions API, and responsive patterns.","og_url":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/","og_site_name":"ProductCrafters","article_publisher":"https:\/\/www.facebook.com\/productcrafters","article_author":"#","article_published_time":"2019-04-24T13:04:37+00:00","article_modified_time":"2026-01-19T21:09:36+00:00","og_image":[{"width":1280,"height":680,"url":"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/React_Native_Animation-1280x680.png","type":"image\/png"}],"author":"Oleg Kalyta","twitter_card":"summary_large_image","twitter_creator":"@#","twitter_misc":{"Written by":"Oleg Kalyta","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#article","isPartOf":{"@id":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/"},"author":{"name":"Oleg Kalyta","@id":"https:\/\/stage.productcrafters.io\/blog\/#\/schema\/person\/65956d0c96a9ca33a2e160ed676cd854"},"headline":"How to Build Responsive React-Native Apps?","datePublished":"2019-04-24T13:04:37+00:00","dateModified":"2026-01-19T21:09:36+00:00","mainEntityOfPage":{"@id":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/"},"wordCount":562,"publisher":{"@id":"https:\/\/stage.productcrafters.io\/blog\/#organization"},"image":{"@id":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/React_Native_Animation-1280x680.png","articleSection":["Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/","url":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/","name":"React Native Responsive Design: Complete Guide 2026 | ProductCrafters","isPartOf":{"@id":"https:\/\/stage.productcrafters.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#primaryimage"},"image":{"@id":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/React_Native_Animation-1280x680.png","datePublished":"2019-04-24T13:04:37+00:00","dateModified":"2026-01-19T21:09:36+00:00","description":"Master React Native responsive design for all devices. Learn screen size handling, flexible layouts, dimensions API, and responsive patterns.","breadcrumb":{"@id":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#primaryimage","url":"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/React_Native_Animation-1280x680.png","contentUrl":"https:\/\/stage.productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/React_Native_Animation-1280x680.png","width":1280,"height":680,"caption":"How to Build Responsive React-Native Apps"},{"@type":"BreadcrumbList","@id":"https:\/\/stage.productcrafters.io\/blog\/responsive-react-native-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stage.productcrafters.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Development","item":"https:\/\/stage.productcrafters.io\/blog\/development\/"},{"@type":"ListItem","position":3,"name":"How to Build Responsive React-Native Apps?"}]},{"@type":"WebSite","@id":"https:\/\/stage.productcrafters.io\/blog\/#website","url":"https:\/\/stage.productcrafters.io\/blog\/","name":"ProductCrafters","description":"Our insights on development and business topics.","publisher":{"@id":"https:\/\/stage.productcrafters.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stage.productcrafters.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/stage.productcrafters.io\/blog\/#organization","name":"ProductCrafters","url":"https:\/\/stage.productcrafters.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/stage.productcrafters.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/favicon.png","contentUrl":"https:\/\/productcrafters.io\/blog\/wp-content\/uploads\/2019\/04\/favicon.png","width":64,"height":64,"caption":"ProductCrafters"},"image":{"@id":"https:\/\/stage.productcrafters.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/productcrafters","https:\/\/www.linkedin.com\/company\/18621816","https:\/\/github.com\/ProductCrafters"]},{"@type":"Person","@id":"https:\/\/stage.productcrafters.io\/blog\/#\/schema\/person\/65956d0c96a9ca33a2e160ed676cd854","name":"Oleg Kalyta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/stage.productcrafters.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7933ebedbe0e78c4a330b2080f5a4e429545588429c7f678fd0c87bb48ec123f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7933ebedbe0e78c4a330b2080f5a4e429545588429c7f678fd0c87bb48ec123f?s=96&d=mm&r=g","caption":"Oleg Kalyta"},"description":"Founder","sameAs":["#","https:\/\/www.linkedin.com\/in\/olegkalyta\/","https:\/\/x.com\/#"],"url":"https:\/\/stage.productcrafters.io\/blog\/author\/oleg\/"}]}},"_links":{"self":[{"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/posts\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/comments?post=364"}],"version-history":[{"count":33,"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/posts\/364\/revisions"}],"predecessor-version":[{"id":2029,"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/posts\/364\/revisions\/2029"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/media\/1905"}],"wp:attachment":[{"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/media?parent=364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/categories?post=364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stage.productcrafters.io\/blog\/wp-json\/wp\/v2\/tags?post=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}