{"id":36895,"date":"2025-02-20T07:00:00","date_gmt":"2025-02-20T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36895"},"modified":"2025-02-20T12:16:41","modified_gmt":"2025-02-20T20:16:41","slug":"responsive-image-component-react-native","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native","title":{"rendered":"Building a Responsive Image Component in React Native"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Responsive design in the web development world has just become \u201cdesign.\u201d According to <a href=\"https:\/\/www.statista.com\/statistics\/1289755\/internet-access-by-device-worldwide\">recent data<\/a>, approximately 96.2% of global internet users access the web from mobile devices, with most using smartphones to go online. It makes sense to be sure your content renders well on mobile devices is a top priority. Mobile apps aren\u2019t typically built this way because they are just mobile apps. In most cases your users will be accessing your app for the same type of devices. However, this pattern can still be useful for mobile apps since they might still support a wide range of devices from phones, tablets, and televisions.<\/p>\n<p>So how do you build responsive native mobile apps? SwiftUI, for example, provides UI components that adapt based on the device. A menu might be a slide out on a mobile device or it can render as a sidebar menu on TvOS. We can build a similar adaptive component to make sure that the media content in our applications is optimized based on the device size or screen dimensions.\nFor creating an adaptive media component in our application, Cloudinary has <a href=\"https:\/\/cloudinary.com\/documentation\/mobile_sdks\">mobile SDKs<\/a> for <a href=\"https:\/\/cloudinary.com\/documentation\/ios_integration\">iOS<\/a>, <a href=\"https:\/\/cloudinary.com\/documentation\/android_integration\">Android<\/a>, <a href=\"https:\/\/cloudinary.com\/documentation\/react_native_integration\">React Native<\/a>, and <a href=\"https:\/\/cloudinary.com\/documentation\/flutter_integration\">Flutter<\/a>. In this post we will build a ResponsiveImage component for <a href=\"https:\/\/reactnative.dev\/\">React Native<\/a> that uses the Cloudinary SDK to serve optimized images to our users based on their device.<\/p>\n<h2>Create a React Native App With Expo<\/h2>\n<p>To get started with building a responsive image component in React Native, we\u2019ll first create a new project using <a href=\"https:\/\/expo.dev\/\">Expo<\/a>. Expo is a powerful toolchain that simplifies the development process for React Native apps. It provides a set of services and libraries that streamline the setup and deployment of your application. To create a new Expo project, open your terminal and run the following command:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">create-expo-app<\/span><span class=\"hljs-keyword\">@latest<\/span> \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>It will prompt you for a project name. We used \u201cresponsive-images\u201d for the demo application.<\/p>\n<p>Here\u2019s a quick overview of the relevant project files we will interact with:<\/p>\n<ul>\n<li>\n<code>app\/<\/code>. Contains the app routes\/views\n<ul>\n<li>\n<code>app\/(tabs)\/index.tsx<\/code>. This is the home view of the application<\/li>\n<\/ul>\n<\/li>\n<li>\n<code>components\/<\/code>. A directory for our React components<\/li>\n<\/ul>\n<p>For our responsive image component, we\u2019ll focus on integrating the Cloudinary SDK to dynamically serve optimized images based on the device type. This involves setting up the Cloudinary instance and configuring the image transformations, which we\u2019ll cover in the following sections. By leveraging Expo\u2019s capabilities, we can easily test our app on different devices and ensure that our responsive design works seamlessly across various screen sizes.<\/p>\n<h2>Install and Configure the Cloudinary SDK<\/h2>\n<p>To integrate Cloudinary into your React Native app, you\u2019ll need to install the <a href=\"https:\/\/cloudinary.com\/documentation\/react_native_integration\">Cloudinary React Native SDK<\/a>. This SDK allows you to generate URLs for your images and apply transformations directly within your app. Start by installing the SDK using npm:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-selector-tag\">cloudinary-react-native<\/span> <span class=\"hljs-keyword\">@cloudinary<\/span>\/url-gen expo-device\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, create and configure a Cloudinary instance. You\u2019ll need your Cloudinary cloud name, which you can find in your dashboard. Create a new file <code>lib\/cloudinary.ts<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> cloudinary = <span class=\"hljs-keyword\">new<\/span> Cloudinary({\n  <span class=\"hljs-attr\">cloud<\/span>: {\n    <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">'your-cloud-name'<\/span>\n  }\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The Cloudinary React Native SDK allows you to leverage Cloudinary\u2019s powerful image transformation capabilities, enabling you to serve optimized images tailored to the user\u2019s device. In the next steps, we\u2019ll explore how to apply specific transformations and render these images responsively in your React Native app.<\/p>\n<h2>Create a ResponsiveImage Component<\/h2>\n<p>Now that we have the Cloudinary SDK setup, we can get to work on our <code>ResponsiveImage<\/code> component. Create a new file <code>components\/ResponsiveImage.tsx<\/code>.\nLet\u2019s first define the API for our responsive image component with our Prop type:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">interface<\/span> <span class=\"hljs-title\">ResponsiveImageProps<\/span> <\/span>{\n  publicId: string;\n  width: number;\n  height: number;\n  quality?: number | <span class=\"hljs-string\">'auto'<\/span>;\n  format?: string | <span class=\"hljs-string\">'auto'<\/span>;\n  device?: {\n    phone?: {\n      width?: number;\n      height?: number;\n    };\n    tablet?: {\n      width?: number;\n      height?: number;\n    };\n    desktop?: {\n      width?: number;\n      height?: number;\n    };\n    tv?: {\n      width?: number;\n      height?: number;\n    };\n  };\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Based on our props our <code>ResponsiveImage<\/code> component takes a width, height, format, and quality. We also have a device option that will allow us to override the default width and height based on the type of device the user is using.\nNext, let\u2019s add the base pieces of our component:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> ResponsiveImage: React.FC&lt;ResponsiveImageProps&gt; = ({ \n  publicId, \n}) =&gt; {\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">AdvancedImage<\/span>\n      <span class=\"hljs-attr\">cldImg<\/span>=<span class=\"hljs-string\">{myImage}<\/span>\n    \/&gt;<\/span><\/span>\n  );\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We now have the most basic Cloudinary image component in place. Now we\u2019ll add the functionality to support our API.<\/p>\n<h3>Defining Breakpoints<\/h3>\n<p>To make our ResponsiveImage component truly responsive, we need to define breakpoints that determine how the image should be displayed on different device types. This involves using the device prop to specify custom dimensions for various devices, such as phones, tablets, desktops, and TVs. If no specific dimensions are provided for a device type, the component will fall back to using the default width and height.\nWe\u2019re going to use <a href=\"https:\/\/docs.expo.dev\/versions\/latest\/sdk\/device\/#devicedevicetype\">DeviceType<\/a> and fall back to reading the device dimensions if the device type is unknown. We\u2019ll have an effect to read the device type, a function called <code>getEffectiveDeviceType<\/code> for returning a device type based on screen dimensions, and a <code>getDimensions<\/code> function for selecting the responsive dimensions based on the user\u2019s device.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ \/components\/ResponsiveImage.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> * <span class=\"hljs-keyword\">as<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { useWindowDimensions } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-native'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> * <span class=\"hljs-keyword\">as<\/span> Device <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'expo-device'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> ResponsiveImage: React.FC&lt;ResponsiveImageProps&gt; = ({ \n  publicId, \n  <span class=\"hljs-attr\">width<\/span>: defaultWidth, \n  <span class=\"hljs-attr\">height<\/span>: defaultHeight, \n  quality = <span class=\"hljs-string\">'auto'<\/span>, \n  format = <span class=\"hljs-string\">'auto'<\/span>, \n  device \n}) =&gt; {\n  <span class=\"hljs-keyword\">const<\/span> { <span class=\"hljs-attr\">width<\/span>: screenWidth } = useWindowDimensions();\n  <span class=\"hljs-keyword\">const<\/span> &#91;deviceType, setDeviceType] = React.useState&lt;Device.DeviceType | <span class=\"hljs-literal\">null<\/span>&gt;(<span class=\"hljs-literal\">null<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Get the users DeviceType<\/span>\n  React.useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getDeviceType<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">const<\/span> type = <span class=\"hljs-keyword\">await<\/span> Device.getDeviceTypeAsync();\n      setDeviceType(type);\n    }\n    getDeviceType();\n  }, &#91;]);\n\n<span class=\"hljs-comment\">\/\/ If the DeviceType is unknown, fall back define it based on screen dimensions<\/span>\n  <span class=\"hljs-keyword\">const<\/span> getEffectiveDeviceType = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">if<\/span> (deviceType !== <span class=\"hljs-literal\">null<\/span> &amp;&amp; deviceType !== Device.DeviceType.UNKNOWN) {\n      <span class=\"hljs-keyword\">return<\/span> deviceType;\n    }\n\n    <span class=\"hljs-keyword\">if<\/span> (screenWidth &lt; <span class=\"hljs-number\">768<\/span>) {\n      <span class=\"hljs-keyword\">return<\/span> Device.DeviceType.PHONE;\n    } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (screenWidth &gt;= <span class=\"hljs-number\">768<\/span> &amp;&amp; screenWidth &lt; <span class=\"hljs-number\">1024<\/span>) {\n      <span class=\"hljs-keyword\">return<\/span> Device.DeviceType.TABLET;\n    } <span class=\"hljs-keyword\">else<\/span> {\n      <span class=\"hljs-keyword\">return<\/span> Device.DeviceType.TV;\n    }\n  };\n\n\n<span class=\"hljs-comment\">\/\/ Define the Image dimensions based on the device type<\/span>\n<span class=\"hljs-keyword\">const<\/span> getDimensions = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> effectiveType = getEffectiveDeviceType();\n    \n    <span class=\"hljs-keyword\">if<\/span> (device) {\n      <span class=\"hljs-keyword\">switch<\/span> (effectiveType) {\n        <span class=\"hljs-keyword\">case<\/span> Device.DeviceType.PHONE:\n          <span class=\"hljs-keyword\">if<\/span> (device.phone) {\n            <span class=\"hljs-keyword\">return<\/span> {\n              <span class=\"hljs-attr\">width<\/span>: device.phone.width || defaultWidth,\n              <span class=\"hljs-attr\">height<\/span>: device.phone.height || defaultHeight\n            };\n          }\n          <span class=\"hljs-keyword\">break<\/span>;\n        <span class=\"hljs-keyword\">case<\/span> Device.DeviceType.TABLET:\n          <span class=\"hljs-keyword\">if<\/span> (device.tablet) {\n            <span class=\"hljs-keyword\">return<\/span> {\n              <span class=\"hljs-attr\">width<\/span>: device.tablet.width || defaultWidth,\n              <span class=\"hljs-attr\">height<\/span>: device.tablet.height || defaultHeight\n            };\n          }\n          <span class=\"hljs-keyword\">break<\/span>;\n        <span class=\"hljs-keyword\">case<\/span> Device.DeviceType.TV:\n          <span class=\"hljs-keyword\">if<\/span> (device.tv) {\n            <span class=\"hljs-keyword\">return<\/span> {\n              <span class=\"hljs-attr\">width<\/span>: device.tv.width || defaultWidth,\n              <span class=\"hljs-attr\">height<\/span>: device.tv.height || defaultHeight\n            };\n          }\n          <span class=\"hljs-keyword\">break<\/span>;\n        <span class=\"hljs-keyword\">case<\/span> Device.DeviceType.DESKTOP:\n          <span class=\"hljs-keyword\">if<\/span> (device.desktop) {\n            <span class=\"hljs-keyword\">return<\/span> {\n              <span class=\"hljs-attr\">width<\/span>: device.desktop.width || defaultWidth,\n              <span class=\"hljs-attr\">height<\/span>: device.desktop.height || defaultHeight\n            };\n          }\n          <span class=\"hljs-keyword\">break<\/span>;\n      }\n    }\n\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">width<\/span>: defaultWidth,\n      <span class=\"hljs-attr\">height<\/span>: defaultHeight\n    };\n  };\n\n<span class=\"hljs-comment\">\/\/ render the image<\/span>\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">AdvancedImage<\/span>\n      <span class=\"hljs-attr\">cldImg<\/span>=<span class=\"hljs-string\">{myImage}<\/span>\n    \/&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We now have all the logic in place to get the correct image dimensions based on the user\u2019s device. Now we just need to use the Cloudinary SDKs to apply the proper transformations to our image.<\/p>\n<h3>Image Delivery and Transformations<\/h3>\n<p>Cloudinary provides a wide range of <a href=\"https:\/\/cloudinary.com\/documentation\/react_native_image_transformations\">transformations<\/a> that can be applied to images, such as resizing, cropping, adjusting quality, and changing formats. These transformations are performed in the cloud, ensuring that the images are optimized before being delivered to the end-user. This not only improves load times but also enhances the overall user experience.\nIn our <code>ResponsiveImage<\/code> component, we\u2019ll use Cloudinary\u2019s transformation capabilities to adjust the image\u2019s size, quality, and format based on the device type. Here\u2019s how we can implement these transformations:<\/p>\n<ol>\n<li>\n<strong>Resizing<\/strong>. We\u2019ll use the <code>fill<\/code> action to resize the image to the dimensions determined by our breakpoints. This ensures that the image fills the specified width and height while maintaining its aspect ratio.<\/li>\n<li>\n<strong>Quality<\/strong>. The <code>quality<\/code> prop allows us to specify the desired quality of the image. By default, we use \u2018auto\u2019, which lets Cloudinary automatically determine the optimal quality for the image. This helps in reducing file size without compromising on visual quality.<\/li>\n<li>\n<strong>Format<\/strong>. Similarly, the <code>format<\/code> prop can be set to \u2018auto\u2019, allowing Cloudinary to deliver the image in the most suitable format for the user\u2019s browser or device. This often results in smaller file sizes and faster load times.\nHere\u2019s how we can apply these transformations in our component:<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ \/components\/ResponseImage.tsx<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> ResponsiveImage: React.FC&lt;ResponsiveImageProps&gt; = ({ \n  publicId, \n  <span class=\"hljs-attr\">width<\/span>: defaultWidth, \n  <span class=\"hljs-attr\">height<\/span>: defaultHeight, \n  quality = <span class=\"hljs-string\">'auto'<\/span>, \n  format = <span class=\"hljs-string\">'auto'<\/span>, \n  device \n}) =&gt; {\n  <span class=\"hljs-comment\">\/\/ ... existing code for determining dimensions ...<\/span>\n\n  <span class=\"hljs-comment\">\/\/ Configure image transformations<\/span>\n  <span class=\"hljs-keyword\">const<\/span> myImage = cloudinary.image(publicId);\n  myImage\n    .resize(\n      fill()\n        .width(dimensions.width)\n        .height(dimensions.height)\n    )\n    .quality(quality)\n    .format(format);\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">AdvancedImage<\/span>\n      <span class=\"hljs-attr\">cldImg<\/span>=<span class=\"hljs-string\">{myImage}<\/span>\n      <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span>\n        <span class=\"hljs-attr\">width:<\/span> <span class=\"hljs-attr\">dimensions.width<\/span>,\n        <span class=\"hljs-attr\">height:<\/span> <span class=\"hljs-attr\">dimensions.height<\/span>,\n        <span class=\"hljs-attr\">alignSelf:<\/span> '<span class=\"hljs-attr\">center<\/span>',\n        <span class=\"hljs-attr\">marginVertical:<\/span> <span class=\"hljs-attr\">20<\/span>\n      }}\n    \/&gt;<\/span><\/span>\n  );\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We now have a new <code>ResponsiveImage<\/code> component that we can use throughout our mobile application to provide optimized images for the various device types that our app supports. Next we can add an image to our demo app to see how it looks on different device simulators with expo.<\/p>\n<h2>Adding a Responsive Image to the Home Screen<\/h2>\n<p>Let\u2019s add a test image to our home view with our new <code>ResponsiveImage<\/code> component. There will be some code for the default Expo application, in the code below I\u2019ve removed most of it. Add the following code to <code>app\/(tabs)\/index.tsx<\/code> with an image id from your Cloudinary account:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { Image, StyleSheet } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-native'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> ParallaxScrollView <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/components\/ParallaxScrollView'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { ThemedView } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/components\/ThemedView'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { ResponsiveImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/components\/ResponsiveImage'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">HomeScreen<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n   <span class=\"hljs-comment\">\/\/ This component is part of the default Expo app. We left it in for the demo since it\u2019s part of the layout. The ResponsiveImage will be rendered in the main content below it.<\/span>\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ParallaxScrollView<\/span>\n      <span class=\"hljs-attr\">headerBackgroundColor<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">light:<\/span> '#<span class=\"hljs-attr\">A1CEDC<\/span>', <span class=\"hljs-attr\">dark:<\/span> '#<span class=\"hljs-attr\">1D3D47<\/span>' }}\n      <span class=\"hljs-attr\">headerImage<\/span>=<span class=\"hljs-string\">{<\/span>\n        &lt;<span class=\"hljs-attr\">Image<\/span>\n          <span class=\"hljs-attr\">source<\/span>=<span class=\"hljs-string\">{require(<\/span>'@\/<span class=\"hljs-attr\">assets<\/span>\/<span class=\"hljs-attr\">images<\/span>\/<span class=\"hljs-attr\">partial-react-logo.png<\/span>')}\n          <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{styles.reactLogo}<\/span>\n        \/&gt;<\/span>\n      }&gt;\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ThemedView<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{styles.titleContainer}<\/span>&gt;<\/span>\n      \/\/ Add our test image here in the main content area of our mobile app view\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ResponsiveImage<\/span>\n        <span class=\"hljs-attr\">publicId<\/span>=<span class=\"hljs-string\">\"&#91;id of the image in your Cloudinary account]\"<\/span>\n        <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{300}<\/span>\n        <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{200}<\/span>\n        <span class=\"hljs-attr\">device<\/span>=<span class=\"hljs-string\">{{<\/span>\n          <span class=\"hljs-attr\">phone:<\/span> { <span class=\"hljs-attr\">width:<\/span> <span class=\"hljs-attr\">150<\/span>, <span class=\"hljs-attr\">height:<\/span> <span class=\"hljs-attr\">100<\/span> },\n          <span class=\"hljs-attr\">tablet:<\/span> { <span class=\"hljs-attr\">width:<\/span> <span class=\"hljs-attr\">250<\/span>, <span class=\"hljs-attr\">height:<\/span> <span class=\"hljs-attr\">150<\/span> },\n          <span class=\"hljs-attr\">desktop:<\/span> { <span class=\"hljs-attr\">width:<\/span> <span class=\"hljs-attr\">300<\/span>, <span class=\"hljs-attr\">height:<\/span> <span class=\"hljs-attr\">200<\/span> },\n          <span class=\"hljs-attr\">tv:<\/span> { <span class=\"hljs-attr\">width:<\/span> <span class=\"hljs-attr\">400<\/span>, <span class=\"hljs-attr\">height:<\/span> <span class=\"hljs-attr\">300<\/span> }\n        }}\n      \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ThemedView<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ParallaxScrollView<\/span>&gt;<\/span><\/span>\n  );\n}\n<span class=\"hljs-keyword\">const<\/span> styles = StyleSheet.create({\n  <span class=\"hljs-attr\">titleContainer<\/span>: {\n    <span class=\"hljs-attr\">flexDirection<\/span>: <span class=\"hljs-string\">'row'<\/span>,\n    <span class=\"hljs-attr\">alignItems<\/span>: <span class=\"hljs-string\">'center'<\/span>,\n    <span class=\"hljs-attr\">gap<\/span>: <span class=\"hljs-number\">8<\/span>,\n  },\n  <span class=\"hljs-attr\">stepContainer<\/span>: {\n    <span class=\"hljs-attr\">gap<\/span>: <span class=\"hljs-number\">8<\/span>,\n    <span class=\"hljs-attr\">marginBottom<\/span>: <span class=\"hljs-number\">8<\/span>,\n  },\n  <span class=\"hljs-attr\">reactLogo<\/span>: {\n    <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">178<\/span>,\n    <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">290<\/span>,\n    <span class=\"hljs-attr\">bottom<\/span>: <span class=\"hljs-number\">0<\/span>,\n    <span class=\"hljs-attr\">left<\/span>: <span class=\"hljs-number\">0<\/span>,\n    <span class=\"hljs-attr\">position<\/span>: <span class=\"hljs-string\">'absolute'<\/span>,\n  },\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Testing Images on Device Simulators<\/h2>\n<p>We can use expo to open our app in various iOS simulators. I\u2019ve opened my demo app on iPhone 16 and iPad Pro. We can see if we inspect our images that the image is responding based on our device.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1740082347\/blog-Building_a_Responsive_Image_Component_in_React_Native-1.png\" alt=\"screenshot of test image on iPhone 16 simulator\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"920\" height=\"1999\"\/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1740082347\/blog-Building_a_Responsive_Image_Component_in_React_Native-2.png\" alt=\"screenshot of test image on iPad Pro simulator 2\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1475\" height=\"1999\"\/><\/p>\n<h2>Summary<\/h2>\n<p>In this blog post, we explored how to build a responsive image component in React Native using the Cloudinary SDK. We started by setting up a new Expo project and configuring the Cloudinary SDK to handle image transformations. We then created a ResponsiveImage component that dynamically adjusts image dimensions based on the device type, ensuring optimal display across phones, tablets, desktops, and TVs. We were able to apply transformations such as resizing, quality adjustment, and format optimization, all of which contribute to a seamless and efficient user experience. Finally, we integrated our component into a demo app and tested it on various devices using Expo\u2019s simulators, demonstrating the flexibility and effectiveness of our approach.\n<a href=\"https:\/\/cloudinary.com\/users\/register_free\">Download a free Cloudinary account today<\/a> and deliver high-quality, responsive images in your React Native applications.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":36896,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[202,246,263],"class_list":["post-36895","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-mobile","tag-react","tag-sdk"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Build a Responsive Image Component in React Native<\/title>\n<meta name=\"description\" content=\"Learn how to build a ResponsiveImage component for React Native using a Cloudinary SDK to serve optimized images to our users based on their device.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Responsive Image Component in React Native\" \/>\n<meta property=\"og:description\" content=\"Learn how to build a ResponsiveImage component for React Native using a Cloudinary SDK to serve optimized images to our users based on their device.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-20T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-20T20:16:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Building a Responsive Image Component in React Native\",\"datePublished\":\"2025-02-20T15:00:00+00:00\",\"dateModified\":\"2025-02-20T20:16:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native.png?_i=AA\",\"keywords\":[\"Mobile\",\"React\",\"SDK\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native\",\"url\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native\",\"name\":\"How to Build a Responsive Image Component in React Native\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native.png?_i=AA\",\"datePublished\":\"2025-02-20T15:00:00+00:00\",\"dateModified\":\"2025-02-20T20:16:41+00:00\",\"description\":\"Learn how to build a ResponsiveImage component for React Native using a Cloudinary SDK to serve optimized images to our users based on their device.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Responsive Image Component in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build a Responsive Image Component in React Native","description":"Learn how to build a ResponsiveImage component for React Native using a Cloudinary SDK to serve optimized images to our users based on their device.","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:\/\/cloudinary.com\/blog\/responsive-image-component-react-native","og_locale":"en_US","og_type":"article","og_title":"Building a Responsive Image Component in React Native","og_description":"Learn how to build a ResponsiveImage component for React Native using a Cloudinary SDK to serve optimized images to our users based on their device.","og_url":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native","og_site_name":"Cloudinary Blog","article_published_time":"2025-02-20T15:00:00+00:00","article_modified_time":"2025-02-20T20:16:41+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native-png?_i=AA","type":"image\/png"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Building a Responsive Image Component in React Native","datePublished":"2025-02-20T15:00:00+00:00","dateModified":"2025-02-20T20:16:41+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native.png?_i=AA","keywords":["Mobile","React","SDK"],"inLanguage":"en-US","copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native","url":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native","name":"How to Build a Responsive Image Component in React Native","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native.png?_i=AA","datePublished":"2025-02-20T15:00:00+00:00","dateModified":"2025-02-20T20:16:41+00:00","description":"Learn how to build a ResponsiveImage component for React Native using a Cloudinary SDK to serve optimized images to our users based on their device.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/responsive-image-component-react-native#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Responsive Image Component in React Native"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1739385424\/Building_a_responsive_image_component_in_React_Native\/Building_a_responsive_image_component_in_React_Native.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=36895"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36895\/revisions"}],"predecessor-version":[{"id":36897,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36895\/revisions\/36897"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/36896"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=36895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=36895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=36895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}