<?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>Mobile Application Development - Proven Tips &amp; Trends by Goloris</title>
	<atom:link href="https://blog.goloris.com/category/mobile-application-development/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>Mobile Application Development - 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>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>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>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>
