<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>goloris - Proven Tips &amp; Trends by Goloris</title>
	<atom:link href="https://blog.goloris.com/author/goloris/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.goloris.com</link>
	<description>Build smarter apps with no-code and AI. Proven tips, trends, and expert insights from Goloris to empower your next project.</description>
	<lastBuildDate>Thu, 25 Sep 2025 16:58:14 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.2</generator>

<image>
	<url>https://blog.goloris.com/wp-content/uploads/2025/08/android-chrome-512x512-1-90x90.png</url>
	<title>goloris - Proven Tips &amp; Trends by Goloris</title>
	<link>https://blog.goloris.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>AI Powered Content Creation for Your Mobile Application</title>
		<link>https://blog.goloris.com/ai-powered-content-generation-for-mobile-e-commerce-apps/</link>
					<comments>https://blog.goloris.com/ai-powered-content-generation-for-mobile-e-commerce-apps/#respond</comments>
		
		<dc:creator><![CDATA[goloris]]></dc:creator>
		<pubDate>Thu, 25 Sep 2025 16:44:58 +0000</pubDate>
				<category><![CDATA[E-Commerce]]></category>
		<category><![CDATA[Mobile Application Development]]></category>
		<category><![CDATA[Mobile Applications]]></category>
		<category><![CDATA[No Code App Builder]]></category>
		<guid isPermaLink="false">https://blog.goloris.com/?p=3504</guid>

					<description><![CDATA[<p>How Local Businesses Can Compete with Big Brands Without Costly Photoshoots High-quality e-commerce product images are the foundation of every successful online store. Customers [&#8230;]</p>
<p>The post <a href="https://blog.goloris.com/ai-powered-content-generation-for-mobile-e-commerce-apps/">AI Powered Content Creation for Your Mobile Application</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></description>
										<content:encoded><![CDATA[<h2 class="wp-block-heading">How Local Businesses Can Compete with Big Brands Without Costly Photoshoots</h2>



<p>High-quality <strong>e-commerce product images</strong> are the foundation of every successful online store. Customers don’t just purchase clothing, they buy how it looks, how it feels, and how it fits into their lifestyle. But for <strong>local retailers and small businesses</strong>, producing professional product photos with models can be expensive and time-consuming. What if you could instantly dress your clothes on the models you want and take photos just like this:</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="747" height="1024" data-id="3516" src="https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_2-747x1024.png" alt="" class="wp-image-3516" srcset="https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_2-747x1024.png 747w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_2-219x300.png 219w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_2-768x1052.png 768w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_2-196x268.png 196w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_2.png 864w" sizes="(max-width: 747px) 100vw, 747px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="747" height="1024" data-id="3517" src="https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo-747x1024.png" alt="" class="wp-image-3517" srcset="https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo-747x1024.png 747w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo-219x300.png 219w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo-768x1052.png 768w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo-196x268.png 196w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo.png 864w" sizes="(max-width: 747px) 100vw, 747px" /></figure>
</figure>



<p>At <strong>Goloris</strong>, we’ve developed a breakthrough solution for mobile commerce: an <strong>AI-powered virtual photoshoot system</strong>. This innovative feature lets you upload your clothing and instantly generate images of professional models wearing your designs without ever booking a photographer. </p>



<h2 class="wp-block-heading">Why Product Photos Matter for Mobile E-Commerce</h2>



<p>In today’s <strong>mobile-first shopping era</strong>, visual content drives trust and conversion. Studies show that shoppers are more likely to purchase when they can see products on real models. Flat images, poorly lit photos, or inconsistent visuals often reduce customer confidence.</p>



<p>That’s why big brands invest millions in studio shoots, stylists, and professional models. But what if your boutique or local shop could achieve the same effect with just a few clicks?</p>



<h2 class="wp-block-heading">The Goloris Advantage: AI-Powered Virtual Models</h2>



<p>With <strong>Goloris e-commerce app builder</strong>, businesses can:</p>



<ul class="wp-block-list">
<li><strong>Cut Costs:</strong> No more expensive studio sessions or photoshoot logistics.</li>



<li><strong>Accelerate Time-to-Market:</strong> Upload a clothing image and see it styled on a model in minutes.</li>



<li><strong>Ensure Consistency:</strong> All catalog items appear professional and polished.</li>



<li><strong>Scale Effortlessly:</strong> Add unlimited products to your mobile store without scaling costs.</li>
</ul>



<p>This means your <strong>mobile e-commerce application</strong> can compete head-to-head with global retailers, even if you’re running a small local business.</p>



<h2 class="wp-block-heading">Your Products on Professional Photoshoots</h2>



<p>Take a look at the images generated using Goloris specifically for your products. You just upload your product&#8217;s image and we will handle the rest.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img decoding="async" width="683" height="1024" data-id="3510" src="https://blog.goloris.com/wp-content/uploads/2025/09/ghost-dekupe-hayalet-fotograf-cekimi_0007_Layer-17-683x1024.jpg" alt="" class="wp-image-3510" srcset="https://blog.goloris.com/wp-content/uploads/2025/09/ghost-dekupe-hayalet-fotograf-cekimi_0007_Layer-17-683x1024.jpg 683w, https://blog.goloris.com/wp-content/uploads/2025/09/ghost-dekupe-hayalet-fotograf-cekimi_0007_Layer-17-200x300.jpg 200w, https://blog.goloris.com/wp-content/uploads/2025/09/ghost-dekupe-hayalet-fotograf-cekimi_0007_Layer-17-768x1152.jpg 768w, https://blog.goloris.com/wp-content/uploads/2025/09/ghost-dekupe-hayalet-fotograf-cekimi_0007_Layer-17-1024x1536.jpg 1024w, https://blog.goloris.com/wp-content/uploads/2025/09/ghost-dekupe-hayalet-fotograf-cekimi_0007_Layer-17-179x268.jpg 179w, https://blog.goloris.com/wp-content/uploads/2025/09/ghost-dekupe-hayalet-fotograf-cekimi_0007_Layer-17-1120x1680.jpg 1120w, https://blog.goloris.com/wp-content/uploads/2025/09/ghost-dekupe-hayalet-fotograf-cekimi_0007_Layer-17.jpg 1200w" sizes="(max-width: 683px) 100vw, 683px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="683" height="1024" data-id="3511" src="https://blog.goloris.com/wp-content/uploads/2025/09/cetinkaya-fithit-35081-kadin-uzun-kol-14d-97-683x1024.webp" alt="" class="wp-image-3511" srcset="https://blog.goloris.com/wp-content/uploads/2025/09/cetinkaya-fithit-35081-kadin-uzun-kol-14d-97-683x1024.webp 683w, https://blog.goloris.com/wp-content/uploads/2025/09/cetinkaya-fithit-35081-kadin-uzun-kol-14d-97-200x300.webp 200w, https://blog.goloris.com/wp-content/uploads/2025/09/cetinkaya-fithit-35081-kadin-uzun-kol-14d-97-768x1152.webp 768w, https://blog.goloris.com/wp-content/uploads/2025/09/cetinkaya-fithit-35081-kadin-uzun-kol-14d-97-1024x1536.webp 1024w, https://blog.goloris.com/wp-content/uploads/2025/09/cetinkaya-fithit-35081-kadin-uzun-kol-14d-97-1366x2048.webp 1366w, https://blog.goloris.com/wp-content/uploads/2025/09/cetinkaya-fithit-35081-kadin-uzun-kol-14d-97-179x268.webp 179w, https://blog.goloris.com/wp-content/uploads/2025/09/cetinkaya-fithit-35081-kadin-uzun-kol-14d-97-1120x1679.webp 1120w, https://blog.goloris.com/wp-content/uploads/2025/09/cetinkaya-fithit-35081-kadin-uzun-kol-14d-97-scaled.webp 1707w" sizes="(max-width: 683px) 100vw, 683px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="683" height="1024" data-id="3512" src="https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_1-683x1024.png" alt="" class="wp-image-3512" srcset="https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_1-683x1024.png 683w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_1-200x300.png 200w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_1-768x1152.png 768w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_1-179x268.png 179w, https://blog.goloris.com/wp-content/uploads/2025/09/woman_with_logo_1.png 832w" sizes="(max-width: 683px) 100vw, 683px" /></figure>
</figure>



<h2 class="wp-block-heading">Transform Your Product Catalog into Runway-Ready Visuals</h2>



<p>Here’s how it works:</p>



<ol class="wp-block-list">
<li>Upload a picture of your clothing into your <strong>Goloris-powered app</strong>.</li>



<li>Our AI system automatically renders the clothing onto a professional model.</li>



<li>Your product catalog updates instantly with polished, engaging visuals.</li>
</ol>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="761" height="1000" data-id="3513" src="https://blog.goloris.com/wp-content/uploads/2025/09/unnamed.jpg" alt="" class="wp-image-3513" srcset="https://blog.goloris.com/wp-content/uploads/2025/09/unnamed.jpg 761w, https://blog.goloris.com/wp-content/uploads/2025/09/unnamed-228x300.jpg 228w, https://blog.goloris.com/wp-content/uploads/2025/09/unnamed-204x268.jpg 204w" sizes="(max-width: 761px) 100vw, 761px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="671" height="900" data-id="3514" src="https://blog.goloris.com/wp-content/uploads/2025/09/lifestyle-fashion-people-concept-full-body-young-fashion-woman-model-posing-studio-84449047.webp" alt="" class="wp-image-3514" srcset="https://blog.goloris.com/wp-content/uploads/2025/09/lifestyle-fashion-people-concept-full-body-young-fashion-woman-model-posing-studio-84449047.webp 671w, https://blog.goloris.com/wp-content/uploads/2025/09/lifestyle-fashion-people-concept-full-body-young-fashion-woman-model-posing-studio-84449047-224x300.webp 224w, https://blog.goloris.com/wp-content/uploads/2025/09/lifestyle-fashion-people-concept-full-body-young-fashion-woman-model-posing-studio-84449047-200x268.webp 200w" sizes="(max-width: 671px) 100vw, 671px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="747" height="1024" data-id="3515" src="https://blog.goloris.com/wp-content/uploads/2025/09/Gemini_Generated_Image_rfpqoqrfpqoqrfpq-747x1024.png" alt="" class="wp-image-3515" srcset="https://blog.goloris.com/wp-content/uploads/2025/09/Gemini_Generated_Image_rfpqoqrfpqoqrfpq-747x1024.png 747w, https://blog.goloris.com/wp-content/uploads/2025/09/Gemini_Generated_Image_rfpqoqrfpqoqrfpq-219x300.png 219w, https://blog.goloris.com/wp-content/uploads/2025/09/Gemini_Generated_Image_rfpqoqrfpqoqrfpq-768x1052.png 768w, https://blog.goloris.com/wp-content/uploads/2025/09/Gemini_Generated_Image_rfpqoqrfpqoqrfpq-196x268.png 196w, https://blog.goloris.com/wp-content/uploads/2025/09/Gemini_Generated_Image_rfpqoqrfpqoqrfpq.png 864w" sizes="(max-width: 747px) 100vw, 747px" /></figure>
</figure>



<p>This creates a richer shopping experience, builds customer trust, and ultimately <strong>increases conversions and sales</strong>.</p>



<h2 class="wp-block-heading">The Future of E-Commerce Content Creation</h2>



<p>The rise of <strong>AI in e-commerce</strong> is transforming how brands create content. From clothing to accessories and full outfit coordination, the opportunities are endless. Local businesses that adopt AI-powered product photography now will gain a <strong>competitive advantage</strong> in the mobile marketplace.</p>



<p>At <strong>Goloris</strong>, we’re on a mission to democratize mobile app creation and content generation for small businesses. Our platform combines <strong>no-code app building</strong> with <strong>AI-driven visual content</strong>, empowering you to focus on customers while we handle the technology.</p>



<h2 class="wp-block-heading">Ready to Upgrade Your E-Commerce Store?</h2>



<p>If you’re ready to showcase your products like never before, Goloris is here to help.</p>



<div class="wp-block-buttons has-background is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex" style="background:linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)">
<div class="wp-block-button has-custom-width wp-block-button__width-50" id="goloris"><a class="wp-block-button__link wp-element-button">Visit Goloris And Create Your First Content</a></div>
</div>



<p></p><p>The post <a href="https://blog.goloris.com/ai-powered-content-generation-for-mobile-e-commerce-apps/">AI Powered Content Creation for Your Mobile Application</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://blog.goloris.com/ai-powered-content-generation-for-mobile-e-commerce-apps/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Google Stitch: A New Era Of Designing Your UI</title>
		<link>https://blog.goloris.com/google-stitch-a-new-era-of-designing-your-ui/</link>
					<comments>https://blog.goloris.com/google-stitch-a-new-era-of-designing-your-ui/#respond</comments>
		
		<dc:creator><![CDATA[goloris]]></dc:creator>
		<pubDate>Sun, 07 Sep 2025 16:37:00 +0000</pubDate>
				<category><![CDATA[Mobile Applications]]></category>
		<guid isPermaLink="false">https://blog.goloris.com/?p=3495</guid>

					<description><![CDATA[<p>Designing user interfaces has always been a balancing act between creativity and execution. Google Stitch aims to eliminate this friction by transforming prompts and [&#8230;]</p>
<p>The post <a href="https://blog.goloris.com/google-stitch-a-new-era-of-designing-your-ui/">Google Stitch: A New Era Of Designing Your UI</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="305" src="https://blog.goloris.com/wp-content/uploads/2025/09/stitch-google-io-banner.original-1024x305.png" alt="Google Stitch" class="wp-image-3496" srcset="https://blog.goloris.com/wp-content/uploads/2025/09/stitch-google-io-banner.original-1024x305.png 1024w, https://blog.goloris.com/wp-content/uploads/2025/09/stitch-google-io-banner.original-300x89.png 300w, https://blog.goloris.com/wp-content/uploads/2025/09/stitch-google-io-banner.original-768x228.png 768w, https://blog.goloris.com/wp-content/uploads/2025/09/stitch-google-io-banner.original-1536x457.png 1536w, https://blog.goloris.com/wp-content/uploads/2025/09/stitch-google-io-banner.original-400x119.png 400w, https://blog.goloris.com/wp-content/uploads/2025/09/stitch-google-io-banner.original-1120x333.png 1120w, https://blog.goloris.com/wp-content/uploads/2025/09/stitch-google-io-banner.original.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Designing user interfaces has always been a balancing act between creativity and execution. Google Stitch aims to eliminate this friction by transforming prompts and simple images into functional, polished UI designs and even front-end code in just minutes. This sounds insane and to be honest , it&#8217;s very promising.</p>



<p>If you&#8217;re a designer or developer on the hunt for an AI UI design tool that streamlines your workflow, this post will guide you through how Stitch works, its standout features, and how it stacks up against other tools.</p>



<p>But before we begin, it is better to remind that, tools like<strong> Google Stitch </strong>shine when you need custom UI from scratch. But if your immediate need is a <strong>live, shippable mobile store</strong> with zero marketplace fees, <strong><a href="https://goloris.com">Goloris</a></strong> is the way to go.</p>



<p>Okay that&#8217;s it let&#8217;s take a look at what Google Stitch brings to the table.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">What is Google Stitch?</h2>



<p><strong>Stitch</strong>, introduced at Google I/O 2025, is a new experiment from Google Labs powered by <strong>Gemini 2.5 Pro</strong>. It swiftly generates complex UI designs and export-ready code from plain-text prompts or uploaded wireframes. If you are interested more on this, don&#8217;t forget to check out <a href="https://developers.googleblog.com/en/stitch-a-new-way-to-design-uis" title="Google developers blog">Google developers blog</a> for the original post.</p>



<p>This means fewer design iterations, less tooling overhead, and faster prototypes, perfect for anyone designing <strong>UI with AI</strong>.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Key Features of Google&#8217;s Stitch</h2>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Feature</th><th>Description</th></tr></thead></table></figure>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><strong>Text-to-UI Design</strong></td><td>Describe your UI in plain language—color scheme, layout, buttons—and Stitch generates a refined interface.</td></tr></tbody></table></figure>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><strong>Image-to-UI Conversion</strong></td><td>Upload sketches, wireframes, or screenshots—Stitch interprets them into structured, editable UIs.</td></tr></tbody></table></figure>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><strong>Rapid Iteration</strong></td><td>Generate multiple design variants to explore alternative layouts and styles.</td></tr></tbody></table></figure>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><strong>Direct Figma &amp; Code Export</strong></td><td>Seamlessly paste designs into Figma for refinement or export clean HTML/CSS code. </td></tr></tbody></table></figure>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><strong>Dual AI Modes</strong></td><td><strong>Standard Mode</strong> (Gemini 2.5 Flash) is fast and allows Figma export; <strong>Experimental Mode</strong> (Gemini 2.5 Pro) provides richer designs from wireframes.</td></tr></tbody></table></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Why Google Stitch Stands Out</h2>



<h3 class="wp-block-heading">1. From Sketch to Code — Without the Back-and-Forth</h3>



<p>Traditional UI workflows demand multiple tools: wireframing, designing, and coding. With Stitch, those steps collapse into one streamlined flow from description to front-end. It even handles design intricacies like theme revisions through conversational prompts.</p>



<h3 class="wp-block-heading">2. Preview and Iterate in Seconds</h3>



<p>Instead of waiting hours or days for mockups, Stitch generates high-fidelity UIs in under a minute. You can refine by prompt: “Make it cleaner,” or “Add a bottom nav bar.”</p>



<h3 class="wp-block-heading">3. Push-Button Export to Development</h3>



<p>Whether you&#8217;re a designer or a dev, Stitch bridges the gap. Paste into Figma or grab clean CSS/HTML. It’s a smoother handoff than most traditional UI tools ever provided. </p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Google Stitch vs. Other Tools</h2>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Tool/Approach</th><th>Best For</th><th>Output Type</th><th>Time to Value</th><th>Export/Deploy</th><th>Dev Effort</th></tr></thead></table></figure>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>Figma</td><td>High-fidelity design &amp; collaboration</td><td>Mockups</td><td>Medium</td><td>Plugins/manual handoff</td><td>Medium</td></tr></tbody></table></figure>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>Traditional Coding</td><td>Fully custom UI &amp; complex logic</td><td>Front-end code</td><td>Slow</td><td>Direct to codebase</td><td>High</td></tr></tbody></table></figure>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><strong>Stitch (AI UI Tool)</strong></td><td>Rapid ideation from text/sketch to UI/code</td><td>UI + HTML/CSS</td><td>Fast</td><td>Figma &amp; code export</td><td>Low–Medium</td></tr></tbody></table></figure>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><strong>Goloris (No-Code App Builder)</strong></td><td><strong>Launching a production mobile store</strong> (iOS/Android)</td><td><strong>Ready-to-ship app</strong></td><td><strong>Fastest</strong></td><td>App Store &amp; Google Play (automated)</td><td><strong>Low</strong></td></tr></tbody></table></figure>



<p>While Stitch accelerates UI ideation, <strong data-start="2676" data-end="2712">go-to-market is a different game</strong>. With <strong data-start="2719" data-end="2753"><a data-start="2721" data-end="2751" class="decorated-link" href="https://goloris.com" target="_new" rel="noopener">Goloris<span aria-hidden="true" class="ms-0.5 inline-block align-middle leading-none"><svg width="20" height="20" viewbox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-rtl-flip="" class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]"></svg></span></a></strong>, you connect your Shopify/WooCommerce/OpenCart catalog, set branding, and publish to the stores—<strong>no commissions, no custom builds</strong>. It’s ideal when speed and ownership trump pixel-perfect custom layouts.</p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://goloris.com/">Explore Goloris Now !</a></div>
</div>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Real-World Use Case</h2>



<p>At Google I/O 2025, Stitch was demonstrated generating UI screens from prompts or sketches in real-time cutting down hours of work into just a few minutes.</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="Transform ideas into UI designs with Stitch" width="1170" height="658" src="https://www.youtube.com/embed/q39uczIW_MY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p>Early user tests show promising fidelity: developers and designers find Stitch-generated interfaces surprisingly polished and increasingly iteration-friendly <a href="https://designerup.co/blog/google-stitch-first-look/?utm_source=chatgpt.com" target="_blank" rel="noreferrer noopener"></a></p>



<h2 class="wp-block-heading">Getting Started with Stitch</h2>



<ol class="wp-block-list">
<li>Visit <a href="https://stitch.withgoogle.com/" title="">stitch.withgoogle.com</a> and sign in with your Google account.</li>



<li>Choose between Text or Image mode.</li>



<li>Input your prompt or upload a content sketch.</li>



<li>Generate and review UI options.</li>



<li>Refine as needed, then export to Figma or grab the HTML/CSS.</li>
</ol>



<h2 class="wp-block-heading">Conclusion</h2>



<p>If you&#8217;re searching for an <strong>AI-powered UI design tool</strong> that leaps from concept to code in minutes no plugins, no stitching screens together<strong>Stitch by Google</strong> could be what you&#8217;ve been waiting for. </p>



<p>Design, iterate, export faster and smarter. If you’re browsing tools to speed up UI, but revenue is the priority, ship first with <strong><a href="https://goloris.com">Goloris</a></strong>, iterate your UI later.</p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://goloris.com/">Explore Goloris, You prioritize the revenue, we prioritize you.</a></div>
</div>



<p></p><p>The post <a href="https://blog.goloris.com/google-stitch-a-new-era-of-designing-your-ui/">Google Stitch: A New Era Of Designing Your UI</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://blog.goloris.com/google-stitch-a-new-era-of-designing-your-ui/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Top Reasons For Building Your Own E-Commerce Store</title>
		<link>https://blog.goloris.com/top-reasons-for-building-your-own-e-commerce-store/</link>
					<comments>https://blog.goloris.com/top-reasons-for-building-your-own-e-commerce-store/#respond</comments>
		
		<dc:creator><![CDATA[goloris]]></dc:creator>
		<pubDate>Sun, 31 Aug 2025 13:33:47 +0000</pubDate>
				<category><![CDATA[E-Commerce]]></category>
		<category><![CDATA[Mobile Application Development]]></category>
		<category><![CDATA[Mobile Applications]]></category>
		<category><![CDATA[No Code App Builder]]></category>
		<category><![CDATA[E-Commerce Platform]]></category>
		<category><![CDATA[Free App Builder]]></category>
		<category><![CDATA[Online Profit]]></category>
		<guid isPermaLink="false">https://blog.goloris.com/?p=3474</guid>

					<description><![CDATA[<p>Learn why building your own e-commerce app beats marketplaces. Keep 100% of your profits, boost loyalty, and launch fast with Goloris. Introduction To Building [&#8230;]</p>
<p>The post <a href="https://blog.goloris.com/top-reasons-for-building-your-own-e-commerce-store/">Top Reasons For Building Your Own E-Commerce Store</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="763" src="https://blog.goloris.com/wp-content/uploads/2025/08/blog-banner-1024x763.jpg" alt="" class="wp-image-3489" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/blog-banner-1024x763.jpg 1024w, https://blog.goloris.com/wp-content/uploads/2025/08/blog-banner-300x224.jpg 300w, https://blog.goloris.com/wp-content/uploads/2025/08/blog-banner-768x572.jpg 768w, https://blog.goloris.com/wp-content/uploads/2025/08/blog-banner-360x268.jpg 360w, https://blog.goloris.com/wp-content/uploads/2025/08/blog-banner-1120x835.jpg 1120w, https://blog.goloris.com/wp-content/uploads/2025/08/blog-banner.jpg 1500w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Learn why building your own e-commerce app beats marketplaces. Keep 100% of your profits, boost loyalty, and launch fast with Goloris.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Introduction To Building Your Own E-Commerce App</h2>



<p>Running an online business often feels like an uphill battle. Marketplaces like Amazon, Etsy, and app-based e-commerce platforms charge commissions and fees that eat away at your margins. While these platforms provide visibility, they also limit your control over branding and customer relationships.</p>



<p>The solution? <strong>Commission-free e-commerce with your own store powered by <a href="https://goloris.com" title="">Goloris</a>.</strong> By building and managing your own mobile app store, you can keep every cent of your profit, strengthen your brand identity, and own the customer experience from end to end.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">1. Full Control Over Branding With Building Your Own E-Commerce App</h2>



<p>When you sell on Shopify or Amazon, your store looks like everyone else’s. Customers may not even remember your brand after checkout.</p>



<p>With your own e-commerce app:</p>



<ul class="wp-block-list">
<li>Your <strong>logo and colors</strong> are front and center.</li>



<li>You control the <strong>user journey</strong> from home screen to checkout.</li>



<li>You stand out from competitors instead of being “just another seller.”</li>
</ul>



<figure class="wp-block-video"><video controls src="https://goloris.com/builder.mp4"></video></figure>



<p>This is why more entrepreneurs are seeking <strong>direct-to-consumer (D2C)</strong> solutions where they can sell without middlemen.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">2. Customer Retention Through Push Notifications</h2>



<p>Marketplaces own the customer relationship — they send the emails, not you.</p>



<p>With your own app:</p>



<ul class="wp-block-list">
<li>Send <strong>push notifications</strong> for discounts, restocks, and new arrivals.</li>



<li>Keep your brand in your customers’ pockets.</li>



<li>Build loyalty instead of relying on repeat ad spend.</li>
</ul>



<p>But traditionally, building your own mobile e-commerce app required expensive developers, months of coding, and technical know-how.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">3. Commission-Free Sales</h2>



<p>Here’s the harsh truth: selling on third-party platforms means giving away a slice of your profit.</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Platform</th><th>Avg. Commission</th><th>Monthly Fees</th><th>Ownership of Customer Data</th></tr></thead><tbody><tr><td><strong>Amazon</strong></td><td>8–15% per sale</td><td>None</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/274c.png" alt="❌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> No</td></tr><tr><td><strong>Etsy</strong></td><td>6.5% + listing</td><td>None</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/274c.png" alt="❌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> No</td></tr><tr><td><strong>Shopify</strong></td><td>0–2% per sale</td><td>$29+</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Yes</td></tr><tr><td><strong>Goloris </strong></td><td><strong>0%</strong></td><td>From $0/mo</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Yes</td></tr></tbody></table></figure>



<p></p>



<h2 class="wp-block-heading">4. Scalability and Customization</h2>



<p>Unlike plug-and-play website builders, your own e-commerce app grows with you:</p>



<ul class="wp-block-list">
<li>Add unlimited products.</li>



<li>Integrate payment gateways you choose.</li>



<li>Customize UI/UX for better conversion rates.</li>
</ul>



<p>And because <strong>Goloris</strong> is a no-code platform, you can do all this without hiring developers. You can publish this app under 15 minutes only with simple clicks.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="421" height="850" data-id="3476" src="https://blog.goloris.com/wp-content/uploads/2025/08/1.webp" alt="" class="wp-image-3476" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/1.webp 421w, https://blog.goloris.com/wp-content/uploads/2025/08/1-149x300.webp 149w, https://blog.goloris.com/wp-content/uploads/2025/08/1-133x268.webp 133w" sizes="(max-width: 421px) 100vw, 421px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="421" height="850" data-id="3475" src="https://blog.goloris.com/wp-content/uploads/2025/08/2.webp" alt="" class="wp-image-3475" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/2.webp 421w, https://blog.goloris.com/wp-content/uploads/2025/08/2-149x300.webp 149w, https://blog.goloris.com/wp-content/uploads/2025/08/2-133x268.webp 133w" sizes="(max-width: 421px) 100vw, 421px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="421" height="850" data-id="3477" src="https://blog.goloris.com/wp-content/uploads/2025/08/3.webp" alt="" class="wp-image-3477" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/3.webp 421w, https://blog.goloris.com/wp-content/uploads/2025/08/3-149x300.webp 149w, https://blog.goloris.com/wp-content/uploads/2025/08/3-133x268.webp 133w" sizes="(max-width: 421px) 100vw, 421px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="421" height="850" data-id="3479" src="https://blog.goloris.com/wp-content/uploads/2025/08/4.webp" alt="" class="wp-image-3479" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/4.webp 421w, https://blog.goloris.com/wp-content/uploads/2025/08/4-149x300.webp 149w, https://blog.goloris.com/wp-content/uploads/2025/08/4-133x268.webp 133w" sizes="(max-width: 421px) 100vw, 421px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="421" height="850" data-id="3478" src="https://blog.goloris.com/wp-content/uploads/2025/08/5-Kopya.webp" alt="" class="wp-image-3478" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/5-Kopya.webp 421w, https://blog.goloris.com/wp-content/uploads/2025/08/5-Kopya-149x300.webp 149w, https://blog.goloris.com/wp-content/uploads/2025/08/5-Kopya-133x268.webp 133w" sizes="(max-width: 421px) 100vw, 421px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="421" height="850" data-id="3480" src="https://blog.goloris.com/wp-content/uploads/2025/08/6.webp" alt="" class="wp-image-3480" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/6.webp 421w, https://blog.goloris.com/wp-content/uploads/2025/08/6-149x300.webp 149w, https://blog.goloris.com/wp-content/uploads/2025/08/6-133x268.webp 133w" sizes="(max-width: 421px) 100vw, 421px" /></figure>
</figure>



<h2 class="wp-block-heading">5. How Goloris Simplifies It</h2>



<p>Traditionally, building an app costs $10,000–$50,000 and takes months. With <strong><a href="https://goloris.com" title="">Goloris</a></strong> you can:</p>



<ul class="wp-block-list">
<li>Deploy to <strong>App Store &amp; Google Play in minutes</strong>.</li>
</ul>



<ul class="wp-block-list">
<li>Connect your existing online store.</li>
</ul>



<ul class="wp-block-list">
<li>Sync products automatically.</li>
</ul>



<ul class="wp-block-list">
<li>Customize your app with drag-and-drop tools.</li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Visualizing the Benefits</h2>



<p>Here’s a quick comparison of owning your e-commerce app vs. selling on third-party platforms:</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Feature</th><th>Marketplaces (Amazon/Etsy)</th><th>Shopify</th><th>Your Own App (via Goloris)</th></tr></thead><tbody><tr><td>Commission-Free Sales</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/274c.png" alt="❌" class="wp-smiley" style="height: 1em; max-height: 1em;" /></td><td>Partial</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 100% Yours</td></tr><tr><td>Customer Data Ownership</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/274c.png" alt="❌" class="wp-smiley" style="height: 1em; max-height: 1em;" /></td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /></td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /></td></tr><tr><td>Branding Freedom</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/274c.png" alt="❌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Limited</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /></td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Full Control</td></tr><tr><td>Launch Speed</td><td>Fast</td><td>Fast</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/26a1.png" alt="⚡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Ultra-Fast (No-Code)</td></tr><tr><td>Long-Term Profitability</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/274c.png" alt="❌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Low (Fees Add Up)</td><td>Medium</td><td><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> High (Zero Commission)</td></tr></tbody></table></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Conclusion</h2>



<p>Owning your e-commerce app isn’t just a tech upgrade — it’s a business strategy. You keep <strong>100% of your revenue</strong>, strengthen your brand, and build lasting customer relationships.</p>



<p><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f449.png" alt="👉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Ready to stop paying commissions and start keeping your profits?<br>Check out <a href="https://goloris.com" title=""><strong>Goloris</strong></a></p>



<p></p><p>The post <a href="https://blog.goloris.com/top-reasons-for-building-your-own-e-commerce-store/">Top Reasons For Building Your Own E-Commerce Store</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://blog.goloris.com/top-reasons-for-building-your-own-e-commerce-store/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Build a To-Do App with React Native in 2025 (Beginner’s Guide)</title>
		<link>https://blog.goloris.com/how-to-build-a-to-do-app-with-react-native-in-2025-beginners-guide/</link>
					<comments>https://blog.goloris.com/how-to-build-a-to-do-app-with-react-native-in-2025-beginners-guide/#respond</comments>
		
		<dc:creator><![CDATA[goloris]]></dc:creator>
		<pubDate>Fri, 29 Aug 2025 23:32:44 +0000</pubDate>
				<category><![CDATA[Mobile Application Development]]></category>
		<category><![CDATA[Expo Beginners Guide]]></category>
		<category><![CDATA[React Native Tutorial]]></category>
		<guid isPermaLink="false">https://blog.goloris.com/?p=3451</guid>

					<description><![CDATA[<p>Why Start With a To-Do App? Learning to code can feel intimidating. The good news is that React Native makes it possible to build [&#8230;]</p>
<p>The post <a href="https://blog.goloris.com/how-to-build-a-to-do-app-with-react-native-in-2025-beginners-guide/">How to Build a To-Do App with React Native in 2025 (Beginner’s Guide)</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-1024x683.webp" alt="react native logo, expo logo" class="wp-image-3460" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-1024x683.webp 1024w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-300x200.webp 300w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-768x512.webp 768w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-400x268.webp 400w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-1120x747.webp 1120w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo.webp 1536w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">Why Start With a To-Do App?</h3>



<p>Learning to code can feel intimidating. The good news is that React Native makes it possible to build mobile apps for <strong>iOS and Android with a single codebase</strong>, and it’s still one of the most popular frameworks in 2025.</p>



<p>When learning something new, it’s best to start small. That’s why so many developers begin with a <strong>to-do list app</strong>. It’s simple but practical, and teaches you the fundamentals:</p>



<ul class="wp-block-list">
<li>How to structure a React Native project</li>



<li>How to use components like <code>View</code>, <code>Text</code>, <code>TextInput</code>, and <code>Button</code></li>



<li>How to store and update data with <code>useState</code></li>



<li>How to display lists with <code>FlatList</code></li>



<li>How to make things interactive with <code>TouchableOpacity</code></li>
</ul>



<p>By the end of this tutorial, you’ll have a working to-do app you can run on your phone in under an hour. Let’s get started.</p>



<h3 class="wp-block-heading">Step 1: Setting Up the Project</h3>



<p>First, you’ll need <strong>Node.js</strong> installed. Download it from <a href="https://nodejs.org/en/download/" title="">nodejs.org</a>. Installing Node also gives you npm, the package manager we’ll use.</p>



<p>For beginners, the easiest way to start is with <strong>Expo</strong>, which handles a lot of configuration for you. Open your terminal and run:</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#212121"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" style="color:#EEFFFF;display:none" aria-label="Copy" class="code-block-pro-copy-button"><pre class="code-block-pro-copy-button-pre" aria-hidden="true"><textarea class="code-block-pro-copy-button-textarea" tabindex="-1" aria-hidden="true" readonly>npx create-expo-app my-todo-app
cd my-todo-app
npm start</textarea></pre><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki material-theme-darker" style="background-color: #212121" tabindex="0"><code><span class="line"><span style="color: #FFCB6B">npx</span><span style="color: #EEFFFF"> </span><span style="color: #C3E88D">create-expo-app</span><span style="color: #EEFFFF"> </span><span style="color: #C3E88D">my-todo-app</span></span>
<span class="line"><span style="color: #82AAFF">cd</span><span style="color: #EEFFFF"> </span><span style="color: #C3E88D">my-todo-app</span></span>
<span class="line"><span style="color: #FFCB6B">npm</span><span style="color: #EEFFFF"> </span><span style="color: #C3E88D">start</span></span></code></pre></div>



<p>Expo will create a folder called <code>my-todo-app</code> with all the boilerplate files. When you run <code>npm start</code>, you’ll see a QR code in the terminal. Install the <strong>Expo Go app</strong> on your phone, scan the QR code, and—just like that—you’ll see your new app running live on your device.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="390" src="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-npx-create-expo-app-1024x390.png" alt="" class="wp-image-3453" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-npx-create-expo-app-1024x390.png 1024w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-npx-create-expo-app-300x114.png 300w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-npx-create-expo-app-768x293.png 768w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-npx-create-expo-app-1536x585.png 1536w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-npx-create-expo-app-2048x780.png 2048w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-npx-create-expo-app-400x152.png 400w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-npx-create-expo-app-1120x427.png 1120w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="931" src="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-npm-start-1024x931.png" alt="" class="wp-image-3452" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-npm-start-1024x931.png 1024w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-npm-start-300x273.png 300w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-npm-start-768x698.png 768w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-npm-start-295x268.png 295w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-npm-start-1120x1019.png 1120w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-expo-npm-start.png 1413w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>At this point it just shows a welcome screen, but that’s our blank canvas.</p>



<h3 class="wp-block-heading">Step 2: Meet React Native’s Core Components</h3>



<p>Before diving into code, let’s look at the building blocks we’ll use. React Native doesn’t use HTML elements like <code>&lt;div&gt;</code> or <code>&lt;p&gt;</code>. Instead, it provides components designed for mobile apps:</p>



<ul class="wp-block-list">
<li><strong><code>View</code></strong> → The most common container, similar to a <code>div</code> on the web. It organizes layout and groups elements together.</li>



<li><strong><code>Text</code></strong> → Used to display text on screen: titles, labels, messages.</li>



<li><strong><code>TextInput</code></strong> → A text field where the user can type input, like new tasks for our app.</li>



<li><strong><code>Button</code></strong> → A simple pressable button, often used for submitting actions.</li>



<li><strong><code>FlatList</code></strong> → An efficient way to render long lists, like our list of todos.</li>



<li><strong><code>TouchableOpacity</code></strong> → Makes any element pressable, and slightly fades (opacity) when tapped. Perfect for making todo items removable.</li>



<li><strong><code>StyleSheet</code></strong> → Keeps your styling code organized. With <code>StyleSheet.create</code>, you define all visual styles (colors, spacing, fonts) in one place.</li>
</ul>



<p>Think of these as the LEGO bricks of your app. By combining them, you can build almost anything.</p>



<h3 class="wp-block-heading">Step 3: Creating a Clean Starting Point</h3>



<p>Open <code>App.js</code> in your editor and replace the contents with this minimal structure:</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#212121"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" style="color:#EEFFFF;display:none" aria-label="Copy" class="code-block-pro-copy-button"><pre class="code-block-pro-copy-button-pre" aria-hidden="true"><textarea class="code-block-pro-copy-button-textarea" tabindex="-1" aria-hidden="true" readonly>import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    &lt;View style={styles.container}>
      &lt;Text style={styles.title}>My To-Do App&lt;/Text>
    &lt;/View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 60,
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
});</textarea></pre><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki material-theme-darker" style="background-color: #212121" tabindex="0"><code><span class="line"><span style="color: #89DDFF; font-style: italic">import</span><span style="color: #EEFFFF"> React </span><span style="color: #89DDFF; font-style: italic">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">react</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #89DDFF; font-style: italic">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">StyleSheet</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Text</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">View</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF; font-style: italic">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">react-native</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #89DDFF; font-style: italic">export</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF; font-style: italic">default</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">App</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #89DDFF; font-style: italic">return</span><span style="color: #F07178"> (</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">container</span><span style="color: #89DDFF">}&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">title</span><span style="color: #89DDFF">}&gt;</span><span style="color: #EEFFFF">My To-Do App</span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #F07178">  )</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #89DDFF">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> styles </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> StyleSheet</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">create</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #F07178">container</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">flex</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">backgroundColor</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#fff</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">paddingTop</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">60</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">paddingHorizontal</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #F07178">title</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">fontSize</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">24</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">fontWeight</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">bold</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">textAlign</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">center</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">marginBottom</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#212121;color:#d5ffff;font-size:12px;line-height:1;position:relative">JavaScript</span></div>



<p>This displays a white screen with the title “My To-Do App” at the top. It’s simple, but it confirms our project is running correctly. Now we can start building functionality.</p>



<h3 class="wp-block-heading">Step 4: Adding State for Tasks</h3>



<p>We’ll need two pieces of data:</p>



<ol class="wp-block-list">
<li>The list of todos.</li>



<li>The text currently in the input field.</li>
</ol>



<p>React provides the <code>useState</code> hook for this. Update your code:</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#212121"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" style="color:#EEFFFF;display:none" aria-label="Copy" class="code-block-pro-copy-button"><pre class="code-block-pro-copy-button-pre" aria-hidden="true"><textarea class="code-block-pro-copy-button-textarea" tabindex="-1" aria-hidden="true" readonly>import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const &#91;todos, setTodos&#93; = useState([]);
  const &#91;text, setText&#93; = useState('');

  return (
    &lt;View style={styles.container}>
      &lt;Text style={styles.title}>My To-Do App&lt;/Text>
    &lt;/View>
  );
}</textarea></pre><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki material-theme-darker" style="background-color: #212121" tabindex="0"><code><span class="line"><span style="color: #89DDFF; font-style: italic">import</span><span style="color: #EEFFFF"> React</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">useState</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF; font-style: italic">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">react</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #89DDFF; font-style: italic">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">StyleSheet</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Text</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">View</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF; font-style: italic">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">react-native</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #89DDFF; font-style: italic">export</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF; font-style: italic">default</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">App</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#91;</span><span style="color: #EEFFFF">todos</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">setTodos</span><span style="color: #89DDFF">&#93;</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">useState</span><span style="color: #F07178">([])</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#91;</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">setText</span><span style="color: #89DDFF">&#93;</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">useState</span><span style="color: #F07178">(</span><span style="color: #89DDFF">&#39;&#39;</span><span style="color: #F07178">)</span><span style="color: #89DDFF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #89DDFF; font-style: italic">return</span><span style="color: #F07178"> (</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">container</span><span style="color: #89DDFF">}&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">title</span><span style="color: #89DDFF">}&gt;</span><span style="color: #EEFFFF">My To-Do App</span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #F07178">  )</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #89DDFF">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#212121;color:#d5ffff;font-size:12px;line-height:1;position:relative">JavaScript</span></div>



<ul class="wp-block-list">
<li><code>todos</code> is an array of tasks.</li>



<li><code>text</code> stores what the user is typing.</li>
</ul>



<h3 class="wp-block-heading">Step 5: Adding Input and a Button</h3>



<p>Now let’s let the user type a task and add it to the list. We’ll use <code>TextInput</code> and <code>Button</code>.</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#212121"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" style="color:#EEFFFF;display:none" aria-label="Copy" class="code-block-pro-copy-button"><pre class="code-block-pro-copy-button-pre" aria-hidden="true"><textarea class="code-block-pro-copy-button-textarea" tabindex="-1" aria-hidden="true" readonly>&lt;TextInput
  style={styles.input}
  placeholder="Add a new task..."
  value={text}
  onChangeText={setText}
  returnKeyType="done"
  onSubmitEditing={() => {
    if (text.trim().length > 0) {
      setTodos(&#91;...todos, { id: Date.now().toString(), text }&#93;);
      setText('');
    }
  }}
/>

&lt;Button
  title="Add Task"
  onPress={() => {
    if (text.trim().length > 0) {
      setTodos(&#91;...todos, { id: Date.now().toString(), text }&#93;);
      setText('');
    }
  }}
/></textarea></pre><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki material-theme-darker" style="background-color: #212121" tabindex="0"><code><span class="line"><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">TextInput</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">input</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">placeholder</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Add a new task...</span><span style="color: #89DDFF">&quot;</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">value</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">onChangeText</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">setText</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">returnKeyType</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">done</span><span style="color: #89DDFF">&quot;</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">onSubmitEditing</span><span style="color: #89DDFF">={()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #89DDFF; font-style: italic">if</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">trim</span><span style="color: #F07178">()</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">length</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&gt;</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span><span style="color: #F07178">) </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">      </span><span style="color: #82AAFF">setTodos</span><span style="color: #F07178">(&#91;</span><span style="color: #89DDFF">...</span><span style="color: #EEFFFF">todos</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> id</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Date</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">now</span><span style="color: #F07178">()</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">toString</span><span style="color: #F07178">()</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">text</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">&#93;)</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">      </span><span style="color: #82AAFF">setText</span><span style="color: #F07178">(</span><span style="color: #89DDFF">&#39;&#39;</span><span style="color: #F07178">)</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #89DDFF">}}</span></span>
<span class="line"><span style="color: #89DDFF">/&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">Button</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">title</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Add Task</span><span style="color: #89DDFF">&quot;</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">onPress</span><span style="color: #89DDFF">={()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #89DDFF; font-style: italic">if</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">trim</span><span style="color: #F07178">()</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">length</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&gt;</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span><span style="color: #F07178">) </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">      </span><span style="color: #82AAFF">setTodos</span><span style="color: #F07178">(&#91;</span><span style="color: #89DDFF">...</span><span style="color: #EEFFFF">todos</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> id</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Date</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">now</span><span style="color: #F07178">()</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">toString</span><span style="color: #F07178">()</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">text</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">&#93;)</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">      </span><span style="color: #82AAFF">setText</span><span style="color: #F07178">(</span><span style="color: #89DDFF">&#39;&#39;</span><span style="color: #F07178">)</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #89DDFF">}}</span></span>
<span class="line"><span style="color: #89DDFF">/&gt;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#212121;color:#d5ffff;font-size:12px;line-height:1;position:relative">JavaScript</span></div>



<p>Now when you type something and press the button, it gets added to <code>todos</code>. We still need to show it on screen.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="514" height="407" src="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-1.png" alt="" class="wp-image-3455" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-1.png 514w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-1-300x238.png 300w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-1-338x268.png 338w" sizes="(max-width: 514px) 100vw, 514px" /></figure></div>


<h3 class="wp-block-heading">Step 6: Displaying the List with FlatList</h3>



<p>React Native’s <code>FlatList</code> makes rendering lists simple and efficient. Add this below the button:</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#212121"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" style="color:#EEFFFF;display:none" aria-label="Copy" class="code-block-pro-copy-button"><pre class="code-block-pro-copy-button-pre" aria-hidden="true"><textarea class="code-block-pro-copy-button-textarea" tabindex="-1" aria-hidden="true" readonly>&lt;FlatList
  data={todos}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    &lt;View style={styles.todoItem}>
      &lt;Text style={styles.todoText}>{item.text}&lt;/Text>
    &lt;/View>
  )}
  ListEmptyComponent={
    &lt;Text style={styles.emptyText}>Your list is empty. Add your first task!&lt;/Text>
  }
/></textarea></pre><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki material-theme-darker" style="background-color: #212121" tabindex="0"><code><span class="line"><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">FlatList</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">data</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">todos</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">keyExtractor</span><span style="color: #89DDFF">={(</span><span style="color: #EEFFFF; font-style: italic">item</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> item</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">id</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">renderItem</span><span style="color: #89DDFF">={({</span><span style="color: #EEFFFF"> </span><span style="color: #EEFFFF; font-style: italic">item</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">})</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> (</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">todoItem</span><span style="color: #89DDFF">}&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">todoText</span><span style="color: #89DDFF">}&gt;{</span><span style="color: #EEFFFF">item</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">}&lt;/</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">  )</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">  </span><span style="color: #C792EA">ListEmptyComponent</span><span style="color: #89DDFF">={</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">emptyText</span><span style="color: #89DDFF">}&gt;</span><span style="color: #EEFFFF">Your list is empty. Add your first task!</span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">/&gt;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#212121;color:#d5ffff;font-size:12px;line-height:1;position:relative">JavaScript</span></div>



<p>Now every todo you add appears on screen. If there are none, it shows a helpful message.</p>



<h3 class="wp-block-heading">Step 7: Deleting Todos with TouchableOpacity</h3>



<p>To make todos removable, wrap each one in a <code>TouchableOpacity</code>:</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#212121"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" style="color:#EEFFFF;display:none" aria-label="Copy" class="code-block-pro-copy-button"><pre class="code-block-pro-copy-button-pre" aria-hidden="true"><textarea class="code-block-pro-copy-button-textarea" tabindex="-1" aria-hidden="true" readonly>renderItem={({ item }) => (
  &lt;TouchableOpacity onPress={() => setTodos(todos.filter(t => t.id !== item.id))}>
    &lt;View style={styles.todoItem}>
      &lt;Text style={styles.todoText}>{item.text}&lt;/Text>
      &lt;Text style={styles.todoHint}>Tap to remove&lt;/Text>
    &lt;/View>
  &lt;/TouchableOpacity>
)}</textarea></pre><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki material-theme-darker" style="background-color: #212121" tabindex="0"><code><span class="line"><span style="color: #EEFFFF">renderItem</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">item</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">) =&gt; (</span></span>
<span class="line"><span style="color: #EEFFFF">  &lt;TouchableOpacity onPress</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">() =&gt; </span><span style="color: #F07178">setTodos</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">todos.filter(</span><span style="color: #EEFFFF; font-style: italic">t</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=&gt;</span><span style="color: #EEFFFF"> t</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">id </span><span style="color: #89DDFF">!==</span><span style="color: #EEFFFF"> item</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">id</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">}&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">    &lt;View style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles.todoItem</span><span style="color: #89DDFF">}&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">      &lt;Text style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles.todoText</span><span style="color: #89DDFF">}&gt;{</span><span style="color: #EEFFFF">item.text</span><span style="color: #89DDFF">}&lt;/</span><span style="color: #EEFFFF">Text</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">      &lt;Text style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles.todoHint</span><span style="color: #89DDFF">}&gt;</span><span style="color: #EEFFFF">Tap to remove</span><span style="color: #89DDFF">&lt;/</span><span style="color: #EEFFFF">Text</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">    &lt;/View&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">  &lt;/TouchableOpacity&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#212121;color:#d5ffff;font-size:12px;line-height:1;position:relative">JavaScript</span></div>



<p>Now when you tap a task, it disappears. Simple, but effective!</p>



<h3 class="wp-block-heading">Step 8: Styling the App</h3>



<p>Finally, let’s polish the design with <code>StyleSheet</code>. Add these styles:</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#212121"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" style="color:#EEFFFF;display:none" aria-label="Copy" class="code-block-pro-copy-button"><pre class="code-block-pro-copy-button-pre" aria-hidden="true"><textarea class="code-block-pro-copy-button-textarea" tabindex="-1" aria-hidden="true" readonly>input: {
  borderWidth: 1,
  borderColor: '#d9d9d9',
  padding: 12,
  borderRadius: 8,
  marginBottom: 10,
  fontSize: 16,
},
todoItem: {
  padding: 14,
  borderRadius: 10,
  backgroundColor: '#f7f8fa',
  borderWidth: 1,
  borderColor: '#ececec',
  marginBottom: 8,
},
todoText: {
  fontSize: 16,
  color: '#222',
},
todoHint: {
  marginTop: 6,
  fontSize: 12,
  color: '#7a7a7a',
},
emptyText: {
  color: '#9b9b9b',
  fontSize: 14,
  textAlign: 'center',
  marginTop: 20,
},</textarea></pre><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki material-theme-darker" style="background-color: #212121" tabindex="0"><code><span class="line"><span style="color: #FFCB6B">input</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">borderWidth</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">borderColor</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#d9d9d9</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">padding</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">12</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">borderRadius</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">8</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">marginBottom</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">10</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">fontSize</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">16</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #FFCB6B">todoItem</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">padding</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">14</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">borderRadius</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">10</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">backgroundColor</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#f7f8fa</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">borderWidth</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">borderColor</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#ececec</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">marginBottom</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">8</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #FFCB6B">todoText</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">fontSize</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">16</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">color</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#222</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #FFCB6B">todoHint</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">marginTop</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">6</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">fontSize</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">12</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">color</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#7a7a7a</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #FFCB6B">emptyText</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">color</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#9b9b9b</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">fontSize</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">14</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">textAlign</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">center</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #FFCB6B">marginTop</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">20</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF">},</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#212121;color:#d5ffff;font-size:12px;line-height:1;position:relative">JavaScript</span></div>



<p>The app now has a clean, minimal look.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="511" height="415" src="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-2.png" alt="" class="wp-image-3456" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-2.png 511w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-2-300x244.png 300w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-2-330x268.png 330w" sizes="(max-width: 511px) 100vw, 511px" /></figure></div>


<h3 class="wp-block-heading">Complete App.js</h3>



<p>Here’s the <strong>entire code</strong> so you can copy and paste it directly into <code>App.js</code> and run it:</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#212121"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" style="color:#EEFFFF;display:none" aria-label="Copy" class="code-block-pro-copy-button"><pre class="code-block-pro-copy-button-pre" aria-hidden="true"><textarea class="code-block-pro-copy-button-textarea" tabindex="-1" aria-hidden="true" readonly>import React, { useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  FlatList,
  TouchableOpacity,
} from 'react-native';

export default function App() {
  const &#91;todos, setTodos&#93; = useState([]);
  const &#91;text, setText&#93; = useState('');

  const addTodo = () => {
    const trimmed = text.trim();
    if (!trimmed) return;
    setTodos((prev) => &#91;...prev, { id: Date.now().toString(), text: trimmed }&#93;);
    setText('');
  };

  const removeTodo = (id) => {
    setTodos((prev) => prev.filter((t) => t.id !== id));
  };

  const renderItem = ({ item }) => (
    &lt;TouchableOpacity onPress={() => removeTodo(item.id)}>
      &lt;View style={styles.todoItem}>
        &lt;Text style={styles.todoText}>{item.text}&lt;/Text>
        &lt;Text style={styles.todoHint}>Tap to remove&lt;/Text>
      &lt;/View>
    &lt;/TouchableOpacity>
  );

  return (
    &lt;View style={styles.container}>
      &lt;Text style={styles.title}>My To-Do App&lt;/Text>

      &lt;TextInput
        style={styles.input}
        placeholder="Add a new task..."
        value={text}
        onChangeText={setText}
        returnKeyType="done"
        onSubmitEditing={addTodo}
      />

      &lt;View style={styles.buttonWrap}>
        &lt;Button title="Add Task" onPress={addTodo} />
      &lt;/View>

      &lt;FlatList
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        ListEmptyComponent={
          &lt;Text style={styles.emptyText}>
            Your list is empty. Add your first task!
          &lt;/Text>
        }
      />
    &lt;/View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 60,
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  input: {
    borderWidth: 1,
    borderColor: '#d9d9d9',
    padding: 12,
    borderRadius: 8,
    marginBottom: 10,
    fontSize: 16,
  },
  buttonWrap: {
    marginBottom: 12,
  },
  todoItem: {
    padding: 14,
    borderRadius: 10,
    backgroundColor: '#f7f8fa',
    borderWidth: 1,
    borderColor: '#ececec',
    marginBottom: 8,
  },
  todoText: {
    fontSize: 16,
    color: '#222',
  },
  todoHint: {
    marginTop: 6,
    fontSize: 12,
    color: '#7a7a7a',
  },
  emptyText: {
    color: '#9b9b9b',
    fontSize: 14,
    textAlign: 'center',
    marginTop: 20,
  },
});</textarea></pre><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki material-theme-darker" style="background-color: #212121" tabindex="0"><code><span class="line"><span style="color: #89DDFF; font-style: italic">import</span><span style="color: #EEFFFF"> React</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">useState</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF; font-style: italic">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">react</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #89DDFF; font-style: italic">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #EEFFFF">StyleSheet</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #EEFFFF">Text</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #EEFFFF">View</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #EEFFFF">TextInput</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #EEFFFF">Button</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #EEFFFF">FlatList</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #EEFFFF">TouchableOpacity</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF; font-style: italic">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">react-native</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #89DDFF; font-style: italic">export</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF; font-style: italic">default</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">App</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#91;</span><span style="color: #EEFFFF">todos</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">setTodos</span><span style="color: #89DDFF">&#93;</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">useState</span><span style="color: #F07178">([])</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#91;</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">setText</span><span style="color: #89DDFF">&#93;</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">useState</span><span style="color: #F07178">(</span><span style="color: #89DDFF">&#39;&#39;</span><span style="color: #F07178">)</span><span style="color: #89DDFF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">addTodo</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">trimmed</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">trim</span><span style="color: #F07178">()</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #89DDFF; font-style: italic">if</span><span style="color: #F07178"> (</span><span style="color: #89DDFF">!</span><span style="color: #EEFFFF">trimmed</span><span style="color: #F07178">) </span><span style="color: #89DDFF; font-style: italic">return</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #82AAFF">setTodos</span><span style="color: #F07178">(</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF; font-style: italic">prev</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #F07178"> &#91;</span><span style="color: #89DDFF">...</span><span style="color: #EEFFFF">prev</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> id</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Date</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">now</span><span style="color: #F07178">()</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">toString</span><span style="color: #F07178">()</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> text</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">trimmed</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">&#93;)</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #82AAFF">setText</span><span style="color: #F07178">(</span><span style="color: #89DDFF">&#39;&#39;</span><span style="color: #F07178">)</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #89DDFF">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">removeTodo</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF; font-style: italic">id</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #82AAFF">setTodos</span><span style="color: #F07178">(</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF; font-style: italic">prev</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">prev</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">filter</span><span style="color: #F07178">(</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF; font-style: italic">t</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">t</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">id</span><span style="color: #F07178"> </span><span style="color: #89DDFF">!==</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">id</span><span style="color: #F07178">))</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #89DDFF">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">renderItem</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">({</span><span style="color: #F07178"> </span><span style="color: #EEFFFF; font-style: italic">item</span><span style="color: #F07178"> </span><span style="color: #89DDFF">})</span><span style="color: #F07178"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #F07178"> (</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">TouchableOpacity</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">onPress</span><span style="color: #89DDFF">={()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">removeTodo</span><span style="color: #EEFFFF">(item</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">id)</span><span style="color: #89DDFF">}&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">todoItem</span><span style="color: #89DDFF">}&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">todoText</span><span style="color: #89DDFF">}&gt;{</span><span style="color: #EEFFFF">item</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">}&lt;/</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">todoHint</span><span style="color: #89DDFF">}&gt;</span><span style="color: #EEFFFF">Tap to remove</span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">TouchableOpacity</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #F07178">  )</span><span style="color: #89DDFF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F07178">  </span><span style="color: #89DDFF; font-style: italic">return</span><span style="color: #F07178"> (</span></span>
<span class="line"><span style="color: #F07178">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">container</span><span style="color: #89DDFF">}&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">title</span><span style="color: #89DDFF">}&gt;</span><span style="color: #EEFFFF">My To-Do App</span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">TextInput</span></span>
<span class="line"><span style="color: #89DDFF">        </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">input</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">        </span><span style="color: #C792EA">placeholder</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Add a new task...</span><span style="color: #89DDFF">&quot;</span></span>
<span class="line"><span style="color: #89DDFF">        </span><span style="color: #C792EA">value</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">        </span><span style="color: #C792EA">onChangeText</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">setText</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">        </span><span style="color: #C792EA">returnKeyType</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">done</span><span style="color: #89DDFF">&quot;</span></span>
<span class="line"><span style="color: #89DDFF">        </span><span style="color: #C792EA">onSubmitEditing</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">addTodo</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">      /&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">buttonWrap</span><span style="color: #89DDFF">}&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">Button</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">title</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">Add Task</span><span style="color: #89DDFF">&quot;</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">onPress</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">addTodo</span><span style="color: #89DDFF">} /&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">FlatList</span></span>
<span class="line"><span style="color: #89DDFF">        </span><span style="color: #C792EA">data</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">todos</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">        </span><span style="color: #C792EA">keyExtractor</span><span style="color: #89DDFF">={(</span><span style="color: #EEFFFF; font-style: italic">item</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> item</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">id</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">        </span><span style="color: #C792EA">renderItem</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">renderItem</span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">        </span><span style="color: #C792EA">ListEmptyComponent</span><span style="color: #89DDFF">={</span></span>
<span class="line"><span style="color: #EEFFFF">          </span><span style="color: #89DDFF">&lt;</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">={</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">emptyText</span><span style="color: #89DDFF">}&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">            Your list is empty. Add your first task!</span></span>
<span class="line"><span style="color: #EEFFFF">          </span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">Text</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">}</span></span>
<span class="line"><span style="color: #89DDFF">      /&gt;</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;/</span><span style="color: #FFCB6B">View</span><span style="color: #89DDFF">&gt;</span></span>
<span class="line"><span style="color: #F07178">  )</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #89DDFF">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> styles </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> StyleSheet</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">create</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #F07178">container</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">flex</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">backgroundColor</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#fff</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">paddingTop</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">60</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">paddingHorizontal</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #F07178">title</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">fontSize</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">24</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">fontWeight</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">bold</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">textAlign</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">center</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">marginBottom</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #F07178">input</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">borderWidth</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">borderColor</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#d9d9d9</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">padding</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">12</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">borderRadius</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">8</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">marginBottom</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">10</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">fontSize</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">16</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #F07178">buttonWrap</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">marginBottom</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">12</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #F07178">todoItem</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">padding</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">14</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">borderRadius</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">10</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">backgroundColor</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#f7f8fa</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">borderWidth</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">borderColor</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#ececec</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">marginBottom</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">8</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #F07178">todoText</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">fontSize</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">16</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#222</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #F07178">todoHint</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">marginTop</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">6</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">fontSize</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">12</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#7a7a7a</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #F07178">emptyText</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">#9b9b9b</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">fontSize</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">14</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">textAlign</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">center</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">    </span><span style="color: #F07178">marginTop</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20</span><span style="color: #89DDFF">,</span></span>
<span class="line"><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">},</span></span>
<span class="line"><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#212121;color:#d5ffff;font-size:12px;line-height:1;position:relative">JavaScript</span></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="512" height="609" src="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-3.png" alt="" class="wp-image-3457" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-3.png 512w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-3-252x300.png 252w, https://blog.goloris.com/wp-content/uploads/2025/08/react-native-todo-app-3-225x268.png 225w" sizes="(max-width: 512px) 100vw, 512px" /></figure></div>


<h3 class="wp-block-heading">Conclusion</h3>



<p>Congratulations! <img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f389.png" alt="🎉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> You just built your first mobile app with React Native. You now understand:</p>



<ul class="wp-block-list">
<li>How to use core components (<code>View</code>, <code>Text</code>, <code>TextInput</code>, <code>Button</code>, <code>FlatList</code>, <code>TouchableOpacity</code>)</li>



<li>How to manage data with <code>useState</code></li>



<li>How to style an app with <code>StyleSheet</code></li>



<li>How to add and delete tasks in a simple list</li>
</ul>



<p>This app may be small, but the same building blocks scale to much larger projects.</p>



<p>Of course, coding takes time. If your goal is simply to <strong>launch an app quickly for your business</strong>, you don’t always need to write code. Platforms like <strong><a href="https://goloris.com" target="_blank" rel="noopener" title="Goloris AI No-Code App Builder">Goloris AI No-Code App Builder</a></strong> let you describe your app in plain language, and it generates the structure instantly. You can publish as a free <strong>Progressive Web App (PWA)</strong> or upgrade to launch on iOS and Android.</p>



<p>Whether you want to learn coding or prefer no-code speed, you now have both options.</p>



<p></p><p>The post <a href="https://blog.goloris.com/how-to-build-a-to-do-app-with-react-native-in-2025-beginners-guide/">How to Build a To-Do App with React Native in 2025 (Beginner’s Guide)</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://blog.goloris.com/how-to-build-a-to-do-app-with-react-native-in-2025-beginners-guide/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How To Setup Android Studio : Beginner&#8217;s Guide</title>
		<link>https://blog.goloris.com/how-to-setup-android-studio-beginners-guide/</link>
					<comments>https://blog.goloris.com/how-to-setup-android-studio-beginners-guide/#respond</comments>
		
		<dc:creator><![CDATA[goloris]]></dc:creator>
		<pubDate>Fri, 29 Aug 2025 21:40:14 +0000</pubDate>
				<category><![CDATA[Genel]]></category>
		<guid isPermaLink="false">https://blog.goloris.com/?p=3447</guid>

					<description><![CDATA[<p>If you’re new to Android development, setting up Android Studio is the very first step to building your own apps. Android Studio is the [&#8230;]</p>
<p>The post <a href="https://blog.goloris.com/how-to-setup-android-studio-beginners-guide/">How To Setup Android Studio : Beginner’s Guide</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img loading="lazy" decoding="async" width="1024" height="1024" src="https://blog.goloris.com/wp-content/uploads/2025/08/android-logo-1024x1024.png" alt="" class="wp-image-3448" style="width:310px;height:auto" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/android-logo-1024x1024.png 1024w, https://blog.goloris.com/wp-content/uploads/2025/08/android-logo-300x300.png 300w, https://blog.goloris.com/wp-content/uploads/2025/08/android-logo-150x150.png 150w, https://blog.goloris.com/wp-content/uploads/2025/08/android-logo-768x768.png 768w, https://blog.goloris.com/wp-content/uploads/2025/08/android-logo-268x268.png 268w, https://blog.goloris.com/wp-content/uploads/2025/08/android-logo-1120x1120.png 1120w, https://blog.goloris.com/wp-content/uploads/2025/08/android-logo-90x90.png 90w, https://blog.goloris.com/wp-content/uploads/2025/08/android-logo.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></div>


<p>If you’re new to Android development, <strong>setting up Android Studio</strong> is the very first step to building your own apps. Android Studio is the official Integrated Development Environment (IDE) for Android, backed by Google, and comes with everything you need to start coding: a code editor, emulators, and debugging tools.</p>



<p>In this guide, we’ll walk through system requirements, installation steps for both Windows and Mac, first-time setup, and even creating your first project. By the end, you’ll have a fully working <strong>Android development environment</strong>.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">System Requirements</h2>



<p>Before diving in, make sure your machine meets the minimum requirements for running Android Studio smoothly.</p>



<p><strong>For Windows:</strong></p>



<ul class="wp-block-list">
<li>OS: Windows 10/11 (64-bit)</li>



<li>RAM: 8 GB minimum, 16 GB recommended</li>



<li>Disk: At least 8 GB of free space</li>



<li>JDK: Bundled with Android Studio</li>



<li>Resolution: 1280 x 800 minimum</li>
</ul>



<p><strong>For Mac:</strong></p>



<ul class="wp-block-list">
<li>macOS: 10.14 Mojave or later</li>



<li>RAM: 8 GB minimum, 16 GB recommended</li>



<li>Disk: At least 8 GB free space</li>



<li>CPU: Intel or Apple Silicon (M1/M2)</li>



<li>Resolution: 1280 x 800 minimum</li>
</ul>



<h2 class="wp-block-heading">Step 1: Downloading Android Studio</h2>



<p>The safest way to <strong>download Android Studio</strong> is directly from the official website:<br><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f449.png" alt="👉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <a href="https://developer.android.com/studio" title="">Download Android </a><a href="https://developer.android.com/studio" title="Studio">Studio</a></p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Step 2: Install Android Studio on Windows</h2>



<p>Follow these steps to <strong>install Android Studio on Windows</strong>:</p>



<ol class="wp-block-list">
<li>Run the downloaded <code>.exe</code> installer.</li>



<li>Accept the license agreement.</li>



<li>Select components: Android Studio + Android Virtual Device (recommended).</li>



<li>Choose the installation path (default works fine).</li>



<li>Wait for installation to finish.</li>



<li>Launch Android Studio and complete the setup wizard.</li>
</ol>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Pro Tip: If the installer asks for a JDK, don’t worry — the latest Android Studio bundles its own JDK.</p>
</blockquote>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Step 3: Install Android Studio on Mac</h2>



<p>Here’s how to <strong>install Android Studio on Mac</strong>:</p>



<ol class="wp-block-list">
<li>Open the <code>.dmg</code> file you downloaded.</li>



<li>Drag <strong>Android Studio</strong> into the Applications folder.</li>



<li>Open Android Studio from Launchpad.</li>



<li>If prompted, allow permissions in System Preferences &gt; Security.</li>



<li>Complete the setup wizard to download required components.</li>
</ol>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Pro Tip: If you’re on Apple Silicon, make sure to select the correct emulator image (ARM-based).</p>
</blockquote>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Step 4: First-Time Setup</h2>



<p>When you launch Android Studio for the first time, it will guide you through a setup wizard:</p>



<ul class="wp-block-list">
<li><strong>SDK Installation:</strong> Choose the latest Android SDK version.</li>



<li><strong>Emulator Setup:</strong> Install an Android Virtual Device (AVD) to test apps.</li>



<li><strong>Environment Variables:</strong> Typically handled automatically, but you may need to add the <code>sdk/tools</code> path to your system if required.</li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Step 5: Creating Your First Project</h2>



<p>Let’s create a simple &#8220;Hello World&#8221; project to confirm everything is working.</p>



<ol class="wp-block-list">
<li>Click <strong>New Project</strong> → <strong>Empty Activity</strong>.</li>



<li>Give your app a name (e.g., <em>HelloWorld</em>).</li>



<li>Choose a language (Java or Kotlin).</li>



<li>Select the minimum SDK (API level).</li>



<li>Click <strong>Finish</strong>.</li>
</ol>



<p>Once Android Studio builds the project, click <strong>Run <img src="https://s.w.org/images/core/emoji/16.0.1/72x72/25b6.png" alt="▶" class="wp-smiley" style="height: 1em; max-height: 1em;" /></strong> to launch the app on your emulator. You should see <strong>Hello World!</strong> on the screen.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Common Issues &amp; Fixes</h2>



<p>Here are some common problems and quick fixes:</p>



<ul class="wp-block-list">
<li><strong>JDK not found:</strong> Update Android Studio — it includes its own JDK.</li>



<li><strong>Emulator running slow:</strong> Enable Intel HAXM (Windows) or use ARM images (Mac M1/M2).</li>



<li><strong>Gradle build errors:</strong> Click <em>File &gt; Invalidate Caches / Restart</em>.</li>



<li><strong>Device not detected:</strong> Ensure USB debugging is enabled on your phone.</li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Tips for Beginners</h2>



<p>Starting out can feel overwhelming. Here are a few tips:</p>



<ul class="wp-block-list">
<li><strong>Keyboard Shortcuts:</strong> Learn basics like <code>Shift + Shift</code> (Search Everywhere).</li>



<li><strong>Plugins:</strong> Install useful plugins like <em>ADB Idea</em> for quick actions.</li>



<li><strong>Best Practices:</strong> Keep your Android Studio updated for smoother development.</li>



<li><strong>Documentation:</strong> Bookmark the <a href="https://developer.android.com/develop" title="">Android Developer Docs</a><br><br></li>
</ul>



<p>If setting up Android Studio feels too technical or time-consuming, you don’t always need to dive into code to bring your app ideas to life. Tools like <a href="https://goloris.com" title=""><strong>Goloris</strong></a> let you build and publish fully functional mobile apps without writing a single line of code. Whether you’re running an online store or launching a startup, Goloris helps you create a professional Android app in minutes — no IDE, SDK, or emulator required.</p>



<p></p><p>The post <a href="https://blog.goloris.com/how-to-setup-android-studio-beginners-guide/">How To Setup Android Studio : Beginner’s Guide</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://blog.goloris.com/how-to-setup-android-studio-beginners-guide/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>E-Commerce Mobile Apps Made Easy with No-Code</title>
		<link>https://blog.goloris.com/e-commerce-mobile-apps-made-easy-with-no-code/</link>
					<comments>https://blog.goloris.com/e-commerce-mobile-apps-made-easy-with-no-code/#respond</comments>
		
		<dc:creator><![CDATA[goloris]]></dc:creator>
		<pubDate>Tue, 26 Aug 2025 22:32:22 +0000</pubDate>
				<category><![CDATA[E-Commerce]]></category>
		<category><![CDATA[Mobile Applications]]></category>
		<category><![CDATA[build apps without coding]]></category>
		<category><![CDATA[e-commerce apps]]></category>
		<category><![CDATA[mobile commerce]]></category>
		<category><![CDATA[No Code App Builder]]></category>
		<category><![CDATA[no-code]]></category>
		<guid isPermaLink="false">https://blog.goloris.com/?p=3444</guid>

					<description><![CDATA[<p>Introduction: The New Era of E-Commerce The e-commerce industry has grown at an incredible pace over the last decade. By 2025, online shopping is [&#8230;]</p>
<p>The post <a href="https://blog.goloris.com/e-commerce-mobile-apps-made-easy-with-no-code/">E-Commerce Mobile Apps Made Easy with No-Code</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></description>
										<content:encoded><![CDATA[<h2 class="wp-block-heading">Introduction: The New Era of E-Commerce</h2>



<p>The e-commerce industry has grown at an incredible pace over the last decade. By 2025, online shopping is not just an option—it is the default for millions of customers worldwide. With this rapid growth comes new challenges for businesses that want to remain competitive.</p>



<p>One of the biggest shifts is the demand for mobile apps. Consumers no longer want to rely solely on websites; they expect fast, user-friendly, and personalized mobile experiences. For small and medium-sized e-commerce businesses, this demand creates both opportunities and obstacles.</p>



<p>Traditional app development is expensive and time-consuming. Hiring developers or agencies often requires budgets that smaller businesses cannot afford. No-code app development offers a solution. It makes professional app creation accessible, affordable, and faster than ever before.</p>



<h2 class="wp-block-heading">Why Mobile Apps Matter for E-Commerce</h2>



<p>Mobile commerce, or m-commerce, now accounts for more than 70% of online transactions. Customers are spending more time on their phones, and they want shopping to be as simple as tapping an icon on their home screen.</p>



<p>Mobile apps improve engagement. Features such as push notifications, loyalty rewards, and personalized product recommendations encourage repeat purchases. A dedicated app also creates a stronger brand presence. When a customer sees your app logo daily, your store becomes top of mind.</p>



<p>Apps also streamline the buying process. Unlike mobile websites, apps allow smoother navigation, faster loading times, and integrated checkout experiences. The fewer barriers between browsing and buying, the higher the conversion rate. For e-commerce stores, this translates into increased sales and customer loyalty.</p>



<h2 class="wp-block-heading">What is No-Code App Development?</h2>



<p>No-code app development eliminates the need for programming skills. Instead of writing code, store owners use visual editors, pre-built templates, and drag-and-drop components. This makes it possible to build apps in days rather than months.</p>



<p>For e-commerce businesses, this means you can quickly create apps that integrate with your product catalog, offer secure payment gateways, and display real-time updates. Features that once required advanced development knowledge are now available with just a few clicks.</p>



<p>The rise of no-code also reduces dependency on IT teams or agencies. Entrepreneurs, marketers, and even store managers can build and manage apps independently. This democratization of software development allows businesses to move faster and stay competitive.</p>



<h2 class="wp-block-heading">Benefits of No-Code for E-Commerce Businesses</h2>



<p>The first major benefit is cost savings. Traditional development can cost tens of thousands of dollars, while no-code platforms operate on affordable subscription models. This makes mobile app ownership possible for businesses of any size.</p>



<p>Another benefit is speed. An e-commerce owner can go from idea to live app in weeks, not months. This speed enables businesses to test ideas quickly, adapt to trends, and launch seasonal campaigns faster than competitors.</p>



<p>No-code also provides flexibility. You can start with a simple version of your app and expand as your customer base grows. Adding new features, promotions, or loyalty systems is a matter of updating the platform rather than rewriting code.</p>



<p>Finally, no-code apps improve customer engagement. Push notifications keep shoppers informed, loyalty programs drive retention, and in-app messaging provides direct communication. For e-commerce, these features can transform occasional buyers into loyal customers.</p>



<h2 class="wp-block-heading">Real-World Use Cases</h2>



<p>A local fashion boutique can use no-code to create a branded app where customers browse collections, save favorite items, and receive alerts about flash sales. The owner doesn’t need coding skills—only an eye for how the store should look and feel in digital form.</p>



<p>A specialty food shop can launch an app that supports online ordering, delivery scheduling, and subscriptions. Customers gain convenience, while the business increases recurring revenue.</p>



<p>Even service-based e-commerce businesses, such as beauty product retailers or fitness stores, can benefit. They can integrate appointment scheduling, product catalogs, and personalized recommendations within one app. These examples highlight how no-code empowers smaller players to compete with large online retailers.</p>



<h2 class="wp-block-heading">Challenges to Keep in Mind</h2>



<p>No-code is powerful, but it is not perfect. Some platforms have limitations in customization. Businesses that want highly unique designs or complex functionality may find certain features restricted.</p>



<p>Integration can also be a challenge. While many no-code platforms support popular tools like Stripe, Shopify, or Airtable, not every legacy system connects seamlessly. Businesses should confirm compatibility before committing.</p>



<p>Security is another important factor. E-commerce apps handle sensitive data such as payment details and personal information. Choosing a reliable no-code platform with strong compliance and encryption features is essential.</p>



<p>The good news is that modern no-code platforms are addressing these issues with better integrations, scalable infrastructure, and enterprise-level security. For most small and medium-sized e-commerce businesses, these platforms are more than capable of meeting day-to-day needs.</p>



<h2 class="wp-block-heading">Why Goloris is a Strong Fit for E-Commerce</h2>



<p>Among the wide range of no-code platforms available, Goloris stands out as a practical choice for e-commerce. Its AI-powered builder reduces development time by helping store owners create apps simply by describing their needs. This makes the app creation process even faster and more intuitive.</p>



<p>On the free plan, Goloris allows apps to be published as Progressive Web Apps (PWAs). This is an excellent way for e-commerce owners to test the market and provide customers with mobile access without upfront costs. PWAs function like apps but run through the browser, giving businesses an instant mobile presence.</p>



<p>When ready to scale, Goloris offers a premium plan that enables publishing directly to Android and iOS app stores. This allows small shops to appear side-by-side with global brands, enhancing credibility and reach.</p>



<p>In addition, Goloris supports core e-commerce features: product catalog integration, secure payments, push notifications, and promotional campaigns. Combined with affordability and AI-driven design, Goloris helps e-commerce businesses move from idea to launch without the roadblocks of traditional development.</p>



<h2 class="wp-block-heading">Conclusion</h2>



<p>The future of e-commerce belongs to businesses that adapt quickly and engage customers where they spend their time: on mobile devices. No-code app development offers small and medium-sized online stores the ability to compete with larger retailers by giving them affordable, flexible, and powerful tools.</p>



<p>From cost savings and faster launch times to better customer engagement, no-code platforms are changing how e-commerce businesses grow. While challenges exist, modern platforms provide solutions that make app development more accessible than ever before.</p>



<p>If you run an e-commerce store and want to reach more customers, now is the perfect time to explore no-code development. With Goloris, you can start with a free PWA, test your app with real users, and then scale to native Android and iOS apps. The path to building a professional e-commerce app has never been easier—or more affordable.</p>



<p></p><p>The post <a href="https://blog.goloris.com/e-commerce-mobile-apps-made-easy-with-no-code/">E-Commerce Mobile Apps Made Easy with No-Code</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://blog.goloris.com/e-commerce-mobile-apps-made-easy-with-no-code/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Best No-Code Tools Compared in 2025 (With Pros &#038; Cons)</title>
		<link>https://blog.goloris.com/best-no-code-tools-compared-in-2025-with-pros-cons/</link>
					<comments>https://blog.goloris.com/best-no-code-tools-compared-in-2025-with-pros-cons/#respond</comments>
		
		<dc:creator><![CDATA[goloris]]></dc:creator>
		<pubDate>Mon, 25 Aug 2025 17:07:38 +0000</pubDate>
				<category><![CDATA[Mobile Application Development]]></category>
		<category><![CDATA[No Code App Builder]]></category>
		<category><![CDATA[Adalo app builder]]></category>
		<category><![CDATA[affordable app development]]></category>
		<category><![CDATA[AI-powered app builder]]></category>
		<category><![CDATA[Appgyver enterprise apps]]></category>
		<category><![CDATA[Bubble no-code]]></category>
		<category><![CDATA[build apps without coding]]></category>
		<category><![CDATA[Glide spreadsheet apps]]></category>
		<category><![CDATA[Goloris no-code]]></category>
		<category><![CDATA[no-code]]></category>
		<category><![CDATA[no-code platforms comparison]]></category>
		<category><![CDATA[no-code tools 2025]]></category>
		<category><![CDATA[no-code vs low-code]]></category>
		<category><![CDATA[Webflow for businesses]]></category>
		<guid isPermaLink="false">https://blog.goloris.com/?p=3437</guid>

					<description><![CDATA[<p>Introduction: Why No-Code Matters in 2025 No-code development has moved far beyond being a passing trend. In 2025, it has become a mainstream solution [&#8230;]</p>
<p>The post <a href="https://blog.goloris.com/best-no-code-tools-compared-in-2025-with-pros-cons/">Best No-Code Tools Compared in 2025 (With Pros & Cons)</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://blog.goloris.com/wp-content/uploads/2025/08/small-business-owner-using-a-no-code-app-builder-in-2025-1024x683.webp" alt="" class="wp-image-3438" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/small-business-owner-using-a-no-code-app-builder-in-2025-1024x683.webp 1024w, https://blog.goloris.com/wp-content/uploads/2025/08/small-business-owner-using-a-no-code-app-builder-in-2025-300x200.webp 300w, https://blog.goloris.com/wp-content/uploads/2025/08/small-business-owner-using-a-no-code-app-builder-in-2025-768x512.webp 768w, https://blog.goloris.com/wp-content/uploads/2025/08/small-business-owner-using-a-no-code-app-builder-in-2025-400x268.webp 400w, https://blog.goloris.com/wp-content/uploads/2025/08/small-business-owner-using-a-no-code-app-builder-in-2025-1120x747.webp 1120w, https://blog.goloris.com/wp-content/uploads/2025/08/small-business-owner-using-a-no-code-app-builder-in-2025.webp 1536w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Small business owner using a no-code app builder in 2025</figcaption></figure>



<h2 class="wp-block-heading">Introduction: Why No-Code Matters in 2025</h2>



<p>No-code development has moved far beyond being a passing trend. In 2025, it has become a mainstream solution for entrepreneurs, startups, and even large enterprises. Small businesses can now create apps that used to require entire teams of developers, while startups can launch MVPs in weeks instead of months. As a result, no-code platforms are not just an alternative—they are the driving force behind faster innovation, reduced costs, and broader accessibility. But with so many options available, the real challenge is deciding which platform best fits your needs.</p>



<h2 class="wp-block-heading">What to Look for in a No-Code Platform</h2>



<p>Choosing the right no-code platform depends on your goals. Ease of use is often the first factor—drag-and-drop builders and ready-made templates can make the difference for beginners. Scalability also matters, since your app may start small but grow quickly if successful. Integrations with databases, APIs, or third-party tools ensure your app can connect to the wider ecosystem. Pricing is another key point, as some platforms offer free plans while others require enterprise-level budgets. Finally, in 2025, AI support has become a critical feature. Platforms that integrate AI help users build faster, test ideas more efficiently, and automate repetitive tasks.</p>



<h2 class="wp-block-heading">Quick Comparison Table: 2025 Snapshot</h2>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><strong>Platform</strong></td><td><strong>Best For</strong></td><td><strong>Ease of Use <img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /></strong></td><td><strong>Scalability <img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /></strong></td><td><strong>Pricing (approx.)</strong></td><td><strong>Unique Strength</strong></td></tr><tr><td>Bubble</td><td>Complex apps, startups</td><td>Medium</td><td>High</td><td>$29+/mo</td><td>Highly customizable</td></tr><tr><td>Adalo</td><td>Mobile-first apps</td><td>High</td><td>Medium</td><td>$36+/mo</td><td>Fast mobile prototyping</td></tr><tr><td>Glide</td><td>Data-driven apps (Sheets)</td><td>Very High</td><td>Medium</td><td>Free – $99/mo</td><td>Spreadsheet → App</td></tr><tr><td>Webflow</td><td>Websites, web apps</td><td>High</td><td>Medium-High</td><td>$14–$39+/mo</td><td>Design-focused</td></tr><tr><td>Appgyver</td><td>Enterprise solutions</td><td>Medium</td><td>High</td><td>Free (SAP support)</td><td>Enterprise-grade backend</td></tr><tr><td>Goloris</td><td>AI-powered mobile apps</td><td>Very High</td><td>High</td><td>Free (PWA) / Premium (iOS + Android)</td><td>AI builder + multi-platform publishing</td></tr></tbody></table></figure>



<h2 class="wp-block-heading">Bubble: Power and Complexity</h2>



<p>Bubble is one of the most established names in the no-code world. It allows users to build complex and scalable web applications with a high degree of customization. However, this flexibility comes with a price—its learning curve is steeper than most alternatives. Non-technical users may find Bubble overwhelming at first, but for startups that want to build powerful apps with long-term growth potential, it remains a strong choice.</p>



<h2 class="wp-block-heading">Adalo: Fast Mobile Prototyping</h2>



<p>Adalo focuses on mobile-first development and shines when it comes to rapid prototyping. Entrepreneurs and small teams can quickly design mobile apps without worrying about backend complexities. Its drag-and-drop interface makes the process simple, and it’s a great option for testing MVPs or small projects. However, when it comes to scaling into enterprise-level apps, Adalo shows its limits. For businesses that want to launch mobile ideas quickly, it’s still one of the most user-friendly options available.</p>



<h2 class="wp-block-heading">Glide: From Spreadsheet to App</h2>



<p>Glide has carved out its niche by turning spreadsheets into fully functional apps. If your business already works heavily with Google Sheets or Airtable, Glide is an incredibly easy way to build tools for inventory management, internal workflows, or CRM systems. The simplicity is unmatched, and non-technical users can get started within minutes. The trade-off is that design and customization options are somewhat limited, so Glide is better suited for straightforward, data-driven apps rather than highly branded consumer products.</p>



<h2 class="wp-block-heading">Webflow: Design Meets Function</h2>



<p>Webflow is best known for its ability to combine professional-grade design with functionality. It is ideal for businesses and creators who prioritize brand identity and want pixel-perfect control over their websites and web apps. The platform supports animations, responsive layouts, and advanced styling options, making it a favorite among designers. That said, Webflow is more suited for web projects than mobile apps. If your focus is a visually stunning website or a content-driven platform, Webflow delivers. But for native app publishing, other platforms may be more efficient.</p>



<h2 class="wp-block-heading">Appgyver: The Enterprise Edge</h2>



<p>Backed by SAP, Appgyver positions itself as a serious option for enterprise-grade applications. It provides advanced backend integrations and offers features tailored for complex workflows. The good news is that it also has a free plan, which makes it accessible for smaller teams that want to explore enterprise-level development without big costs. However, its technical complexity means that complete beginners may struggle. Appgyver is ideal for larger organizations or tech-savvy teams who want to create secure, scalable solutions.</p>



<h2 class="wp-block-heading">Goloris: AI-Powered and Accessible</h2>



<p>Goloris brings something fresh to the no-code space in 2025—AI-powered app development. With Goloris, users can describe the type of app they want, and the platform generates the structure for them. This dramatically reduces build time and lowers the learning curve even further. On the free plan, users can publish their apps as Progressive Web Apps (PWAs), which are instantly accessible through browsers. For businesses ready to scale, the premium plan allows publishing directly to Android and iOS stores. While Goloris is newer compared to long-standing names like Bubble or Webflow, its AI capabilities and unique publishing model make it an excellent choice for entrepreneurs and small businesses that want speed and flexibility.</p>



<h2 class="wp-block-heading">Which One Should You Choose?</h2>



<p>There is no universal “best” no-code platform—it depends on your needs. If you want to build a complex and scalable app with full control, Bubble is a strong candidate. If your goal is to launch a mobile MVP quickly, Adalo or Glide are practical solutions. For highly design-focused web projects, Webflow is unmatched. Enterprises needing advanced backend workflows can look to Appgyver. And if you want the fastest path from idea to app—with AI support, free PWA publishing, and premium options for native apps—Goloris is a platform that stands out in 2025.</p>



<h2 class="wp-block-heading">Conclusion</h2>



<p>The no-code movement is transforming software development. In 2025, businesses of all sizes are using these platforms to innovate faster, save money, and stay competitive. Each tool has its strengths and limitations, and the right choice depends on your goals. However, one thing is clear: no-code is no longer the future—it’s the present.</p>



<p>If you’re ready to create an app without writing a single line of code, explore Goloris No-Code App Builder today. Build with AI, publish as a PWA for free, and scale to Android and iOS when you’re ready. The easiest way to start building your app is already here.</p>



<p></p><p>The post <a href="https://blog.goloris.com/best-no-code-tools-compared-in-2025-with-pros-cons/">Best No-Code Tools Compared in 2025 (With Pros & Cons)</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://blog.goloris.com/best-no-code-tools-compared-in-2025-with-pros-cons/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>No-Code for Small Businesses: Affordable App Development in 2025</title>
		<link>https://blog.goloris.com/no-code-for-small-businesses-affordable-app-development-in-2025/</link>
					<comments>https://blog.goloris.com/no-code-for-small-businesses-affordable-app-development-in-2025/#respond</comments>
		
		<dc:creator><![CDATA[goloris]]></dc:creator>
		<pubDate>Fri, 22 Aug 2025 18:27:39 +0000</pubDate>
				<category><![CDATA[No Code App Builder]]></category>
		<category><![CDATA[affordable app development]]></category>
		<category><![CDATA[Mobile Application]]></category>
		<category><![CDATA[no-code]]></category>
		<category><![CDATA[no-code development]]></category>
		<category><![CDATA[no-code for small businesses]]></category>
		<guid isPermaLink="false">https://blog.goloris.com/?p=3434</guid>

					<description><![CDATA[<p>Introduction – Technology at Reach for Small Businesses In 2025, technology is no longer a barrier for small businesses. Thanks to no-code platforms, entrepreneurs [&#8230;]</p>
<p>The post <a href="https://blog.goloris.com/no-code-for-small-businesses-affordable-app-development-in-2025/">No-Code for Small Businesses: Affordable App Development in 2025</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="768" src="https://blog.goloris.com/wp-content/uploads/2025/08/akshar-dave-TDfvoPFVYaE-unsplash-1024x768.jpg" alt="" class="wp-image-3435" srcset="https://blog.goloris.com/wp-content/uploads/2025/08/akshar-dave-TDfvoPFVYaE-unsplash-1024x768.jpg 1024w, https://blog.goloris.com/wp-content/uploads/2025/08/akshar-dave-TDfvoPFVYaE-unsplash-300x225.jpg 300w, https://blog.goloris.com/wp-content/uploads/2025/08/akshar-dave-TDfvoPFVYaE-unsplash-768x576.jpg 768w, https://blog.goloris.com/wp-content/uploads/2025/08/akshar-dave-TDfvoPFVYaE-unsplash-1536x1152.jpg 1536w, https://blog.goloris.com/wp-content/uploads/2025/08/akshar-dave-TDfvoPFVYaE-unsplash-2048x1536.jpg 2048w, https://blog.goloris.com/wp-content/uploads/2025/08/akshar-dave-TDfvoPFVYaE-unsplash-357x268.jpg 357w, https://blog.goloris.com/wp-content/uploads/2025/08/akshar-dave-TDfvoPFVYaE-unsplash-1120x840.jpg 1120w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Introduction – Technology at Reach for Small Businesses</h2>



<p>In 2025, technology is no longer a barrier for small businesses. Thanks to no-code platforms, entrepreneurs and small business owners can now bring their app ideas to life—fast, affordably, and without a technical background. These tools are transforming the way businesses operate, helping them adapt, grow, and serve customers better.</p>



<h2 class="wp-block-heading">What No-Code Means for Small Businesses</h2>



<p>No-code development refers to building apps without writing code. Instead, users work with drag-and-drop tools, templates, and visual interfaces. According to Draftbit, no-code platforms empower non-technical users with powerful capabilities—making app creation cost-effective, quick, and scalable. This shift allows businesses to experiment, validate ideas, and refine solutions in real-time—all without hiring expensive developers or outsourcing the work.</p>



<h2 class="wp-block-heading">Major Advantages for Small Businesses</h2>



<p><strong>Cost Savings and Speed to Market</strong><br>No-code platforms drastically cut development times. Sommo reports that businesses can reduce costs by up to 80% and deliver apps significantly faster. This is game-changing for small ventures that need solutions yesterday.</p>



<p><strong>Accessibility and Agility</strong><br>No-code tools lower the barrier to entry—anyone can build an app. Noloco highlights that only 0.5% of the world can code, which means no-code makes app development accessible to the other 99.5%. This inclusivity empowers small teams to innovate quickly.</p>



<p><strong>Scalability Without Technical Overhead</strong><br>Contrary to older misconceptions, no-code apps can scale. They are flexible, extensible, and often match the performance of traditionally coded apps. Small businesses can start simple, then grow functionality as demand increases.</p>



<p><strong>Streamlined Operations</strong><br>Automating mundane tasks like scheduling, CRM, or order tracking becomes easy with no-code. Ridgebase notes how non-technical teams can build business workflows with drag-and-drop editors. This improves efficiency without involving IT.</p>



<h2 class="wp-block-heading">Market Trends: Why Now Is the Moment</h2>



<p>No-code has become a mainstream technology. Noloco cites a compound annual growth rate (CAGR) of 22.7% expected through 2027, and the market size projected to hit nearly $48.1 billion by 2025. Clearly, small businesses are not just adopting these tools—they’re thriving on them.</p>



<p>Moreover, media outlets like TechRadar highlight the rise of no-code platforms like Appy Pie, Zoho Creator, and AppSheet—geared specifically toward businesses seeking easy, flexible app creation solutions.</p>



<h2 class="wp-block-heading">Real-World Examples</h2>



<p>AppSheet through Google lets non-tech users build apps from spreadsheets—ideal for managing inventories, inspections, or reports.</p>



<p>Platforms like Adalo let small business owners design apps visually and publish them instantly as mobile or web solutions.</p>



<p>These examples demonstrate how no-code tools are being applied in everyday business settings—from local shops to niche service providers—all at a fraction of traditional costs.</p>



<h2 class="wp-block-heading">Caution and Considerations</h2>



<p>While no-code brings many advantages, it’s important to be mindful of its limits. Integration with legacy systems or advanced features may require workarounds or hybrid solutions. Additionally, vendor lock-in can be a risk if a platform doesn’t support exporting or migrations. Still, for many small businesses, the benefits of quick launch and low cost far outweigh these risks.</p>



<h2 class="wp-block-heading">Why Goloris Is an Ideal Solution for SMBs</h2>



<p>Introducing Goloris No Code App Builder—a platform tailored to small businesses with both ease-of-use and flexibility in mind.</p>



<ul class="wp-block-list">
<li>AI-assisted app building lets you describe what you want, and Goloris brings it to life—fast.</li>



<li>On the free plan, you can publish as a Progressive Web App (PWA)—great for testing or soft launches.</li>



<li>The premium plan unlocks publishing to Android and iOS, expanding your reach into app stores—without complexity.</li>
</ul>



<p>In short, Goloris helps small businesses go from idea to app in record time, without code or high costs.</p>



<h2 class="wp-block-heading">Conclusion</h2>



<p>No-code has evolved from a niche trend into a critical enabler for small businesses in 2025. It removes technical barriers, cuts costs, and empowers entrepreneurs to innovate at speed. With rising market adoption, vast savings, and powerful tools like Goloris, now is the perfect time for small businesses to lean into no-code.</p>



<p>Consider starting with Goloris today. Get your app live quickly, affordably, and with minimal hassle.</p><p>The post <a href="https://blog.goloris.com/no-code-for-small-businesses-affordable-app-development-in-2025/">No-Code for Small Businesses: Affordable App Development in 2025</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://blog.goloris.com/no-code-for-small-businesses-affordable-app-development-in-2025/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>What is No-Code? A Beginner’s Guide</title>
		<link>https://blog.goloris.com/what-is-no-code-a-beginners-guide/</link>
					<comments>https://blog.goloris.com/what-is-no-code-a-beginners-guide/#respond</comments>
		
		<dc:creator><![CDATA[goloris]]></dc:creator>
		<pubDate>Wed, 20 Aug 2025 00:08:09 +0000</pubDate>
				<category><![CDATA[Mobile Applications]]></category>
		<category><![CDATA[No Code App Builder]]></category>
		<category><![CDATA[AI app builder]]></category>
		<category><![CDATA[app development for beginners]]></category>
		<category><![CDATA[build apps without coding]]></category>
		<category><![CDATA[mobile app development]]></category>
		<category><![CDATA[no-code]]></category>
		<category><![CDATA[no-code development]]></category>
		<category><![CDATA[no-code platforms]]></category>
		<category><![CDATA[no-code vs low-code]]></category>
		<category><![CDATA[progressive web apps]]></category>
		<category><![CDATA[what is no-code]]></category>
		<guid isPermaLink="false">https://blog.goloris.com/?p=3393</guid>

					<description><![CDATA[<p>Introduction: The New Era of App Development Imagine this: you have a great idea for a mobile app. It could help your business grow, [&#8230;]</p>
<p>The post <a href="https://blog.goloris.com/what-is-no-code-a-beginners-guide/">What is No-Code? A Beginner’s Guide</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></description>
										<content:encoded><![CDATA[<p></p>
<figure><img decoding="async" src="https://blog.goloris.com/wp-content/uploads/2025/08/photo-1461749280684-dccba630e2f6-edited-scaled.jpg" alt=""></figure>
<p></p>
<h2 class="wp-block-heading">Introduction: The New Era of App Development</h2>
<p></p>
<p>Imagine this: you have a great idea for a mobile app. It could help your business grow, connect with customers, or even transform an entire industry. A few years ago, that idea would probably remain a dream. You would need a big budget, months of development, and a team of specialists.</p>
<p></p>
<p>Today things look very different. Thanks to no-code development, anyone can turn an idea into a working app. As a result, app creation has become faster, cheaper, and more accessible. In this guide, we will explain what no-code really means, why it matters, and how you can use it.</p>
<p></p>
<h2 class="wp-block-heading">What Does “No-Code” Really Mean?</h2>
<p></p>
<p>At its core, no-code development is software creation without writing code. Instead of typing complex programming languages, users work with drag-and-drop builders and pre-made blocks. These platforms let you design an app visually.</p>
<p></p>
<p>In other words, you focus on the design and flow, while the system handles the code behind the scenes. For example, if you want a login screen, you drag it into place. If you want maps or payments, you add those features with a single click.</p>
<p></p>
<p>This method makes software development feel less like engineering and more like assembling. As a result, the process is faster, less technical, and much more approachable.</p>
<p></p>
<h2 class="wp-block-heading">Why No-Code is Transforming the Industry</h2>
<p></p>
<p>The rise of no-code is not just a passing trend. Instead, it solves many long-standing problems in software development. Traditional projects are expensive and time-consuming. For small businesses or startups, this often makes app development impossible.</p>
<p></p>
<p>No-code platforms remove these barriers. Therefore, businesses can move at the speed of their ideas. A café owner who wants a loyalty app can build one in weeks, not months. A startup founder can test an MVP quickly before raising investment. Enterprises can let employees create internal tools, which reduces pressure on IT teams.</p>
<p></p>
<p>In short, no-code gives technology back to the people. It empowers entrepreneurs, helps small businesses, and allows large companies to innovate faster.</p>
<p></p>
<h2 class="wp-block-heading">What Can You Build With No-Code?</h2>
<p></p>
<p>You can build far more than simple prototypes. For example, businesses are using no-code to create:</p>
<p></p>
<ul>
<li>Mobile apps for subscriptions, communities, and e-commerce.</li>
<li>Web apps for booking systems, marketplaces, and SaaS.</li><li>Workflow automation and CRM tools.</li><li>Progressive Web Apps (PWAs) that look and feel like native apps.</li></ul><ul><li style="list-style-type: none;"><ul>
</ul>
</li>
</ul>
<p></p>
<ul><li style="list-style-type: none;"><ul>
</ul>
</li>
</ul>
<p></p>
<ul><li style="list-style-type: none;"><ul>
</ul>
</li>
</ul>
<p></p>
<p><!-- /wp:post-content --><!-- wp:paragraph --></p>
<p>As a result, no-code has become a powerful tool across many industries. Healthcare, education, retail, and even non-profits use it to create apps that would once require large development teams.</p>
<p><!-- /wp:paragraph --><!-- wp:heading --></p>
<h2>No-Code vs. Low-Code: Clearing the Confusion</h2>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>No-code and low-code are often mentioned together, but they are not the same. On the one hand, low-code still requires some programming. It is designed for professional developers who want to speed up repetitive tasks. On the other hand, no-code eliminates coding entirely. This makes it perfect for beginners and non-technical users.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>For most people starting out, no-code is the best choice. However, if you are building highly complex enterprise software, low-code may offer more flexibility.</p>
<p><!-- /wp:paragraph --><!-- wp:heading --></p>
<h2>Challenges You Should Be Aware Of</h2>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>No-code has clear advantages, but it is not without limits. For example, you may be restricted by the features the platform provides. Some integrations can also be challenging. And in some cases, scaling a very large project may eventually require custom development.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>Nevertheless, these drawbacks are small compared to the benefits. Most entrepreneurs and businesses find that speed, cost savings, and accessibility outweigh the limitations.</p>
<p><!-- /wp:paragraph --><!-- wp:heading --></p>
<h2>The Future of No-Code</h2>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>The future looks bright. Analysts predict that by 2025, over 70% of new apps will be built with no-code or low-code platforms. This growth is also powered by artificial intelligence.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>AI is changing the way we build apps. For example, you can simply describe the app you want: “A booking system with payments and reminders.” In seconds, an AI-powered builder can create the foundation for you. Therefore, development is becoming faster and easier than ever.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>As a result, no-code is not only a tool. It is a movement that makes innovation available to everyone.</p>
<p><!-- /wp:paragraph --><!-- wp:heading --></p>
<h2>Why Goloris is the Perfect Choice</h2>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>Among many platforms, Goloris No Code App Builder stands out. It combines AI-powered development with flexible publishing options.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>With Goloris, you can create mobile apps using AI. You describe what you want, and the platform builds it for you. On the free plan, you can publish your app as a Progressive Web App (PWA), making it instantly available in any browser. When you are ready to grow, the premium plan lets you publish directly to Android and iOS stores.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>Therefore, Goloris is ideal for both beginners and advanced users. Whether you are testing a small idea or preparing to launch a global app, Goloris gives you the tools to succeed.</p>
<p><!-- /wp:paragraph --><!-- wp:heading --></p>
<h2>Conclusion</h2>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>No-code is changing the world of software. It reduces costs, speeds up development, and removes technical barriers. Most importantly, it allows anyone with an idea to create.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>If you have ever thought, “I want to build an app, but I don’t know how,” now you do. With Goloris, you can start today. It is easy, fast, and affordable.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>The future of app development is no-code. And with <a title="Goloris" href="https://goloris.com" target="_blank" rel="noopener">Goloris</a>, that future is already here.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>		
		<a role="button" href="https://goloris.com" target="_blank">
			Start Free with Goloris
		</a><p>The post <a href="https://blog.goloris.com/what-is-no-code-a-beginners-guide/">What is No-Code? A Beginner’s Guide</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://blog.goloris.com/what-is-no-code-a-beginners-guide/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to Build Your First Mobile App</title>
		<link>https://blog.goloris.com/building-a-mobile-application-a-beginners-guide-to-getting-started/</link>
		
		<dc:creator><![CDATA[goloris]]></dc:creator>
		<pubDate>Sun, 13 Jul 2025 14:42:31 +0000</pubDate>
				<category><![CDATA[Mobile Application Development]]></category>
		<category><![CDATA[Mobile Applications]]></category>
		<category><![CDATA[No Code App Builder]]></category>
		<category><![CDATA[Appstore]]></category>
		<category><![CDATA[Building your first application]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Google Playstore]]></category>
		<category><![CDATA[Mobile Application]]></category>
		<guid isPermaLink="false">https://blog.goloris.com/?p=3284</guid>

					<description><![CDATA[<p>First Step Towards Mobile Application Development Are you thinking about building a mobile application but unsure where to start? Whether you&#8217;re an aspiring entrepreneur, [&#8230;]</p>
<p>The post <a href="https://blog.goloris.com/building-a-mobile-application-a-beginners-guide-to-getting-started/">How to Build Your First Mobile App</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></description>
										<content:encoded><![CDATA[<div data-elementor-type="wp-post" data-elementor-id="3284" class="elementor elementor-3284">
				<div class="elementor-element elementor-element-f8333f0 e-flex e-con-boxed e-con e-parent" data-id="f8333f0" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-8816184 elementor-widget elementor-widget-heading" data-id="8816184" data-element_type="widget" data-widget_type="heading.default">
					<h2 class="elementor-heading-title elementor-size-default">First Step Towards Mobile Application Development</h2>				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-711505a e-flex e-con-boxed e-con e-parent" data-id="711505a" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-e57be4c elementor-widget elementor-widget-text-editor" data-id="e57be4c" data-element_type="widget" data-widget_type="text-editor.default">
									<p data-start="458" data-end="674">Are you thinking about building a mobile application but unsure where to start? Whether you&#8217;re an aspiring entrepreneur, developer, or hobbyist, <strong data-start="603" data-end="636">building a mobile application</strong> is an exciting and rewarding journey.</p><p data-start="676" data-end="918">This guide will walk you through the essentials; from choosing the right tools to deploying your first app. You don&#8217;t need years of coding experience. With the rise of <strong data-start="843" data-end="867">no code app builders</strong>, launching your mobile idea has never been easier.</p><p data-start="920" data-end="1127">By the end of this article, you’ll understand the core components of mobile development, practical steps to follow, common pitfalls to avoid, and real-world tools that can help you go from idea to app store.</p>								</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-6170eea e-flex e-con-boxed e-con e-parent" data-id="6170eea" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-1e00f33 elementor-widget elementor-widget-heading" data-id="1e00f33" data-element_type="widget" data-widget_type="heading.default">
					<h3 class="elementor-heading-title elementor-size-default">Table of Contents</h3>				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-c21391e e-flex e-con-boxed e-con e-parent" data-id="c21391e" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-e68ef10 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="e68ef10" data-element_type="widget" data-widget_type="icon-list.default">
							<ul class="elementor-icon-list-items">
							<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-dot-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Understanding the Mobile App Landscape</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-dot-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Step-by-Step: Building a Mobile Application</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-dot-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z"></path></svg>						</span>
										<span class="elementor-icon-list-text">No Code vs Custom Code: Which Path Should You Take?</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-dot-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Practical Example: Building a Task Tracker App</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-dot-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Common Mistakes to Avoid</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-dot-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Conclusion &amp; Next Steps</span>
									</li>
						</ul>
						</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-8ca9b4c e-flex e-con-boxed e-con e-parent" data-id="8ca9b4c" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-6223c4a elementor-widget elementor-widget-heading" data-id="6223c4a" data-element_type="widget" data-widget_type="heading.default">
					<h3 class="elementor-heading-title elementor-size-default">Understanding the Mobile App Landscape</h3>				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-1b79684 e-flex e-con-boxed e-con e-parent" data-id="1b79684" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-60411d1 elementor-widget elementor-widget-text-editor" data-id="60411d1" data-element_type="widget" data-widget_type="text-editor.default">
									<p data-start="1790" data-end="1889">Before jumping into development, it&#8217;s important to understand the <strong data-start="1856" data-end="1888">mobile application ecosystem</strong>.</p><p data-start="1891" data-end="1920">There are two main platforms:</p><ul data-start="1921" data-end="1977"><li data-start="1921" data-end="1946"><p data-start="1923" data-end="1946"><strong data-start="1923" data-end="1930">iOS</strong> (Apple devices)</p></li><li data-start="1947" data-end="1977"><p data-start="1949" data-end="1977"><strong data-start="1949" data-end="1960">Android</strong> (Google devices)</p></li></ul><p data-start="1979" data-end="2023">You can build apps for both platforms using:</p><ul data-start="2024" data-end="2195"><li data-start="2024" data-end="2089"><p data-start="2026" data-end="2089"><strong data-start="2026" data-end="2048">Native development</strong> (Swift for iOS, Kotlin/Java for Android)</p></li><li data-start="2090" data-end="2145"><p data-start="2092" data-end="2145"><strong data-start="2092" data-end="2121">Cross-platform frameworks</strong> (React Native, Flutter)</p></li><li data-start="2146" data-end="2195"><p data-start="2148" data-end="2195"><strong data-start="2148" data-end="2169">No code platforms</strong> (Adalo, Glide, Thunkable)</p></li></ul><p data-start="2197" data-end="2318">If you&#8217;re just starting, a <strong data-start="2224" data-end="2247">no code app builder</strong> like <a href="https://goloris.com/">goloris</a> can help you validate your idea without writing a single line of code.</p>								</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-51c6a75 e-flex e-con-boxed e-con e-parent" data-id="51c6a75" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-2abee24 elementor-widget elementor-widget-heading" data-id="2abee24" data-element_type="widget" data-widget_type="heading.default">
					<h3 class="elementor-heading-title elementor-size-default">Step-by-Step: Building a Mobile Application</h3>				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-d764dea e-flex e-con-boxed e-con e-parent" data-id="d764dea" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-f6092cf elementor-widget elementor-widget-text-editor" data-id="f6092cf" data-element_type="widget" data-widget_type="text-editor.default">
									<p data-start="2373" data-end="2456">Here’s a streamlined approach to help you go from idea to a functioning mobile app.</p><p data-start="2373" data-end="2456"> </p><h3 data-start="2458" data-end="2503">1. Define Your App’s Purpose and Features</h3><p data-start="2504" data-end="2532">Start with clear answers to:</p><ul data-start="2533" data-end="2656"><li data-start="2533" data-end="2568"><p data-start="2535" data-end="2568">What problem does your app solve?</p></li><li data-start="2569" data-end="2599"><p data-start="2571" data-end="2599">Who is your target audience?</p></li><li data-start="2600" data-end="2656"><p data-start="2602" data-end="2656">What are the <strong data-start="2615" data-end="2632">core features</strong> you need for version 1?</p></li></ul><p data-start="2658" data-end="2743">Use tools like <a class="" href="https://miro.com" target="_new" rel="noopener" data-start="2673" data-end="2697">Miro</a> or <a class="" href="https://figma.com" target="_new" rel="noopener" data-start="2701" data-end="2727">Figma</a> for wireframes.</p><p data-start="2658" data-end="2743"> </p><h3 data-start="2745" data-end="2782">2. Choose Your Development Method</h3><p data-start="2783" data-end="2798">Decide between:</p><ul data-start="2799" data-end="2914"><li data-start="2799" data-end="2863"><p data-start="2801" data-end="2863"><strong data-start="2801" data-end="2823">Custom development</strong> for full control (best for scalability)</p></li><li data-start="2864" data-end="2914"><p data-start="2866" data-end="2914"><strong data-start="2866" data-end="2889">No code app builder</strong> for speed and simplicity</p></li></ul><p> </p><h3 data-start="3082" data-end="3124">3. Set Up Your Development Environment</h3><p data-start="3125" data-end="3135"><strong>If coding:</strong></p><ul data-start="3136" data-end="3281"><li data-start="3136" data-end="3202"><p data-start="3138" data-end="3202">Install tools like <strong data-start="3157" data-end="3175">Android Studio</strong>, <strong data-start="3177" data-end="3186">Xcode</strong>, or <strong data-start="3191" data-end="3202">VS Code</strong></p></li><li data-start="3203" data-end="3253"><p data-start="3205" data-end="3253">Choose a framework (Flutter, React Native, etc.)</p></li><li data-start="3254" data-end="3281"><p data-start="3256" data-end="3281">Set up emulators and SDKs</p></li></ul><p data-start="3283" data-end="3300"><strong>If using no-code:</strong></p><ul data-start="3301" data-end="3366"><li data-start="3301" data-end="3366"><p data-start="3303" data-end="3366">Simply sign up and start building via drag-and-drop components.</p></li><li>Try out the <a href="https://goloris.com/">goloris.</a> Choose a template that suits your idea start editing and directly publish it.</li></ul><p> </p><h3 data-start="3368" data-end="3391">4. Design the UI/UX</h3><p data-start="3392" data-end="3426">User experience is critical. Tips:</p><ul data-start="3427" data-end="3502"><li data-start="3427" data-end="3443"><p data-start="3429" data-end="3443">Keep it simple</p></li><li data-start="3444" data-end="3464"><p data-start="3446" data-end="3464">Focus on usability</p></li><li data-start="3465" data-end="3502"><p data-start="3467" data-end="3502">Use native components when possible</p></li></ul><p data-start="3504" data-end="3553">Figma and Adobe XD are excellent for prototyping.</p><p data-start="3504" data-end="3553"> </p><h3 data-start="3555" data-end="3581">5. Build the App Logic</h3><p data-start="3582" data-end="3597"><strong>For developers:</strong></p><ul data-start="3598" data-end="3654"><li data-start="3598" data-end="3627"><p data-start="3600" data-end="3627">Write reusable code modules</p></li><li data-start="3628" data-end="3654"><p data-start="3630" data-end="3654">Follow MVC/MVVM patterns</p></li></ul><p data-start="3656" data-end="3674"><strong>For no-code users:</strong></p><ul data-start="3675" data-end="3740"><li data-start="3675" data-end="3740"><p data-start="3677" data-end="3740">Use visual logic builders </p></li></ul><p> </p><h3 data-start="3742" data-end="3762">6. Test Your App</h3><p data-start="3763" data-end="3809">Test across devices and screen sizes. Include:</p><ul data-start="3810" data-end="3877"><li data-start="3810" data-end="3830"><p data-start="3812" data-end="3830">Functional testing</p></li><li data-start="3831" data-end="3852"><p data-start="3833" data-end="3852">Performance testing</p></li><li data-start="3853" data-end="3877"><p data-start="3855" data-end="3877">User feedback sessions</p></li></ul><p data-start="3879" data-end="3928">Use tools like Firebase Test Lab or BrowserStack.</p><p data-start="3879" data-end="3928"> </p><h3 data-start="3930" data-end="3958">7. Deploy and Distribute</h3><p data-start="3959" data-end="3970">To publish:</p><ul data-start="3971" data-end="4123"><li data-start="3971" data-end="4036"><p data-start="3973" data-end="4036">Set up a <strong data-start="3982" data-end="4005">Google Play Console</strong> or <strong data-start="4009" data-end="4036">Apple Developer Account</strong></p></li><li data-start="4037" data-end="4066"><p data-start="4039" data-end="4066">Follow app store guidelines</p></li><li data-start="4067" data-end="4103"><p data-start="4069" data-end="4103">Generate signed builds (.aab/.ipa)</p></li><li data-start="4104" data-end="4123"><p data-start="4106" data-end="4123">Submit for review</p></li></ul><p>To be honest; even with a really high-level overview of a development process; there are still number of steps that needs to be taken. If it looks confusing check out <a href="https://goloris.com/">goloris.com. </a>It will handle most the things on behalf of you and save you tons of time.</p><hr data-start="4125" data-end="4128" />								</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-023565d e-flex e-con-boxed e-con e-parent" data-id="023565d" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-c5a2c0f elementor-widget elementor-widget-heading" data-id="c5a2c0f" data-element_type="widget" data-widget_type="heading.default">
					<h3 class="elementor-heading-title elementor-size-default">No Code vs Custom Code: Which Path Should You Take?</h3>				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-ac150e2 e-flex e-con-boxed e-con e-parent" data-id="ac150e2" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-e21d270 elementor-widget elementor-widget-html" data-id="e21d270" data-element_type="widget" data-widget_type="html.default">
					<table border="1" cellpadding="10">
  <thead>
    <tr>
      <th>Criteria</th>
      <th>No Code App Builder</th>
      <th>Custom Code</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Speed</td>
      <td>Fast (hours/days)</td>
      <td>Slower (weeks/months)</td>
    </tr>
    <tr>
      <td>Cost</td>
      <td>Low upfront</td>
      <td>Higher (developer/team costs)</td>
    </tr>
    <tr>
      <td>Flexibility</td>
      <td>Limited to platform features</td>
      <td>Unlimited</td>
    </tr>
    <tr>
      <td>Scalability</td>
      <td>Moderate</td>
      <td>High</td>
    </tr>
    <tr>
      <td>Best For</td>
      <td>MVPs, prototypes, small apps</td>
      <td>Complex, scalable applications</td>
    </tr>
  </tbody>
</table>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-b0f4360 e-flex e-con-boxed e-con e-parent" data-id="b0f4360" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-e59c8b1 elementor-widget elementor-widget-heading" data-id="e59c8b1" data-element_type="widget" data-widget_type="heading.default">
					<h3 class="elementor-heading-title elementor-size-default">Common Mistakes to Avoid</h3>				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-e85938a e-flex e-con-boxed e-con e-parent" data-id="e85938a" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-0d4bfa7 elementor-widget elementor-widget-text-editor" data-id="0d4bfa7" data-element_type="widget" data-widget_type="text-editor.default">
									<ul><li data-start="5456" data-end="5553"><p data-start="5459" data-end="5553"><strong data-start="5459" data-end="5485">Skipping user research</strong><br data-start="5485" data-end="5488" />Building without validating the need can waste time and money.</p></li><li data-start="5555" data-end="5645"><p data-start="5558" data-end="5645"><strong data-start="5558" data-end="5590">Overloading v1 with features</strong><br data-start="5590" data-end="5593" />Focus on core functionality; avoid feature creep.</p></li><li data-start="5647" data-end="5745"><p data-start="5650" data-end="5745"><strong data-start="5650" data-end="5678">Ignoring app performance</strong><br data-start="5678" data-end="5681" />A slow or buggy app will lose users quickly. Test thoroughly.</p></li><li data-start="5747" data-end="5853"><p data-start="5750" data-end="5853"><strong data-start="5750" data-end="5778">Not planning for updates</strong><br data-start="5778" data-end="5781" />Apps aren’t “done” once published—plan for maintenance and iteration.</p></li><li data-start="5855" data-end="5965"><p data-start="5858" data-end="5965"><strong data-start="5858" data-end="5890">Violating app store policies</strong><br data-start="5890" data-end="5893" />Apple and Google have strict review guidelines. Read them beforehand.</p></li></ul>								</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-84b11d3 e-flex e-con-boxed e-con e-parent" data-id="84b11d3" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-ff0f5a8 elementor-widget elementor-widget-heading" data-id="ff0f5a8" data-element_type="widget" data-widget_type="heading.default">
					<h3 class="elementor-heading-title elementor-size-default">Conclusion &amp; Next Steps</h3>				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-c7f3914 e-flex e-con-boxed e-con e-parent" data-id="c7f3914" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-a892bd1 elementor-widget elementor-widget-text-editor" data-id="a892bd1" data-element_type="widget" data-widget_type="text-editor.default">
									<p data-start="6000" data-end="6221"><strong data-start="6000" data-end="6033">Building a mobile application</strong> doesn’t have to be overwhelming. Whether you’re going the traditional coding route or leveraging a powerful <strong data-start="6142" data-end="6165">no code app builder</strong>, the tools and resources are more accessible than ever.</p><p data-start="6223" data-end="6271">Start small, focus on value, and learn by doing.</p><p data-start="6223" data-end="6271"> </p>								</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-73e06f5 e-flex e-con-boxed e-con e-parent" data-id="73e06f5" data-element_type="container">
					<div class="e-con-inner">
					</div>
				</div>
				</div><p>The post <a href="https://blog.goloris.com/building-a-mobile-application-a-beginners-guide-to-getting-started/">How to Build Your First Mobile App</a> first appeared on <a href="https://blog.goloris.com">Build Smarter with No-Code & AI | Proven Tips & Trends by Goloris</a>.</p>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
