{"id":403,"date":"2024-02-26T12:13:30","date_gmt":"2024-02-26T12:13:30","guid":{"rendered":"https:\/\/blog.200oksolutions.com\/?p=403"},"modified":"2025-12-04T07:44:09","modified_gmt":"2025-12-04T07:44:09","slug":"turbo-native-modules-for-android-resize-image","status":"publish","type":"post","link":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/","title":{"rendered":"Turbo Native Modules for Android &#8211; Resize Image"},"content":{"rendered":"\n<p style=\"font-size:25px\"><strong>Introduction:<\/strong><\/p>\n\n\n\n<p>Native modules allow JavaScript and platform-native code to communicate over the React Native &#8220;bridge&#8221;. Turbo Modules are the next iteration of Native Modules that address the asynchronous and loading problems by lazy loading modules, allowing for faster app startup. Turbo Native Module also provides some advantages:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lazy loading of modules, allowing for faster app startup<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Codegen resolves the type safety concern by generating a JavaScript interface at build time.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li> JSI, a JavaScript interface for native code allows for more efficient communication between native and JavaScript code than the bridge.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Creating a new application for resize image<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> npx react-native init TurboModuleSample &#8211;version 0.72.7<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li> We will create a resize image module using turbo native module.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The resized image will have portrait dimensions if the original image size is portrait. Similarly, if the original image size is landscape, it will produce a landscape image, and if it is square, it will produce a square image.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>How to Create a Turbo Native Module<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Define the JavaScript specification.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Configure the module so that Codegen can generate the scaffolding.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li> Write the native code to finish implementing the module.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Folder Setup:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a folder called <strong>RTNImageResizer<\/strong> at the root level of your app. <strong>RTN<\/strong> stands for <strong>&#8220;React Native&#8221;<\/strong> and is a recommended prefix for React Native modules.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Within <strong>RTNImageResizer<\/strong> folder, Create two subfolders name <strong>js<\/strong> and <strong>android<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"382\" height=\"80\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/image-22.png\" alt=\"\" class=\"wp-image-405\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-22.png 382w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-22-300x63.png 300w\" sizes=\"(max-width: 382px) 100vw, 382px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>JavaScript Specification:<\/strong><\/p>\n\n\n\n<p>There are two requirements the file containing this specification must meet:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The file <strong>must<\/strong> be named Native&lt;MODULE_NAME&gt;, with a .js or .jsx extension when using Flow, or a .ts, or .tsx extension when using TypeScript. Codegen will only look for files matching this pattern.<\/li>\n\n\n\n<li>The file must export a TurboModuleRegistrySpec object. <\/li>\n<\/ol>\n\n\n\n<p>Create a <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/1-Types.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/1-Types.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">types.ts<\/a> to define the types of ImageResizer and create a <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/2-ImageResizer.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/2-ImageResizer.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">ImageResizer.ts<\/a> at <strong>RTNImageResizer\/js.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"779\" height=\"414\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/image-1-1.png\" alt=\"\" class=\"wp-image-406\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-1-1.png 779w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-1-1-300x159.png 300w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-1-1-768x408.png 768w\" sizes=\"(max-width: 779px) 100vw, 779px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/3-NativeImageResizer.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/3-NativeImageResizer.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">NativeImageResizer.ts<\/a> at the beginning of the spec files, the imports are listed.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The TurboModule type, which defines the base interface for all Turbo Native Modules<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The TurboModuleRegistry JavaScript module, which contains functions for loading Turbo Native Modules.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The file contains the interface specification for the Turbo Native Module. In this case, interface define createResizedImage function taken few parameters and return promise of resize image response. interface type <strong>must <\/strong>be named <strong>Spec <\/strong>for a Turbo Native Module.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Finally, we invoke TurboModuleRegistry.get, passing the module&#8217;s name, which will load the Turbo Native Module if it&#8217;s available.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Module Configuration:<\/strong><\/p>\n\n\n\n<p>Create the package.json file in the root of the RTNImageResizer directory. <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/4-Package.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/4-Package.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">package.json<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>The Codegen configuration is specified by the <strong>codegenConfig <\/strong>field. It contains below fields:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>name:<\/strong> The name of the library. By convention, you should add the Spec suffix.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>type:<\/strong> The type of module contained by this package. In this case, it is a Turbo Native Module; thus, the value to use is <strong>modules<\/strong>.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>jsSrcsDir:<\/strong> The relative path to access the js specification that is parsed by <strong>Codegen.<\/strong><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>android.javaPackageName:<\/strong>The package to use in the Java files generated by<strong> Codegen.<\/strong><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Create a <strong>build.gradle<\/strong> file in the <strong>RTNImageResizer\/android folder.<\/strong> <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/5-build-gradle.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/5-build-gradle.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">build.gradle<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>The ReactPackage class<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create an <strong>RTNImageResizer\/android\/src\/main\/java\/com\/rtnimageresizer<\/strong> folder and, inside that folder, create a <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/6-ImageResizerPackage-java.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/6-ImageResizerPackage-java.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">ImageResizerPackage.java<\/a> file.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You need a class that extends the TurboReactPackage interface. To run the <strong>Codegen <\/strong>process.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The package class doesn&#8217;t need to be completely implemented; an empty implementation is sufficient for the application To identify the module as a proper React Native dependency and to generate the scaffolding code.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In order to understand the native classes required for the ViewManager and Native Modules exported by the library, React Native utilizes the ReactPackage interface.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Native Code:<\/strong><\/p>\n\n\n\n<p>The final step in preparing your Turbo Native Module is to create native code to connect the JavaScript side to the native platforms. There are two primary steps needed for this process:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Run <strong>Codegen <\/strong>to see what it generates.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Write your native code, implementing the generated interfaces.<\/li>\n<\/ul>\n\n\n\n<p>Codegen is used by the app to generate the code when developing a React Native app that uses a Turbo Native Module.<\/p>\n\n\n\n<p>When building a TurboModule library, it&#8217;s necessary to refer to the generated code, so it&#8217;s beneficial to see what the app will produce.<\/p>\n\n\n\n<p>In order for it to work, we have to generate code for Android and then write some native code.<\/p>\n\n\n\n<p><strong>Generate the Code &#8211; Android<\/strong><\/p>\n\n\n\n<p>To generate the code for Android, Open terminal and open root of the app path and run the command<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>yarn add .\/RTNImageResizer or npm install .\/RTNImageResizer<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>Note:<\/strong> To run <strong>Codegen<\/strong>, you need to enable the <strong>New Architecture<\/strong> in the Android app. This can be done by opening the <strong>gradle.properties<\/strong> files and by switching the <strong>newArchEnabled<\/strong> property from <strong>false<\/strong> to <strong>true<\/strong>.<\/p>\n\n\n\n<p>Now open your app root android folder in android studio and open its terminal and run the command<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.\/gradlew generateCodegenArtifactsFromSchema<\/strong><\/li>\n<\/ul>\n\n\n\n<p>The generated code is stored in the <strong>TurboModuleSample\/node_modules\/rtn-imageresizer\/android\/build\/generated\/source\/codegen<\/strong> folder and it has this structure:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Write the Native Android Code<\/strong><\/p>\n\n\n\n<p>The native code for the Android side of a Turbo Native Module requires: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To create a <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/7-ImageResizerModule-Java.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/7-ImageResizerModule-Java.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">ImageResizerModule.java <\/a>that implements the module. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To update the <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/8-ImageResizerPackageUpdated-java.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/8-ImageResizerPackageUpdated-java.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">ImageResizerPackage.java<\/a> created in the previous step. It defines the TurboReactPackage object that will be used by the app to load the module.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, let\u2019s create the <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/9-ImageResizer-Java.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/9-ImageResizer-Java.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">ImageResizer.java<\/a> file as helper that define <strong>resizeImage()<\/strong> to resize the image using Bitmap.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"736\" height=\"206\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/image-2-1.png\" alt=\"\" class=\"wp-image-407\" style=\"width:736px;height:auto\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-2-1.png 736w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-2-1-300x84.png 300w\" sizes=\"(max-width: 736px) 100vw, 736px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To add the Turbo Module to your app, go to the root of the project and re-run below command.   \n<ul class=\"wp-block-list\">\n<li><strong>yarn add .\/RTNImageResizer <\/strong>or<strong> npm install .\/RTNImageResizer<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Let&#8217;s use RTNImageResizer module in our app <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/10-App-tsx.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/10-App-tsx.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">App.tsx<\/a><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>createResizedImage function takes object to resize the image.<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>uri: string,<\/strong> accepts react-native-vision-camera, @react-native-camera-roll\/camera-roll etc output `path` or https `uri`.<\/li>\n\n\n\n<li><strong>width: number,<\/strong> Width to resize<\/li>\n\n\n\n<li><strong>height:<\/strong> number, Height to resize<\/li>\n\n\n\n<li><strong>format: &#8216;PNG&#8217; | &#8216;JPEG&#8217; | &#8216;WEBP&#8217;,<\/strong> Can be either JPEG, PNG or WEBP (android only).<\/li>\n\n\n\n<li><strong>quality: number,<\/strong> A number between 0 and 100. Used for the JPEG compression.<\/li>\n\n\n\n<li><strong>rotation: number,<\/strong> Rotation to apply to the image, in degrees, for android. On iOS, rotation is limited (and                      rounded) to multiples of 90 degrees.<\/li>\n\n\n\n<li><strong>outputPath?: string,<\/strong> The resized image path. If null, resized image will be stored in cache folder. To set outputPath make sure to add option for rotation too (if no rotation is needed, just set it to 0).<\/li>\n\n\n\n<li><strong>keepMeta: boolean,<\/strong> if true, will attempt to preserve all file metadata\/exif info, except the orientation value since the resizing also does rotation correction to the original image. Defaults to false, which means all metadata is lost. Note: This can only be true for JPEG images which are loaded from the file system (not Web).<\/li>\n\n\n\n<li><strong>options?: <\/strong>{  <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong> <\/strong>                             mode: &#8216;contain&#8217; | &#8216;cover&#8217; | &#8216;stretch&#8217;;  <\/p>\n\n\n\n<p>                              onlyScaleDown?: boolean <\/p>\n\n\n\n<p>                   } <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>mode:<\/strong> Similar to react-native Image&#8217;s resizeMode: either contain (the default), cover, or stretch. contain will fit the image within width and height, preserving its ratio. cover preserves the aspect ratio and makes sure the image is at least width wide or height tall. stretch will resize the image to exactly width and height.x<\/li>\n\n\n\n<li><strong>onlyScaleDown: <\/strong>If true, will never enlarge the image, and will only make it smaller.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Portrait image:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"731\" height=\"235\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/image-3-1.png\" alt=\"\" class=\"wp-image-408\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-3-1.png 731w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-3-1-300x96.png 300w\" sizes=\"(max-width: 731px) 100vw, 731px\" \/><\/figure>\n\n\n\n<p><strong>Landscape Image:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"227\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/image-4-1.png\" alt=\"\" class=\"wp-image-409\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-4-1.png 729w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-4-1-300x93.png 300w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/figure>\n\n\n\n<p><strong>Square Image:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"233\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/image-5-1.png\" alt=\"\" class=\"wp-image-410\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-5-1.png 729w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-5-1-300x96.png 300w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"233\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/image-6-1.png\" alt=\"\" class=\"wp-image-411\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-6-1.png 730w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-6-1-300x96.png 300w\" sizes=\"(max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"493\" height=\"1024\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/02\/image-7-1-493x1024.png\" alt=\"\" class=\"wp-image-412\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-1-493x1024.png 493w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-1-144x300.png 144w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/image-7-1.png 602w\" sizes=\"(max-width: 493px) 100vw, 493px\" \/><\/figure>\n\n\n\n<p><strong>Learn More: <\/strong><\/p>\n\n\n\n<p>Turbo Native Module: <a href=\"https:\/\/reactnative.dev\/docs\/0.72\/the-new-architecture\/pillars-turbomodules\" data-type=\"link\" data-id=\"https:\/\/reactnative.dev\/docs\/0.72\/the-new-architecture\/pillars-turbomodules\" target=\"_blank\" rel=\"noreferrer noopener\">Turbo Native Module Link<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: Native modules allow JavaScript and platform-native code to communicate over the React Native &#8220;bridge&#8221;. Turbo Modules&hellip;<\/p>\n","protected":false},"author":5,"featured_media":604,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,47],"tags":[14,48,76],"class_list":["post-403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-react-native","tag-react-native","tag-react-native-development","tag-resize_image"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Turbo Native Modules for Android - Resize Image Web Development, Software, and App Blog | 200OK Solutions<\/title>\n<meta name=\"description\" content=\"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.\" \/>\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.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Turbo Native Modules for Android - Resize Image Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"og:description\" content=\"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-26T12:13:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T07:44:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/turbo-native-module-resize-image-react-native.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"422\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Piyush Solanki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Piyush Solanki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Turbo Native Modules for Android - Resize Image Web Development, Software, and App Blog | 200OK Solutions","description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","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.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/","og_locale":"en_US","og_type":"article","og_title":"Turbo Native Modules for Android - Resize Image Web Development, Software, and App Blog | 200OK Solutions","og_description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","og_url":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/","og_site_name":"Web Development, Software, and App Blog | 200OK Solutions","article_published_time":"2024-02-26T12:13:30+00:00","article_modified_time":"2025-12-04T07:44:09+00:00","og_image":[{"width":728,"height":422,"url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/turbo-native-module-resize-image-react-native.webp","type":"image\/webp"}],"author":"Piyush Solanki","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Piyush Solanki","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/#article","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/"},"author":{"name":"Piyush Solanki","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e"},"headline":"Turbo Native Modules for Android &#8211; Resize Image","datePublished":"2024-02-26T12:13:30+00:00","dateModified":"2025-12-04T07:44:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/"},"wordCount":1192,"commentCount":0,"publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/turbo-native-module-resize-image-react-native.webp","keywords":["react native","react native development","Resize Image"],"articleSection":["Mobile","React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/","url":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/","name":"Turbo Native Modules for Android - Resize Image Web Development, Software, and App Blog | 200OK Solutions","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/#primaryimage"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/turbo-native-module-resize-image-react-native.webp","datePublished":"2024-02-26T12:13:30+00:00","dateModified":"2025-12-04T07:44:09+00:00","description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","breadcrumb":{"@id":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/#primaryimage","url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/turbo-native-module-resize-image-react-native.webp","contentUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/02\/turbo-native-module-resize-image-react-native.webp","width":728,"height":422},{"@type":"BreadcrumbList","@id":"https:\/\/www.200oksolutions.com\/blog\/turbo-native-modules-for-android-resize-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.200oksolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Turbo Native Modules for Android &#8211; Resize Image"}]},{"@type":"WebSite","@id":"https:\/\/www.200oksolutions.com\/blog\/#website","url":"https:\/\/www.200oksolutions.com\/blog\/","name":"Web Development, Software, and App Blog | 200OK Solutions","description":"","publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.200oksolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.200oksolutions.com\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/www.200oksolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","contentUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/200ok_solutions\/"]},{"@type":"Person","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e","name":"Piyush Solanki","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","caption":"Piyush Solanki"},"description":"Piyush is a seasoned PHP Tech Lead with 10+ years of experience architecting and delivering scalable web and mobile backend solutions for global brands and fast-growing SMEs. He specializes in PHP, MySQL, CodeIgniter, WordPress, and custom API development, helping businesses modernize legacy systems and launch secure, high-performance digital products. He collaborates closely with mobile teams building Android &amp; iOS apps , developing RESTful APIs, cloud integrations, and secure payment systems using platforms like Stripe, AWS S3, and OTP\/SMS gateways. His work extends across CMS customization, microservices-ready backend architectures, and smooth product deployments across Linux and cloud-based environments. Piyush also has a strong understanding of modern front-end technologies such as React and TypeScript, enabling him to contribute to full-stack development workflows and advanced admin panels. With a successful delivery track record in the UK market and experience building digital products for sectors like finance, hospitality, retail, consulting, and food services, Piyush is passionate about helping SMEs scale technology teams, improve operational efficiency, and accelerate innovation through backend excellence and digital tools.","url":"https:\/\/www.200oksolutions.com\/blog\/author\/piyush\/"}]}},"_links":{"self":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=403"}],"version-history":[{"count":9,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/403\/revisions"}],"predecessor-version":[{"id":433,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/403\/revisions\/433"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media\/604"}],"wp:attachment":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}