{"id":6273,"date":"2023-05-24T12:00:00","date_gmt":"2023-05-24T12:00:00","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=6273"},"modified":"2026-07-13T11:31:12","modified_gmt":"2026-07-13T11:31:12","slug":"concept-of-storybook-in-react-native","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/","title":{"rendered":"Concept Of Storybook In React Native"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Would you prefer a design system tool that expedites developers&#8217; work while also significantly enhancing team communication? The answer is a storybook.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The powerful tool allows <\/span>React native developers<span style=\"font-weight: 400;\"> to independently design components that operate outside the main app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At DianApps, we use a design system based on React Native, and Storybook is one of the tools we use to implement the <a href=\"https:\/\/www.droitui.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system tool<\/a> in <\/span>React Native app development<span style=\"font-weight: 400;\">. Coherent design is a essential component of branding, and Storybook in React Native provides a basis to do so, saving you time, cutting down on mistakes &amp; costs, and increasing satisfaction with code.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Check out this guide to ascertain the <\/span><a href=\"https:\/\/dianapps.com\/blog\/complete-guide-to-react-native-app-development-cost\/\"><span style=\"font-weight: 400;\">cost of React Native App development<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Continue reading for more information on Storybook in React Native, including setup and benefits.<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">Concept of Storybook<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">In the words of Storybook itself, &#8220;Storybook is a tool for UI development. When we segregate components, it speeds up and simplifies the process of mobile app development. By isolating components, it speeds up and simplifies <\/span>mobile app development<span style=\"font-weight: 400;\">. This enables you to focus on one element at a time.<\/span><\/p>\n<p>This lets you focus on a single element at a time. Without having to launch a complicated development stack, force specific data into your database, or use your application&#8217;s navigational features, you may create entire UIs.<\/p>\n<p><span style=\"font-weight: 400;\">The open-source application, which is designed for React Native, React, Vue, Angular, Web Components, Ember, HTML, Mithril, Marko, Svelte, Riot, Preact, and Rax, accelerates UI development, testing, and documentation. It is feasible to create edge cases and challenging states by providing a sandpit where interfaces can be developed independently of data, APIs, or business logic.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Benefits of using Storybook<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Storybook is a powerful tool that\u2019s quick to install. Other substantial benefits include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The simple installation of Storybook makes it a strong tool. Along with these other important advantages:<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Quick access to all components &#8211; without having to worry about business logic, access any component and browse through its states.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Increased chance of discovering all edge cases.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Component exchange and reuse made easy.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Better code quality since you create components independently of business logic and may pay more attention on reusability and code quality.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Advanced documentation.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Should you use Storybook in every new project?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Yes!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When a project has a large library of components but does not use Storybook, it may cause <\/span><a href=\"https:\/\/dianapps.com\/mobile-app-development\"><b>mobile app developers<\/b><\/a><span style=\"font-weight: 400;\">,especially those who are new to the project or returning, to spend more time than necessary looking for particular components.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It doesn&#8217;t take a lot of time or resources to develop a fresh story. Stories are quick, simple, and have several advantages when using personalized emmet shortcuts. You only need to build and test components after adding the story to a pre-existing development cycle.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Setup<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that we&#8217;ve explained what a storybook and stories are, as well as their benefits, it&#8217;s time to get a little more technical. Let&#8217;s go to setup and a demonstration.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Installation:<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The first step is to install Storybook for React Native by running the following command in your project directory:<\/span><\/p>\n<p><strong>npm install @storybook\/react-native &#8211;save-dev<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">This will install the required dependencies for Storybook.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Updating AppRegistry:<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To run Storybook in the place of our application, we need to update the AppRegistry with Storybook&#8217;s configuration.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Create a new file called storybook.js in the root directory of your project, and add the following code:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">import { getStorybookUI, configure } from &#8216;@storybook\/react-native&#8217;;<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">\/\/ import stories\r\n\r\nconfigure(() =&gt; {\r\n\r\n\u00a0\u00a0require('.\/path\/to\/your\/stories');\r\n\r\n}, module);\r\n\r\n\/\/ create Storybook UI\r\n\r\nconst StorybookUIRoot = getStorybookUI({});\r\n\r\nexport default StorybookUIRoot;<\/pre>\n<p><span style=\"font-weight: 400;\">In this file, we import the getStorybookUI and configure functions from @storybook\/react-native, and use them to load our stories and create the Storybook UI.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, proceed by updating the AppRegistry to utilize Storybook instead of your application. In your index.js file, replace the current AppRegistry.registerComponent call with the following code:<\/span><\/p>\n<pre class=\"font-size:14 height-set:true nums:false lang:default decode:true\">import { AppRegistry } from 'react-native';\r\n\r\nimport StorybookUIRoot from '.\/storybook';\r\n\r\nAppRegistry.registerComponent('%APP_NAME%', () =&gt; StorybookUIRoot);<\/pre>\n<p><span style=\"font-weight: 400;\">This will register Storybook as the root component for our application.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Running the application:<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To run the application with Storybook, we need to open three terminal tabs:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the first tab, start the React Native packager by running \u2018npm start\u2019.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the second tab, start the Storybook server by \u2018running npm run storybook\u2019.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Now, you can start the application by running \u2018react-native run-android\u2019, or \u2018react-native run-ios\u2019 in the third tab. However, it depends on the platform you use. <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Once the application is running, you can open Storybook by navigating to \u2018http:\/\/localhost:7007\u2019 in your browser.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That&#8217;s it! You should now have Storybook running in your React Native application, and be able to view and develop your components in isolation.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7812 size-full aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/StorybookInReactNativeGiphy.gif\" alt=\"\" width=\"334\" height=\"514\" \/><\/p>\n<h2><span style=\"font-weight: 400;\">Setup React Native with Storybook<\/span><\/h2>\n<h2><span style=\"font-weight: 400;\">Demo &#8211; How to create a simple story in Storybook for a React Native component<\/span><\/h2>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create a new file in your project directory called <\/span><b>\u2018Button.stories.js\u2019<\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Import <\/span><b>\u2018storiesOf\u2019 <\/b><span style=\"font-weight: 400;\">and \u2018action\u2019 from \u2018<\/span><b>@storybook\/react-native\u2019<\/b><span style=\"font-weight: 400;\"> and the <\/span><b>\u2018Button\u2019 <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">component you want to create a story for.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use <\/span><b>\u2018storiesOf\u2019 <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">to create a new story for your component.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add a <\/span><b>\u2018title\u2019 <\/b><span style=\"font-weight: 400;\">and a <\/span><b>\u2018component\u2019 <\/b><span style=\"font-weight: 400;\">property to your story object, where the <\/span><b>\u2018component\u2019 <\/b><span style=\"font-weight: 400;\">property is set to the imported <\/span><b>\u2018Button\u2019 <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">component.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add one or more <\/span><b>\u2018stories\u2019 <\/b><span style=\"font-weight: 400;\">to your story object, each with a unique name and a <\/span><b>\u2018render\u2019 <\/b><span style=\"font-weight: 400;\">function that returns the <\/span><b>\u2018Button\u2019 <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">component with some props.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the <\/span><b>\u2018render\u2019 <\/b><span style=\"font-weight: 400;\">function, use the <\/span><b>\u2018action\u2019 <\/b><span style=\"font-weight: 400;\">function to log some text when the button is pressed.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Here&#8217;s an example <\/span><b>\u2018Button.stories.js\u2019<\/b><span style=\"font-weight: 400;\"> file:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">import React from 'react';\r\n\r\nimport { storiesOf } from '@storybook\/react-native';\r\n\r\nimport { action } from '@storybook\/addon-actions';\r\n\r\nimport Button from '.\/Button';\r\n\r\nstoriesOf('Button', module)\r\n\r\n\u00a0\u00a0.add('default', () =&gt; (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;Button onPress={action('clicked')} title=\"Click me!\" \/&gt;\r\n\r\n\u00a0\u00a0))\r\n\r\n\u00a0\u00a0.add('with custom color', () =&gt; (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;Button onPress={action('clicked')} title=\"Click me!\" color=\"#ff0000\" \/&gt;\r\n\r\n\u00a0\u00a0));<\/pre>\n<p><span style=\"font-weight: 400;\">In this example, we&#8217;re building two storylines for the Button component, one with the pre-set props and one with a unique color. Every story has a different name, and it also contains a render function that returns the Button component along with certain props. Whenever the button is pressed, we also log some text using the action function.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Running the Storybook server using npm run storybook and going to http:\/\/localhost:7007 in your browser will allow you to view your stories in Storybook. A list of your stories should appear, and you should be able to interact with them and view the action function logs.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Summary<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">With this being said, your React Native projects will benefit immensely from using Storybook, a potent UI development tool. Storybook can enhance code quality and ultimately save time by simplifying testing, documentation, and knowledge-sharing. You have a higher chance of identifying edge cases and improving the user experience if you have access to all components without having to worry about business logic.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Being a top-notch <\/span><a href=\"https:\/\/dianapps.com\/react-native-app-development\"><b>React Native App development company<\/b><\/a><span style=\"font-weight: 400;\">, DianApps can help you smoothly integrate Storybook into your upcoming project. Our experienced team of React Native developers excels in utilizing Storybook and its add-ons to enhance your product and streamline the development process. Contact us today to explore how Storybook can contribute to the success of your React Native project.<br \/>\n<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Would you prefer a design system tool that expedites developers&#8217; work while also significantly enhancing team communication? The answer is a storybook. The powerful tool allows React native developers to independently design components that operate outside the main app. At DianApps, we use a design system based on React Native, and Storybook is one of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6275,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_meta-robots-noindex":"","_yoast_wpseo_meta-robots-nofollow":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-title":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-title":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[104,56,264],"class_list":["post-6273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-react-native","tag-react-native-app-development","tag-storybook-in-react-native"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73-1140x445.png",1140,445,true],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73-463x348.png",463,348,true],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73-300x169.png",300,169,true],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73.png",1536,864,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Concept Of Storybook In React Native<\/title>\n<meta name=\"description\" content=\"Learn about Storybook, a React Native UI development environment that enables the creation, testing, and showcasing of components separately.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Concept Of Storybook In React Native\" \/>\n<meta property=\"og:description\" content=\"Learn about Storybook, a React Native UI development environment that enables the creation, testing, and showcasing of components separately.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-24T12:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-13T11:31:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"864\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Concept Of Storybook In React Native","description":"Learn about Storybook, a React Native UI development environment that enables the creation, testing, and showcasing of components separately.","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:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Concept Of Storybook In React Native","og_description":"Learn about Storybook, a React Native UI development environment that enables the creation, testing, and showcasing of components separately.","og_url":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2023-05-24T12:00:00+00:00","article_modified_time":"2026-07-13T11:31:12+00:00","og_image":[{"width":1536,"height":864,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/#article","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/"},"author":{"name":"Vikash Soni","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"headline":"Concept Of Storybook In React Native","datePublished":"2023-05-24T12:00:00+00:00","dateModified":"2026-07-13T11:31:12+00:00","mainEntityOfPage":{"@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/"},"wordCount":1113,"commentCount":0,"image":{"@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73.png","keywords":["React Native","react native app development","Storybook In React Native"],"articleSection":["App Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/","url":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/","name":"Concept Of Storybook In React Native","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/#primaryimage"},"image":{"@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73.png","datePublished":"2023-05-24T12:00:00+00:00","dateModified":"2026-07-13T11:31:12+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"Learn about Storybook, a React Native UI development environment that enables the creation, testing, and showcasing of components separately.","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/#primaryimage","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73.png","width":1536,"height":864,"caption":"Concept Of Storybook In React Native"},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Concept Of Storybook In React Native"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2026\/08\/vikash-soni-400-96x96.jpg","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2026\/08\/vikash-soni-400-96x96.jpg","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2026\/08\/vikash-soni-400-96x96.jpg","caption":"Vikash Soni"},"description":"Vikash Soni (CTO &amp; Co-founder, DianApps) leads engineering at DianApps, where he has spent over 10 years building AI and machine learning systems, alongside earlier work in AR\/VR and blockchain. He has delivered 250+ AI and machine learning systems across various industries, e.g. healthcare, fintech, and retail. His work centers on the parts of AI development that decide whether a project ships: retrieval architecture, evaluation design, and the data preparation most teams underestimate. He advises founders and enterprise technology leaders on where AI genuinely fits a problem, and where a simpler system would serve better.","sameAs":["https:\/\/dianapps.com\/","https:\/\/www.instagram.com\/_ai_4everyone","https:\/\/www.linkedin.com\/in\/reachvikashsoni\/"],"url":"https:\/\/dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/6273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=6273"}],"version-history":[{"count":10,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/6273\/revisions"}],"predecessor-version":[{"id":19348,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/6273\/revisions\/19348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/6275"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=6273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=6273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=6273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}