PageSourceSearch

https://nativebase.io/blogs

html nativebase.io collected 2026-10-03 21:56:17 UTC 248,680 bytes, 1 lines download raw bytes

1<!DOCTYPE html><html data-dpl-id="dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" lang="en" class="hanken_grotesk_119ff062-module__Ll3zRG__variable bricolage_grotesque_e343a7e-module__WPGFWa__variable jetbrains_mono_7f3086f3-module__paa25G__variable"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/017d9bea37084d9b-s.p.41rroleoq1br7.woff2?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/70bc3e132a0a741e-s.p.3t6q91iet4nsy.woff2?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/c47649aa31f9e140-s.p.3lxpqujs87tck.woff2?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/img/nativebase-logo-light.svg?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/><link rel="preload" as="image" href="/img/nativebase-logo-dark.svg?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/><link rel="stylesheet" href="/_next/static/chunks/3nc5abg018na-.css?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/2ecnjif4d7m3y.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/>
1<script src="/_next/static/chunks/2bivkuxymewsr.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" async=""></script>
1<script src="/_next/static/chunks/3j9pm5otqxm82.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" async=""></script>
1<script src="/_next/static/chunks/1mfjqidm5qp0a.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" async=""></script>
1<script src="/_next/static/chunks/turbopack-3o5a_gavs5-9_.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" async=""></script>
1<script src="/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" async=""></script>
1<script src="/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" async=""></script>
1<script src="/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" async=""></script>
1<script src="/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" async=""></script>
1<meta name="next-size-adjust" content=""/><title>Blog | NativeBase</title><meta name="description" content="Guides, changelogs, engineering deep-dives and announcements from the NativeBase team."/><meta name="application-name" content="NativeBase"/><meta name="keywords" content="Open Source,OSS,Component Library,React,React Native,Accessible,Mobile-First,Styled System,ARIA,Consistent,Responsive,Utility Props,Design System"/><link rel="canonical" href="https://nativebase.io/blogs"/><meta name="google-site-verification" content="CrITr8VxlSHTwFPrOKF1iC4Rp00Cm9ndrBAvxBQd6-M"/><meta property="og:title" content="Blog | NativeBase"/><meta property="og:description" content="Guides, changelogs, engineering deep-dives and announcements from the NativeBase team."/><meta property="og:url" content="https://nativebase.io/blogs"/><meta property="og:site_name" content="NativeBase"/><meta property="og:image" content="https://nativebase.io/img/nativebase-og-image.png"/><meta property="og:image:alt" content="Guides, changelogs, engineering deep-dives and announcements from the NativeBase team."/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@nativebase"/><meta name="twitter:title" content="Blog | NativeBase"/><meta name="twitter:description" content="Guides, changelogs, engineering deep-dives and announcements from the NativeBase team."/><meta name="twitter:image" content="https://nativebase.io/img/nativebase-og-image.png"/><link rel="shortcut icon" href="/img/nativebase-logo.ico"/><link rel="icon" href="/favicon.ico?favicon.2vob68tjqpejf.ico?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" sizes="256x256" type="image/x-icon"/><link rel="icon" href="/img/nativebase-logo.svg" type="image/svg+xml"/><link rel="icon" href="/img/nativebase-logo.ico" sizes="any"/><link rel="apple-touch-icon" href="/img/nativebase-logo.png"/>
1<script src="/_next/static/chunks/0cz1d0mv5g_q7.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" noModule=""></script>
1</head><body class="min-h-screen flex flex-col bg-background text-foreground antialiased"><div hidden=""><!--$--><!--/$--></div>
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://nativebase.io/#organization","name":"NativeBase","url":"https://nativebase.io","logo":"https://nativebase.io/img/nativebase-logo.png","sameAs":["https://x.com/gluestack","https://github.com/GeekyAnts/NativeBase","https://www.linkedin.com/company/gluestackio/","https://www.youtube.com/@gluestack"]},{"@type":"WebSite","@id":"https://nativebase.io/#website","url":"https://nativebase.io","name":"NativeBase","description":"NativeBase 3.0 lets you build consistently across android, iOS & web. It is inspired by the Styled System and is accessible, highly themeable, and responsive.","publisher":{"@id":"https://nativebase.io/#organization"}}]}</script>
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","dark",null,["light","dark"],null,false,true)</script>
1<header class="sticky top-0 z-40 w-full border-b border-border/60 bg-background/80 backdrop-blur-md"><div class="container-page flex h-16 items-center justify-between gap-4"><div class="flex items-center gap-6"><div class="flex items-center gap-2.5"><a class="inline-flex items-center py-2" aria-label="NativeBase home" href="/"><img alt="NativeBase Logo" width="160" height="43" decoding="async" data-nimg="1" class="inline w-40 dark:hidden" style="color:transparent" src="/img/nativebase-logo-light.svg?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/><img alt="NativeBase Logo" width="160" height="43" decoding="async" data-nimg="1" class="hidden w-40 dark:inline" style="color:transparent" src="/img/nativebase-logo-dark.svg?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></a><span class="hidden rounded-full border border-border bg-muted/60 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground sm:inline">Legacy</span><span class="hidden text-sm font-medium text-muted-foreground lg:inline">(<a href="https://gluestack.io/?utm_source=nativebase-header&amp;utm_medium=referral&amp;utm_campaign=header-gluestack" class="underline decoration-brand-400 underline-offset-2 hover:text-brand-600">now gluestack</a>)</span></div><button type="button" id="radix-_R_15lb_" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="dropdown-menu-trigger" class="hidden items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-brand-600 lg:flex">3.4.x <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-4" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><nav class="hidden items-center gap-6 lg:flex"><a href="https://docs.nativebase.io?utm_source=HomePage&amp;utm_medium=header&amp;utm_campaign=NativeBase_3" class="text-sm text-foreground/80 transition-colors hover:text-brand-600">Docs</a><button type="button" id="radix-_R_19lb_" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="dropdown-menu-trigger" class="flex items-center gap-1 text-sm text-foreground/80 transition-colors hover:text-brand-600">Resources <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-4" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><a href="https://codesandbox.io/s/nativebase-fld24" class="text-sm text-foreground/80 transition-colors hover:text-brand-600">Try</a><div class="flex items-center gap-4 text-muted-foreground"><a href="https://www.figma.com/@nativebase?utm_source=HomePage&amp;utm_medium=header&amp;utm_campaign=NativeBase_figma" aria-label="Figma" title="NativeBase for Designers" target="_blank" rel="noopener noreferrer" class="opacity-80 transition-opacity hover:opacity-100"><img alt="Figma" loading="lazy" width="16" height="24" decoding="async" data-nimg="1" class="h-5 w-auto" style="color:transparent" src="/img/figma-logo.svg?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></a><a href="https://discord.com/invite/TSgCw2UPmb" aria-label="Discord" target="_blank" rel="noopener noreferrer" class="hover:text-brand-600"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-5"><path d="M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 0 0-.0785-.037 19.7363 19.7363 0 0 0-4.8852 1.515.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg></a><a href="https://github.com/GeekyAnts/nativebase" aria-label="GitHub" target="_blank" rel="noopener noreferrer" class="hover:text-brand-600"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-5"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><a href="https://gluestack.io/experts" data-slot="button" data-variant="default" data-size="sm" class="inline-flex shrink-0 items-center justify-center text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;
1size-&#x27;])]:size-4 bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1.5 rounded-md px-3 has-[&gt;svg]:px-2.5">Hire React Native Experts</a><button data-slot="button" data-variant="ghost" data-size="icon" class="inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9" aria-label="Toggle theme"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon size-5" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg></button></nav><div class="flex items-center gap-1 lg:hidden"><button data-slot="button" data-variant="ghost" data-size="icon" class="inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9" aria-label="Toggle theme"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon size-5" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg></button><button data-slot="sheet-trigger" data-variant="ghost" data-size="icon" class="inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9" aria-label="Open menu" type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu size-6" aria-hidden="true"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></button></div></div></header><main class="flex-1"><div class="border-b border-border/60 bg-muted/30"><div class="container-page py-16 sm:py-20"><p class="mb-3 text-sm font-semibold uppercase tracking-wide text-brand-600">Blog</p><h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl">The NativeBase Blog</h1><p class="mt-4 max-w-2xl text-lg text-muted-foreground">Guides, changelogs, engineering deep-dives and announcements from the team.</p></div></div><div class="container-page py-12"><div class="flex flex-wrap gap-2"><a class="rounded-full border px-4 py-1.5 text-sm transition-colors border-brand-400 bg-brand-600/10 text-brand-600" href="/blogs">All</a><a class="rounded-full border px-4 py-1.5 text-sm transition-colors border-border text-muted-foreground hover:border-brand-400 hover:text-brand-600" href="/blogs/tag/announcements">Announcements</a><a class="rounded-full border px-4 py-1.5 text-sm transition-colors border-border text-muted-foreground hover:border-brand-400 hover:text-brand-600" href="/blogs/tag/changelog">Changelog</a><a class="rounded-full border px-4 py-1.5 text-sm transition-colors border-border text-muted-foreground hover:border-brand-400 hover:text-brand-600" href="/blogs/tag/design">Design</a><a class="rounded-full border px-4 py-1.5 text-sm transition-colors border-border text-muted-foreground hover:border-brand-400 hover:text-brand-600" href="/blogs/tag/clone-experiment">Clone Experiments</a><a class="rounded-full border px-4 py-1.5 text-sm transition-colors border-border text-muted-foreground hover:border-brand-400 hover:text-brand-600" href="/blogs/tag/engineering">Engineering</a></div><div class="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-3"><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/why-we-built-gluestack-ui"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><div class="flex h-full items-center justify-center px-6 text-center text-lg font-semibold text-brand-700/70 dark:text-brand-300/70">Why we built gluestack-ui</div></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/why-we-built-gluestack-ui">Why we built gluestack-ui</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">gluestack-ui v1.0 launched a month back and crossed 1000+ stars on GitHub. Here&#x27;s why we built it and how it compares to its predecessor, NativeBase.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Sanket Sahu</span><span>·</span><span>December 12, 2023</span><span>·</span><span>6 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/road-ahead-with-gluestack-ui"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Road Ahead with gluestack-ui: The Successor of NativeBase" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Froad-ahead-with-gluestack-ui.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/road-ahead-with-gluestack-ui">Road Ahead with gluestack-ui: The Successor of NativeBase</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">NativeBase is being discontinued in favor of gluestack-ui, a complete rebuild addressing performance, maintainability, and bundle size. This post explains the rationale, what gluestack-ui offers, and what it means for existing users.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Sanket Sahu</span><span>·</span><span>July 24, 2023</span><span>·</span><span>4 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/the-future-of-nativebase"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="The future of NativeBase: March 2023" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fthe-future-of-nativebase.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/the-future-of-nativebase">The future of NativeBase: March 2023</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">An update on the state of NativeBase v3, its strengths and performance challenges, and the plan to split the library into dank.style and the new gluestack-ui components.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Sanket Sahu</span><span>·</span><span>March 1, 2023</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/the-present-and-future-of-nativebase"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><div class="flex h-full items-center justify-center px-6 text-center text-lg font-semibold text-brand-700/70 dark:text-brand-300/70">The Present and Future of NativeBase</div></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/the-present-and-future-of-nativebase">The Present and Future of NativeBase</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A look at how NativeBase evolved through its versions, where it stands today with growing adoption, and the roadmap toward spec-based design systems and true write-once-deploy-everywhere development.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Sanket Sahu</span><span>·</span><span>October 3, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/september-newsletter"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase | September Scoop" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fseptember-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/september-newsletter">NativeBase | September Scoop</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">September highlights from the NativeBase team, including conference talks at React India and Devfest Bangalore, a performance-focused 3.5.0 release in progress, and new open-source contributors.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">NativeBase Team</span><span>·</span><span>September 28, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/nativebase-moti-experiment"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase X Moti" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fnativebase-moti-experiment.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/engineering"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Engineering</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/nativebase-moti-experiment">NativeBase X Moti</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">An experiment exploring how NativeBase and Moti work together to animate UI components, using NativeBase Factory and the useStyledSystemPropsResolver hook to animate padding on a button.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Sankalp Pandey</span><span>·</span><span>September 8, 2022</span><span>·</span><span>5 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/july-newsletter"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase | July Scoop" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fjuly-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/july-newsletter">NativeBase | July Scoop</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">July highlights from NativeBase, including the React India conference announcement, the alpha release of the babel-plugin performance fix, the first Design System meetup, and new tutorials and blogs.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">NativeBase Team</span><span>·</span><span>August 22, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/custom-fonts"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><div class="flex h-full items-center justify-center px-6 text-center text-lg font-semibold text-brand-700/70 dark:text-brand-300/70">Custom Fonts with NativeBase</div></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/engineering"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Engineering</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/custom-fonts">Custom Fonts with NativeBase</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A complete guide to loading and applying custom fonts in NativeBase across React Native, Expo, and Next.js projects, including how to extend the theme&#x27;s fontConfig and fonts objects.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Rohit Singh</span><span>·</span><span>August 19, 2022</span><span>·</span><span>10 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/styling-nativebase-theme-based-on-color-mode"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Styling NativeBase theme based on color mode" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fstyling-nativebase-theme-based-on-color-mode.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/engineering"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Engineering</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/styling-nativebase-theme-based-on-color-mode">Styling NativeBase theme based on color mode</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A complete guide to building light and dark color modes in React Native apps with NativeBase, covering initial color mode, system color mode, the useColorMode and useColorModeValue hooks, _light and _dark pseudo props, toggling, and persistence.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Ankit Tailor</span><span>·</span><span>August 10, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/june-newsletter"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase | June Scoop" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fjune-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/june-newsletter">NativeBase | June Scoop</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">June recap from NativeBase covering the HackWithNativeBase hackathon, appearances at App.js Conference, React Summit, and React Day Bangalore, plus the launch of the Component of the Week video series.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">NativeBase Team</span><span>·</span><span>July 20, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/bridging-design-and-development-with-figma"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Bridging Design and Development with Figma" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fbridging-design-and-development-with-figma.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/design"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Design</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/bridging-design-and-development-with-figma">Bridging Design and Development with Figma</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">How designers and developers can collaborate more effectively using Figma, with practical tips on syncing early, extracting code, stacking elements, and leveraging design tokens.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Sony Gupta</span><span>·</span><span>July 15, 2022</span><span>·</span><span>10 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/nativebase-chakraui-comparison"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase Vs Chakra UI: A comparison" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fnativebase-chakraui-comparison.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/engineering"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Engineering</span></a></div><h3 class="text-lg font-semibold leading-snug">
1<a class="hover:text-brand-600" href="/blogs/nativebase-chakraui-comparison">NativeBase Vs Chakra UI: A comparison</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A detailed comparison of NativeBase and Chakra UI, covering their similarities, differences, and guidance on when to choose each library for your project.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Sankalp Pandey</span><span>·</span><span>July 15, 2022</span><span>·</span><span>9 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/may-newsletter"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase | May Scoop" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fmay-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/may-newsletter">NativeBase | May Scoop</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A productive May for NativeBase: HackWithNativeBase goes live, v3.4.6 ships with fixes, the community crosses 4,000+ Twitter followers, and Discord support gets revamped.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">NativeBase Team</span><span>·</span><span>June 16, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/hack-with-nativebase"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><div class="flex h-full items-center justify-center px-6 text-center text-lg font-semibold text-brand-700/70 dark:text-brand-300/70">Announcing HackWithNativeBase</div></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/hack-with-nativebase">Announcing HackWithNativeBase</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">HackWithNativeBase is a hackathon for React and React Native developers to build cross-platform apps from a single codebase, with a grand prize pool and a Hack Day in Bengaluru.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">NativeBase Team</span><span>·</span><span>June 10, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/april-newsletter"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase | April Scoop" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fapril-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/april-newsletter">NativeBase | April Scoop</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">April highlights from NativeBase: the v3.4 release with updated Figma kit, new community projects on Made with NativeBase, the Startup+ Design Trial Kit, and the return of in-person meetups.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">NativeBase Team</span><span>·</span><span>May 17, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/nativebase-v3.4-release"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase v3.4 Changelog" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fnativebase-v3.4-release.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/changelog"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Changelog</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/nativebase-v3.4-release">NativeBase v3.4 Changelog</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">An overview of NativeBase v3.4, featuring theme decoupling, improved typing, multiple theme switching, APCA-tested colors, semantic colors, and a refreshed Figma design kit.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Rohit Singh</span><span>·</span><span>April 29, 2022</span><span>·</span><span>8 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/responsive-login-payment-app"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Clone Experiment #4: Responsive login and checkout flow app for web &amp; mobile" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fresponsive-login-payment-app.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/clone-experiment"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Clone Experiments</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/responsive-login-payment-app">Clone Experiment #4: Responsive login and checkout flow app for web &amp; mobile</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A Nykaa-inspired login and checkout flow built with Next.js and NativeBase v3 to test c
1omponent versatility and responsive design across web and mobile.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Sankalp Pandey</span><span>·</span><span>April 26, 2022</span><span>·</span><span>6 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/march-newsletter"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase | March Scoop" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fmarch-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/march-newsletter">NativeBase | March Scoop</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">March news from NativeBase: a sneak peek at the DSX design system creator, the Roofinder flatmate project, Startup+ admin and e-commerce guides, and a Raycast extension for browsing docs by version.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">NativeBase Team</span><span>·</span><span>April 14, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/customising-components-in-nativebase"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Customising components in NativeBase" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fcustomising-components-in-nativebase.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/engineering"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Engineering</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/customising-components-in-nativebase">Customising components in NativeBase</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A practical guide to customising NativeBase components, covering the four component theme properties (baseStyle, variants, sizes, defaultProps), the types of pseudo props, and how pseudo prop specificity works when styling a Button.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Mohd Rehman Baig</span><span>·</span><span>March 21, 2022</span><span>·</span><span>8 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/february-newsletter"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase | February Scoop" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Ffebruary-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/february-newsletter">NativeBase | February Scoop</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">February recap from NativeBase: new and improved docs rebuilt with NativeBase, the launch of Made With NativeBase, a conference talk on building a template engine, the roadmap, and the v3.3.6 release.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">NativeBase Team</span><span>·</span><span>March 17, 2022</span><span>·</span><span>4 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/january-newsletter"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase | January Scoop" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fjanuary-newsletter.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/january-newsletter">NativeBase | January Scoop</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">January highlights from NativeBase: the Design Kit launch, the first design meetup at GeekyAnts, real-time Notion-powered blog updates, a Twitter Spaces clone webinar, clone experiments, and the v3.3.4 release.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">NativeBase Team</span><span>·</span><span>February 24, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/taxi-clone-app"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Clone Experiment #3: Accessible Taxi Booking app for web and mobile" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Ftaxi-clone-app.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/clone-experiment"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Clone Experiments</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/taxi-clone-app">Clone Experiment #3: Accessible Taxi Booking app for web and mobile</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A cross-platform Uber-inspired taxi booking app built with NativeBase and Expo, tackling unified maps and responsive sidebars from a single codebase.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Amar Somani</span><span>·</span><span>February 18, 2022</span><span>·</span><span>8 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/how-to-add-animations-to-your-nativebase-app"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="How to add animations to your NativeBase App" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fhow-to-add-animations-to-your-nativebase-app.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/engineering"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Engineering</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/how-to-add-animations-to-your-nativebase-app">How to add animations to your NativeBase App</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A tutorial on enhancing a NativeBase Todo app with React Native Reanimated, building three animations: a button rotation effect, a background color transition on task completion, and a swipe-to-remove gesture.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Sankalp Pandey</span><span>·</span><span>February 9, 2022</span><span>·</span><span>7 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/the-only-react-and-react-native-template-you-will-ever-need"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="The only React and React Native Template you&#x27;ll ever need" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fthe-only-react-and-react-native-template-you-will-ever-need.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/engineering"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focu
1s-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Engineering</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/the-only-react-and-react-native-template-you-will-ever-need">The only React and React Native Template you&#x27;ll ever need</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">An introduction to NativeBase Startup+, a bundle of 100+ production-ready React and React Native screens that helps teams avoid rebuilding generic screens and ship web and mobile apps faster.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Gaurav Guha</span><span>·</span><span>February 9, 2022</span><span>·</span><span>5 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/online-ticket-booking-universal-app"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Clone Experiment #2: Online Ticket Booking universal app for web &amp; mobile using React Native" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fonline-ticket-booking-universal-app.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/clone-experiment"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Clone Experiments</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/online-ticket-booking-universal-app">Clone Experiment #2: Online Ticket Booking universal app for web &amp; mobile using React Native</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A MakeMyTrip-inspired hotel and flight checkout flow built with Next.js and NativeBase v3, exploring animations, tabs, and responsive layouts.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Abhineet Kumar</span><span>·</span><span>February 2, 2022</span><span>·</span><span>5 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0">
1<a class="block" href="/blogs/building-twitter-space-clone-with-nativebase-and-100ms"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Building a Twitter Spaces Clone with NativeBase and 100ms" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-space-clone-with-nativebase-and-100ms.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-space-clone-with-nativebase-and-100ms.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-space-clone-with-nativebase-and-100ms.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-sp
1ace-clone-with-nativebase-and-100ms.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-space-clone-with-nativebase-and-100ms.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-space-clone-with-nativebase-and-100ms.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-space-clone-with-nativebase-and-100ms.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-space-clone-with-nativebase-and-100ms.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-space-clone-with-nativebase-and-100ms.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-space-clone-with-nativebase-and-100ms.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fbuilding-twitter-sp
1ace-clone-with-nativebase-and-100ms.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/clone-experiment"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Clone Experiments</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/building-twitter-space-clone-with-nativebase-and-100ms">Building a Twitter Spaces Clone with NativeBase and 100ms</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A workshop companion guide to building a Twitter Spaces clone in React Native, combining NativeBase for UI and the 100ms SDK for live audio rooms.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Vipul Bhardwaj</span><span>·</span><span>January 25, 2022</span><span>·</span><span>5 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/clone-experiment-food-ordering-app"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Clone Experiment: Food Ordering web &amp; mobile app using a single codebase" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fclone-experiment-food-ordering-app.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/clone-experiment"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focu
1s-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Clone Experiments</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/clone-experiment-food-ordering-app">Clone Experiment: Food Ordering web &amp; mobile app using a single codebase</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A food ordering app inspired by popular delivery platforms, built once with NativeBase and Next.js to run across web and mobile from a single codebase.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Eshu Kumar</span><span>·</span><span>January 13, 2022</span><span>·</span><span>3 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/nativebase-clone-experiments"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase Clone Experiments" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fnativebase-clone-experiments.png&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/clone-experiment"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Clone Experiments</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/nativebase-clone-experiments">NativeBase Clone Experiments</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">An overview of the NativeBase Clone Experiments series, where developers recreate famous app experiences using a single codebase for web and mobile.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Sanket Sahu</span><span>·</span><span>January 13, 2022</span><span>·</span><span>4 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/nativebase-meets-figma"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="NativeBase meets Figma" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fnativebase-meets-figma.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/design"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Design</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/nativebase-meets-figma">NativeBase meets Figma</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">An introduction to the NativeBase Design Kit for Figma, bringing design and development together with 29 components and over 780 variants that match the NativeBase library.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Tanisha Biswas</span><span>·</span><span>December 27, 2021</span><span>·</span><span>5 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/using-nativebase-v3-the-right-way"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Using NativeBase v3 the Right Way" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fusing-nativebase-v3-the-right-way.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a><div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/engineering"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Engineering</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/using-nativebase-v3-the-right-way">Using NativeBase v3 the Right Way</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">A practical introductory guide to getting the most out of NativeBase v3, covering project setup, utility props, single-source imports, pseudo props, hooks, and strict mode.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Rohit Singh</span><span>·</span><span>October 17, 2021</span><span>·</span><span>5 min read</span></div></div></div><div data-slot="card" class="gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0"><a class="block" href="/blogs/announcing-nativebase"><div class="relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20"><img alt="Announcing NativeBase" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-300 group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 33vw" srcSet="/_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=256&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 256w, /_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=384&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 384w, /_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=640&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 640w, /_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=750&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 750w, /_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=828&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 828w, /_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=1080&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1080w, /_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=1200&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1200w, /_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=1920&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1920w, /_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=2048&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2048w, /_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 3840w" src="/_next/image?url=%2Fimg%2Fblog%2Fannouncing-nativebase.jpg&amp;w=3840&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></div></a>
1<div data-slot="card-content" class="flex flex-1 flex-col p-6"><div class="mb-3 flex flex-wrap gap-2"><a href="/blogs/tag/announcements"><span data-slot="badge" data-variant="secondary" class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-3 bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 hover:bg-brand-600/10">Announcements</span></a></div><h3 class="text-lg font-semibold leading-snug"><a class="hover:text-brand-600" href="/blogs/announcing-nativebase">Announcing NativeBase</a></h3><p class="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">Announcing NativeBase 3.0, a utility-first, themable, and accessible component library for building universal React and React Native apps across web and mobile.</p><div class="mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground"><span class="font-medium text-foreground">Siri Kaliparambil</span><span>·</span><span>September 27, 2021</span><span>·</span><span>5 min read</span></div></div></div></div><div class="mt-16"><div class="grid gap-4 sm:grid-cols-2"><a href="https://geekyants.com/hire-react-native-developers?utm_source=nativebase&amp;utm_medium=blog&amp;utm_campaign=blog-cta" target="_blank" rel="noopener noreferrer" class="group flex flex-col rounded-2xl border border-border bg-card p-6 transition-colors hover:border-brand-300"><div class="flex items-center gap-3"><span class="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted ring-1 ring-border"><img alt="GeekyAnts" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="size-full object-cover" style="color:transparent" srcSet="/_next/image?url=%2Fimg%2Fgeekyants-logo.png&amp;w=48&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1x, /_next/image?url=%2Fimg%2Fgeekyants-logo.png&amp;w=96&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2x" src="/_next/image?url=%2Fimg%2Fgeekyants-logo.png&amp;w=96&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></span><span class="text-sm font-semibold uppercase tracking-[0.12em] text-brand-600">GeekyAnts</span></div><h3 class="mt-4 text-lg font-semibold">Need React Native experts?</h3><p class="mt-1 flex-1 text-sm text-muted-foreground">Hire the team behind NativeBase to design and build your next app.</p><span class="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-brand-600">Hire experts<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></a><a href="https://rapidnative.com/?utm_source=nativebase&amp;utm_medium=blog&amp;utm_campaign=blog-cta" target="_blank" rel="noopener noreferrer" class="group flex flex-col rounded-2xl border border-border bg-card p-6 transition-colors hover:border-brand-300"><div class="flex items-center gap-3"><span class="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted ring-1 ring-border"><img alt="RapidNative" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="size-full object-cover" style="color:transparent" srcSet="/_next/image?url=%2Fimg%2Fproducts%2Frapidnative.png&amp;w=48&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 1x, /_next/image?url=%2Fimg%2Fproducts%2Frapidnative.png&amp;w=96&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo 2x" src="/_next/image?url=%2Fimg%2Fproducts%2Frapidnative.png&amp;w=96&amp;q=75&amp;dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></span><span class="text-sm font-semibold uppercase tracking-[0.12em] text-brand-600">RapidNative</span></div><h3 class="mt-4 text-lg font-semibold">Vibecode your mobile app</h3><p class="mt-1 flex-1 text-sm text-muted-foreground">Describe it, build it, ship it. Turn a prompt into a React Native app with AI.</p><span class="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-brand-600">Try RapidNative<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></a></div></div></div><!--$--><!--/$--></main><footer class="border-t border-border/60 bg-muted/30"><div class="container-page py-14"><div class="grid gap-10 md:grid-cols-2 lg:grid-cols-5"><div class="lg:col-span-2"><a class="inline-flex items-center py-2" aria-label="NativeBase home" href="/"><img alt="NativeBase Logo" width="160" height="43" decoding="async" data-nimg="1" class="inline w-40 dark:hidden" style="color:transparent" src="/img/nativebase-logo-light.svg?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/><img alt="NativeBase Logo" width="160" height="43" decoding="async" data-nimg="1" class="hidden w-40 dark:inline" style="color:transparent" src="/img/nativebase-logo-dark.svg?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo"/></a><p class="mt-4 max-w-xs text-sm text-muted-foreground">Universal, accessible component library for React &amp; React Native. NativeBase is now<!-- --> <a href="https://gluestack.io/?utm_source=nativebase-header&amp;utm_medium=referral&amp;utm_campaign=header-gluestack" class="font-medium text-brand-600 hover:underline">gluestack</a>.</p><div class="mt-6 flex items-center gap-4 text-muted-foreground"><a href="https://x.com/gluestack" aria-label="X" target="_blank" rel="noopener noreferrer" class="hover:text-brand-600"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-5"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z"></path></svg></a><a href="https://www.linkedin.com/company/gluestackio/" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer" class="hover:text-brand-600"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-5"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28ZM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14ZM7.12 20.45H3.56V9h3.56v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0Z"></path></svg></a><a href="https://www.instagram.com/gluestackio/" aria-label="Instagram" target="_blank" rel="noopener noreferrer" class="hover:text-brand-600"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-5"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16ZM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.12 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.12.66.66 1.33 1.08 2.12 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 
112 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.86 5.86 0 0 0 2.12-1.38c.66-.66 1.08-1.33 1.38-2.12.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.86 5.86 0 0 0-1.38-2.12A5.86 5.86 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0Zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.41-10.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88Z"></path></svg></a><a href="https://www.youtube.com/@gluestack" aria-label="YouTube" target="_blank" rel="noopener noreferrer" class="hover:text-brand-600"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-5"><path d="M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2C0 8.07 0 12 0 12s0 3.93.5 5.8a3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.8ZM9.6 15.6V8.4l6.27 3.6L9.6 15.6Z"></path></svg></a><a href="https://github.com/GeekyAnts/NativeBase" aria-label="GitHub" target="_blank" rel="noopener noreferrer" class="hover:text-brand-600"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-5"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div></div><div><h3 class="text-sm font-semibold text-foreground">Getting Started</h3><ul class="mt-4 space-y-3"><li><a href="https://docs.nativebase.io?utm_source=HomePage&amp;utm_medium=footer&amp;utm_campaign=NativeBase_3" class="text-sm text-muted-foreground transition-colors hover:text-brand-600" target="_blank" rel="noopener noreferrer">Introduction</a></li><li><a href="https://docs.nativebase.io/todo-list?utm_source=HomePage&amp;utm_medium=footer&amp;utm_campaign=NativeBase_3" class="text-sm text-muted-foreground transition-colors hover:text-brand-600" target="_blank" rel="noopener noreferrer">Examples</a></li><li><a class="text-sm text-muted-foreground transition-colors hover:text-brand-600" href="/blogs">Blogs</a></li><li><a href="https://github.com/GeekyAnts/NativeBase/blob/master/CONTRIBUTING.md" class="text-sm text-muted-foreground transition-colors hover:text-brand-600" target="_blank" rel="noopener noreferrer">Contribution Guidelines</a></li></ul></div><div><h3 class="text-sm font-semibold text-foreground">Products</h3><ul class="mt-4 space-y-3"><li><a href="https://gluestack.io/?utm_source=nativebase-products&amp;utm_medium=referral&amp;utm_campaign=landing-footer" class="text-sm text-muted-foreground transition-colors hover:text-brand-600" target="_blank" rel="noopener noreferrer">gluestack</a></li><li><a href="https://rapidnative.com/?utm_source=nativebase-products&amp;utm_medium=referral&amp;utm_campaign=landing-footer" class="text-sm text-muted-foreground transition-colors hover:text-brand-600" target="_blank" rel="noopener noreferrer">RapidNative</a></li><li><a href="https://applighter.com/?utm_source=nativebase-products&amp;utm_medium=referral&amp;utm_campaign=landing-footer" class="text-sm text-muted-foreground transition-colors hover:text-brand-600" target="_blank" rel="noopener noreferrer">AppLighter</a></li><li><a href="https://geeklego.io/?utm_source=nativebase-products&amp;utm_medium=referral&amp;utm_campaign=landing-footer" class="text-sm text-muted-foreground transition-colors hover:text-brand-600" target="_blank" rel="noopener noreferrer">GeekLego</a></li><li><a href="https://applaunchk.it/?utm_source=nativebase-products&amp;utm_medium=referral&amp;utm_campaign=landing-footer" class="text-sm text-muted-foreground transition-colors hover:text-brand-600" target="_blank" rel="noopener noreferrer">AppLaunchKit</a></li><li><a href="https://startup.nativebase.io/" class="text-sm text-muted-foreground transition-colors hover:text-brand-600" target="_blank" rel="noopener noreferrer">NativeBase Startup+</a></li></ul></div><div><h3 class="text-sm font-semibold text-foreground">More</h3><ul class="mt-4 space-y-3"><li><a class="text-sm text-muted-foreground transition-colors hover:text-brand-600" href="/privacy-policy">Privacy Policy</a></li><li><a class="text-sm text-muted-foreground transition-colors hover:text-brand-600" href="/cookie-policy">Cookie Policy</a></li><li><a class="text-sm text-muted-foreground transition-colors hover:text-brand-600" href="/nativebase-for-enterprise">For Enterprise</a></li></ul></div></div><div class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-border/60 pt-8 sm:flex-row"><p class="text-sm text-muted-foreground">Copyright © <!-- -->2026<!-- --> NativeBase</p>
1<a href="https://geekyants.com/?utm_source=RnD&amp;utm_medium=Landing_Page&amp;utm_campaign=NativeBase_3" target="_blank" rel="noopener noreferrer" class="text-sm text-muted-foreground hover:text-brand-600">Built with ❤️ at GeekyAnts.</a></div></div></footer>
1<script src="/_next/static/chunks/2ecnjif4d7m3y.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo" id="_R_" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[89554,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"ThemeProvider\"]\n3:I[69342,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"Navbar\"]\n4:I[39756,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"default\"]\n5:I[37457,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"default\"]\n6:I[22016,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"default\",1]\n:HL[\"/_next/static/chunks/3nc5abg018na-.css?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"style\"]\n:HL[\"/_next/static/media/017d9bea37084d9b-s.p.41rroleoq1br7.woff2?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/70bc3e132a0a741e-s.p.3t6q91iet4nsy.woff2?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/c47649aa31f9e140-s.p.3lxpqujs87tck.woff2?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
1<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"blogs\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blogs\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/3nc5abg018na-.css?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"className\":\"hanken_grotesk_119ff062-module__Ll3zRG__variable bricolage_grotesque_e343a7e-module__WPGFWa__variable jetbrains_mono_7f3086f3-module__paa25G__variable\",\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-screen flex flex-col bg-background text-foreground antialiased\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@graph\\\":[{\\\"@type\\\":\\\"Organization\\\",\\\"@id\\\":\\\"https://nativebase.io/#organization\\\",\\\"name\\\":\\\"NativeBase\\\",\\\"url\\\":\\\"https://nativebase.io\\\",\\\"logo\\\":\\\"https://nativebase.io/img/nativebase-logo.png\\\",\\\"sameAs\\\":[\\\"https://x.com/gluestack\\\",\\\"https://github.com/GeekyAnts/NativeBase\\\",\\\"https://www.linkedin.com/company/gluestackio/\\\",\\\"https://www.youtube.com/@gluestack\\\"]},{\\\"@type\\\":\\\"WebSite\\\",\\\"@id\\\":\\\"https://nativebase.io/#website\\\",\\\"url\\\":\\\"https://nativebase.io\\\",\\\"name\\\":\\\"NativeBase\\\",\\\"description\\\":\\\"NativeBase 3.0 lets you build consistently across android, iOS \u0026 web. It is inspired by the Styled System and is accessible, highly themeable, and responsive.\\\",\\\"publisher\\\":{\\\"@id\\\":\\\"https://nativebase.io/#organization\\\"}}]}\"}}],[\"$\",\"$L2\",null,{\"attribute\":\"class\",\"defaultTheme\":\"dark\",\"enableSystem\":false,\"disableTransitionOnChange\":true,\"children\":[[\"$\",\"$L3\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"container-page flex min-h-[60vh] flex-col items-center justify-center text-center\",\"children\":[[\"$\",\"p\",null,{\"className\":\"brand-gradient-text text-7xl font-extrabold\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"mt-4 text-2xl font-bold\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 max-w-md text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has moved.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex gap-3\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/\",\"children\":\"Back home\",\"data-slot\":\"button\",\"data-variant\":\"default\",\"data-size\":\"default\",\"className\":\"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026_svg]:pointer-events-none [\u0026_svg]:shrink-0 [\u0026_svg:not([class*='size-'])]:size-4 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L6\",null,{\"href\":\"/blogs\",\"children\":\"Read the blog\",\"data-slot\":\"button\",\"data-variant\":\"outline\",\"data-size\":\"default\",\"className\":\"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026_svg]:pointer-events-none [\u0026_svg]:shrink-0 [\u0026_svg:not([class*='size-'])]:size-4 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],\"$L7\"]}]]}]}]]}],{\"children\":[\"$L8\",{\"children\":[\"$L9\",{}
1,null,false,null]},null,false,\"$@a\"]},null,false,null],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[\"$Ld\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\"}\n"])</script>
1<script>self.__next_f.push([1,"e:I[5500,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"Image\"]\n39:I[97367,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"ViewportBoundary\"]\n3b:I[97367,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"MetadataBoundary\"]\n3c:\"$Sreact.suspense\"\nf:T4fc,M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16ZM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.12 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.12.66.66 1.33 1.08 2.12 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.86 5.86 0 0 0 2.12-1.38c.66-.66 1.08-1.33 1.38-2.12.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.86 5.86 0 0 0-1.38-2.12A5.86 5.86 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0Zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.41-10.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88Z"])</script>
1<script>self.__next_f.push([1,"7:[\"$\",\"footer\",null,{\"className\":\"border-t border-border/60 bg-muted/30\",\"children\":[\"$\",\"div\",null,{\"className\":\"container-page py-14\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid gap-10 md:grid-cols-2 lg:grid-cols-5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"lg:col-span-2\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/\",\"className\":\"inline-flex items-center py-2\",\"aria-label\":\"NativeBase home\",\"children\":[[\"$\",\"$Le\",null,{\"src\":\"/img/nativebase-logo-light.svg\",\"alt\":\"NativeBase Logo\",\"width\":160,\"height\":43,\"priority\":true,\"className\":\"inline w-40 dark:hidden\"}],[\"$\",\"$Le\",null,{\"src\":\"/img/nativebase-logo-dark.svg\",\"alt\":\"NativeBase Logo\",\"width\":160,\"height\":43,\"priority\":true,\"className\":\"hidden w-40 dark:inline\"}]]}],[\"$\",\"p\",null,{\"className\":\"mt-4 max-w-xs text-sm text-muted-foreground\",\"children\":[\"Universal, accessible component library for React \u0026 React Native. NativeBase is now\",\" \",[\"$\",\"a\",null,{\"href\":\"https://gluestack.io/?utm_source=nativebase-header\u0026utm_medium=referral\u0026utm_campaign=header-gluestack\",\"className\":\"font-medium text-brand-600 hover:underline\",\"children\":\"gluestack\"}],\".\"]}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex items-center gap-4 text-muted-foreground\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://x.com/gluestack\",\"aria-label\":\"X\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-brand-600\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":true,\"className\":\"size-5\",\"children\":[\"$\",\"path\",null,{\"d\":\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z\"}]}]}],[\"$\",\"a\",null,{\"href\":\"https://www.linkedin.com/company/gluestackio/\",\"aria-label\":\"LinkedIn\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-brand-600\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":true,\"className\":\"size-5\",\"children\":[\"$\",\"path\",null,{\"d\":\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28ZM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14ZM7.12 20.45H3.56V9h3.56v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0Z\"}]}]}],[\"$\",\"a\",null,{\"href\":\"https://www.instagram.com/gluestackio/\",\"aria-label\":\"Instagram\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-brand-600\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":true,\"className\":\"size-5\",\"children\":[\"$\",\"path\",null,{\"d\":\"$f\"}]}]}],\"$L10\",\"$L11\"]}]]}],[\"$L12\",\"$L13\",\"$L14\"]]}],\"$L15\"]}]}]\n"])</script>
1<script>self.__next_f.push([1,"8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"9:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"div\",null,{\"className\":\"border-b border-border/60 bg-muted/30\",\"children\":[\"$\",\"div\",null,{\"className\":\"container-page py-16 sm:py-20\",\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-3 text-sm font-semibold uppercase tracking-wide text-brand-600\",\"children\":\"Blog\"}],[\"$\",\"h1\",null,{\"className\":\"text-4xl font-extrabold tracking-tight sm:text-5xl\",\"children\":\"The NativeBase Blog\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 max-w-2xl text-lg text-muted-foreground\",\"children\":\"Guides, changelogs, engineering deep-dives and announcements from the team.\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"container-page py-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs\",\"className\":\"rounded-full border px-4 py-1.5 text-sm transition-colors border-brand-400 bg-brand-600/10 text-brand-600\",\"children\":\"All\"}],[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"className\":\"rounded-full border px-4 py-1.5 text-sm transition-colors border-border text-muted-foreground hover:border-brand-400 hover:text-brand-600\",\"children\":\"Announcements\"}],[\"$\",\"$L6\",\"changelog\",{\"href\":\"/blogs/tag/changelog\",\"className\":\"rounded-full border px-4 py-1.5 text-sm transition-colors border-border text-muted-foreground hover:border-brand-400 hover:text-brand-600\",\"children\":\"Changelog\"}],[\"$\",\"$L6\",\"design\",{\"href\":\"/blogs/tag/design\",\"className\":\"rounded-full border px-4 py-1.5 text-sm transition-colors border-border text-muted-foreground hover:border-brand-400 hover:text-brand-600\",\"children\":\"Design\"}],[\"$\",\"$L6\",\"clone-experiment\",{\"href\":\"/blogs/tag/clone-experiment\",\"className\":\"rounded-full border px-4 py-1.5 text-sm transition-colors border-border text-muted-foreground hover:border-brand-400 hover:text-brand-600\",\"children\":\"Clone Experiments\"}],[\"$\",\"$L6\",\"engineering\",{\"href\":\"/blogs/tag/engineering\",\"className\":\"rounded-full border px-4 py-1.5 text-sm transition-colors border-border text-muted-foreground hover:border-brand-400 hover:text-brand-600\",\"children\":\"Engineering\"}]]]}],[\"$\",\"div\",null,{\"className\":\"mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"div\",\"why-we-built-gluestack-ui\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/why-we-built-gluestack-ui\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-full items-center justify-center px-6 text-center text-lg font-semibold text-brand-700/70 dark:text-brand-300/70\",\"children\":\"Why we built gluestack-ui\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/why-we-built-gluestack-ui\",\"className\":\"hover:text-brand-600\",\"children\":\"Why we built gluestack-ui\"}]}],\"$L16\",\"$L17\"]}]]}],\"$L18\",\"$L19\",\"$L1a\",\"$L1b\",\"$L1c\",\"$L1d\",\"$L1e\",\"$L1f\",\"$L20\",\"$L21\",\"$L22\",\"$L23\",\"$L24\",\"$L25\",\"$L26\",\"$L27\",\"$L28\",\"$L29\",\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\"]}],\"$L36\"]}]],null,\"$L37\"]}]\n"])</script>
1<script>self.__next_f.push([1,"38:[]\na:\"$W38\"\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L39\",null,{\"children\":\"$L3a\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L3b\",null,{\"children\":[\"$\",\"$3c\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L3d\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nd:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/3nc5abg018na-.css?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script>
1<script>self.__next_f.push([1,"3e:I[5014,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"default\"]\n3f:I[97367,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"OutletBoundary\"]\n10:[\"$\",\"a\",null,{\"href\":\"https://www.youtube.com/@gluestack\",\"aria-label\":\"YouTube\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-brand-600\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":true,\"className\":\"size-5\",\"children\":[\"$\",\"path\",null,{\"d\":\"M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2C0 8.07 0 12 0 12s0 3.93.5 5.8a3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.8ZM9.6 15.6V8.4l6.27 3.6L9.6 15.6Z\"}]}]}]\n11:[\"$\",\"a\",null,{\"href\":\"https://github.com/GeekyAnts/NativeBase\",\"aria-label\":\"GitHub\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-brand-600\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":true,\"className\":\"size-5\",\"children\":[\"$\",\"path\",null,{\"d\":\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"}]}]}]\n12:[\"$\",\"div\",\"Getting Started\",{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-sm font-semibold text-foreground\",\"children\":\"Getting Started\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 space-y-3\",\"children\":[[\"$\",\"li\",\"Introduction\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://docs.nativebase.io?utm_source=HomePage\u0026utm_medium=footer\u0026utm_campaign=NativeBase_3\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"Introduction\"}]}],[\"$\",\"li\",\"Examples\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://docs.nativebase.io/todo-list?utm_source=HomePage\u0026utm_medium=footer\u0026utm_campaign=NativeBase_3\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"Examples\"}]}],[\"$\",\"li\",\"Blogs\",{\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"children\":\"Blogs\"}]}],[\"$\",\"li\",\"Contribution Guidelines\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://github.com/GeekyAnts/NativeBase/blob/master/CONTRIBUTING.md\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"Contribution Guidelines\"}]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"13:[\"$\",\"div\",\"Products\",{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-sm font-semibold text-foreground\",\"children\":\"Products\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 space-y-3\",\"children\":[[\"$\",\"li\",\"gluestack\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://gluestack.io/?utm_source=nativebase-products\u0026utm_medium=referral\u0026utm_campaign=landing-footer\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"gluestack\"}]}],[\"$\",\"li\",\"RapidNative\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://rapidnative.com/?utm_source=nativebase-products\u0026utm_medium=referral\u0026utm_campaign=landing-footer\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"RapidNative\"}]}],[\"$\",\"li\",\"AppLighter\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://applighter.com/?utm_source=nativebase-products\u0026utm_medium=referral\u0026utm_campaign=landing-footer\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"AppLighter\"}]}],[\"$\",\"li\",\"GeekLego\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://geeklego.io/?utm_source=nativebase-products\u0026utm_medium=referral\u0026utm_campaign=landing-footer\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"GeekLego\"}]}],[\"$\",\"li\",\"AppLaunchKit\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://applaunchk.it/?utm_source=nativebase-products\u0026utm_medium=referral\u0026utm_campaign=landing-footer\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"AppLaunchKit\"}]}],[\"$\",\"li\",\"NativeBase Startup+\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://startup.nativebase.io/\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"NativeBase Startup+\"}]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"14:[\"$\",\"div\",\"More\",{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-sm font-semibold text-foreground\",\"children\":\"More\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 space-y-3\",\"children\":[[\"$\",\"li\",\"Privacy Policy\",{\"children\":[\"$\",\"$L6\",null,{\"href\":\"/privacy-policy\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"children\":\"Privacy Policy\"}]}],[\"$\",\"li\",\"Cookie Policy\",{\"children\":[\"$\",\"$L6\",null,{\"href\":\"/cookie-policy\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"children\":\"Cookie Policy\"}]}],[\"$\",\"li\",\"For Enterprise\",{\"children\":[\"$\",\"$L6\",null,{\"href\":\"/nativebase-for-enterprise\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-brand-600\",\"children\":\"For Enterprise\"}]}]]}]]}]\n15:[\"$\",\"div\",null,{\"className\":\"mt-12 flex flex-col items-center justify-between gap-4 border-t border-border/60 pt-8 sm:flex-row\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-muted-foreground\",\"children\":[\"Copyright © \",2026,\" NativeBase\"]}],[\"$\",\"a\",null,{\"href\":\"https://geekyants.com/?utm_source=RnD\u0026utm_medium=Landing_Page\u0026utm_campaign=NativeBase_3\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-sm text-muted-foreground hover:text-brand-600\",\"children\":\"Built with ❤️ at GeekyAnts.\"}]]}]\n16:[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"gluestack-ui v1.0 launched a month back and crossed 1000+ stars on GitHub. Here's why we built it and how it compares to its predecessor, NativeBase.\"}]\n17:[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Sanket Sahu\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"December 12, 2023\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"6 min read\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"18:[\"$\",\"div\",\"road-ahead-with-gluestack-ui\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/road-ahead-with-gluestack-ui\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/road-ahead-with-gluestack-ui.png\",\"alt\":\"Road Ahead with gluestack-ui: The Successor of NativeBase\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/road-ahead-with-gluestack-ui\",\"className\":\"hover:text-brand-600\",\"children\":\"Road Ahead with gluestack-ui: The Successor of NativeBase\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"NativeBase is being discontinued in favor of gluestack-ui, a complete rebuild addressing performance, maintainability, and bundle size. This post explains the rationale, what gluestack-ui offers, and what it means for existing users.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Sanket Sahu\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"July 24, 2023\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"4 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"19:[\"$\",\"div\",\"the-future-of-nativebase\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/the-future-of-nativebase\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/the-future-of-nativebase.png\",\"alt\":\"The future of NativeBase: March 2023\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/the-future-of-nativebase\",\"className\":\"hover:text-brand-600\",\"children\":\"The future of NativeBase: March 2023\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"An update on the state of NativeBase v3, its strengths and performance challenges, and the plan to split the library into dank.style and the new gluestack-ui components.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Sanket Sahu\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"March 1, 2023\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1a:[\"$\",\"div\",\"the-present-and-future-of-nativebase\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/the-present-and-future-of-nativebase\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-full items-center justify-center px-6 text-center text-lg font-semibold text-brand-700/70 dark:text-brand-300/70\",\"children\":\"The Present and Future of NativeBase\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/the-present-and-future-of-nativebase\",\"className\":\"hover:text-brand-600\",\"children\":\"The Present and Future of NativeBase\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A look at how NativeBase evolved through its versions, where it stands today with growing adoption, and the roadmap toward spec-based design systems and true write-once-deploy-everywhere development.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Sanket Sahu\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"October 3, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1b:[\"$\",\"div\",\"september-newsletter\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/september-newsletter\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/september-newsletter.png\",\"alt\":\"NativeBase | September Scoop\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/september-newsletter\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase | September Scoop\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"September highlights from the NativeBase team, including conference talks at React India and Devfest Bangalore, a performance-focused 3.5.0 release in progress, and new open-source contributors.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"NativeBase Team\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"September 28, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1c:[\"$\",\"div\",\"nativebase-moti-experiment\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/nativebase-moti-experiment\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/nativebase-moti-experiment.png\",\"alt\":\"NativeBase X Moti\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"engineering\",{\"href\":\"/blogs/tag/engineering\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Engineering\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/nativebase-moti-experiment\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase X Moti\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"An experiment exploring how NativeBase and Moti work together to animate UI components, using NativeBase Factory and the useStyledSystemPropsResolver hook to animate padding on a button.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Sankalp Pandey\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"September 8, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"5 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1d:[\"$\",\"div\",\"july-newsletter\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/july-newsletter\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/july-newsletter.png\",\"alt\":\"NativeBase | July Scoop\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/july-newsletter\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase | July Scoop\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"July highlights from NativeBase, including the React India conference announcement, the alpha release of the babel-plugin performance fix, the first Design System meetup, and new tutorials and blogs.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"NativeBase Team\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"August 22, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1e:[\"$\",\"div\",\"custom-fonts\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/custom-fonts\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-full items-center justify-center px-6 text-center text-lg font-semibold text-brand-700/70 dark:text-brand-300/70\",\"children\":\"Custom Fonts with NativeBase\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"engineering\",{\"href\":\"/blogs/tag/engineering\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Engineering\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/custom-fonts\",\"className\":\"hover:text-brand-600\",\"children\":\"Custom Fonts with NativeBase\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A complete guide to loading and applying custom fonts in NativeBase across React Native, Expo, and Next.js projects, including how to extend the theme's fontConfig and fonts objects.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Rohit Singh\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"August 19, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"10 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1f:[\"$\",\"div\",\"styling-nativebase-theme-based-on-color-mode\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/styling-nativebase-theme-based-on-color-mode\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/styling-nativebase-theme-based-on-color-mode.png\",\"alt\":\"Styling NativeBase theme based on color mode\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"engineering\",{\"href\":\"/blogs/tag/engineering\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Engineering\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/styling-nativebase-theme-based-on-color-mode\",\"className\":\"hover:text-brand-600\",\"children\":\"Styling NativeBase theme based on color mode\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A complete guide to building light and dark color modes in React Native apps with NativeBase, covering initial color mode, system color mode, the useColorMode and useColorModeValue hooks, _light and _dark pseudo props, toggling, and persistence.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Ankit Tailor\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"August 10, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"20:[\"$\",\"div\",\"june-newsletter\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/june-newsletter\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/june-newsletter.png\",\"alt\":\"NativeBase | June Scoop\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/june-newsletter\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase | June Scoop\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"June recap from NativeBase covering the HackWithNativeBase hackathon, appearances at App.js Conference, React Summit, and React Day Bangalore, plus the launch of the Component of the Week video series.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"NativeBase Team\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"July 20, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"21:[\"$\",\"div\",\"bridging-design-and-development-with-figma\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/bridging-design-and-development-with-figma\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/bridging-design-and-development-with-figma.jpg\",\"alt\":\"Bridging Design and Development with Figma\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"design\",{\"href\":\"/blogs/tag/design\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Design\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/bridging-design-and-development-with-figma\",\"className\":\"hover:text-brand-600\",\"children\":\"Bridging Design and Development with Figma\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"How designers and developers can collaborate more effectively using Figma, with practical tips on syncing early, extracting code, stacking elements, and leveraging design tokens.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Sony Gupta\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"July 15, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"10 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"22:[\"$\",\"div\",\"nativebase-chakraui-comparison\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/nativebase-chakraui-comparison\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/nativebase-chakraui-comparison.png\",\"alt\":\"NativeBase Vs Chakra UI: A comparison\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"engineering\",{\"href\":\"/blogs/tag/engineering\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Engineering\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/nativebase-chakraui-comparison\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase Vs Chakra UI: A comparison\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A detailed comparison of NativeBase and Chakra UI, covering their similarities, differences, and guidance on when to choose each library for your project.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Sankalp Pandey\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"July 15, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"9 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"23:[\"$\",\"div\",\"may-newsletter\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/may-newsletter\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/may-newsletter.png\",\"alt\":\"NativeBase | May Scoop\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/may-newsletter\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase | May Scoop\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A productive May for NativeBase: HackWithNativeBase goes live, v3.4.6 ships with fixes, the community crosses 4,000+ Twitter followers, and Discord support gets revamped.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"NativeBase Team\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"June 16, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"24:[\"$\",\"div\",\"hack-with-nativebase\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/hack-with-nativebase\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-full items-center justify-center px-6 text-center text-lg font-semibold text-brand-700/70 dark:text-brand-300/70\",\"children\":\"Announcing HackWithNativeBase\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/hack-with-nativebase\",\"className\":\"hover:text-brand-600\",\"children\":\"Announcing HackWithNativeBase\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"HackWithNativeBase is a hackathon for React and React Native developers to build cross-platform apps from a single codebase, with a grand prize pool and a Hack Day in Bengaluru.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"NativeBase Team\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"June 10, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"25:[\"$\",\"div\",\"april-newsletter\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/april-newsletter\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/april-newsletter.png\",\"alt\":\"NativeBase | April Scoop\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/april-newsletter\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase | April Scoop\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"April highlights from NativeBase: the v3.4 release with updated Figma kit, new community projects on Made with NativeBase, the Startup+ Design Trial Kit, and the return of in-person meetups.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"NativeBase Team\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"May 17, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"26:[\"$\",\"div\",\"nativebase-v3.4-release\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/nativebase-v3.4-release\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/nativebase-v3.4-release.png\",\"alt\":\"NativeBase v3.4 Changelog\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"changelog\",{\"href\":\"/blogs/tag/changelog\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Changelog\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/nativebase-v3.4-release\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase v3.4 Changelog\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"An overview of NativeBase v3.4, featuring theme decoupling, improved typing, multiple theme switching, APCA-tested colors, semantic colors, and a refreshed Figma design kit.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Rohit Singh\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"April 29, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"8 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"27:[\"$\",\"div\",\"responsive-login-payment-app\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/responsive-login-payment-app\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/responsive-login-payment-app.jpg\",\"alt\":\"Clone Experiment #4: Responsive login and checkout flow app for web \u0026 mobile\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"clone-experiment\",{\"href\":\"/blogs/tag/clone-experiment\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Clone Experiments\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/responsive-login-payment-app\",\"className\":\"hover:text-brand-600\",\"children\":\"Clone Experiment #4: Responsive login and checkout flow app for web \u0026 mobile\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A Nykaa-inspired login and checkout flow built with Next.js and NativeBase v3 to test component versatility and responsive design across web and mobile.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Sankalp Pandey\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"April 26, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"6 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"28:[\"$\",\"div\",\"march-newsletter\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/march-newsletter\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/march-newsletter.png\",\"alt\":\"NativeBase | March Scoop\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/march-newsletter\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase | March Scoop\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"March news from NativeBase: a sneak peek at the DSX design system creator, the Roofinder flatmate project, Startup+ admin and e-commerce guides, and a Raycast extension for browsing docs by version.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"NativeBase Team\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"April 14, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"29:[\"$\",\"div\",\"customising-components-in-nativebase\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/customising-components-in-nativebase\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/customising-components-in-nativebase.jpg\",\"alt\":\"Customising components in NativeBase\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"engineering\",{\"href\":\"/blogs/tag/engineering\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Engineering\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/customising-components-in-nativebase\",\"className\":\"hover:text-brand-600\",\"children\":\"Customising components in NativeBase\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A practical guide to customising NativeBase components, covering the four component theme properties (baseStyle, variants, sizes, defaultProps), the types of pseudo props, and how pseudo prop specificity works when styling a Button.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Mohd Rehman Baig\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"March 21, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"8 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"2a:[\"$\",\"div\",\"february-newsletter\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/february-newsletter\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/february-newsletter.png\",\"alt\":\"NativeBase | February Scoop\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/february-newsletter\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase | February Scoop\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"February recap from NativeBase: new and improved docs rebuilt with NativeBase, the launch of Made With NativeBase, a conference talk on building a template engine, the roadmap, and the v3.3.6 release.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"NativeBase Team\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"March 17, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"4 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"2b:[\"$\",\"div\",\"january-newsletter\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/january-newsletter\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/january-newsletter.png\",\"alt\":\"NativeBase | January Scoop\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/january-newsletter\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase | January Scoop\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"January highlights from NativeBase: the Design Kit launch, the first design meetup at GeekyAnts, real-time Notion-powered blog updates, a Twitter Spaces clone webinar, clone experiments, and the v3.3.4 release.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"NativeBase Team\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"February 24, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"2c:[\"$\",\"div\",\"taxi-clone-app\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/taxi-clone-app\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/taxi-clone-app.jpg\",\"alt\":\"Clone Experiment #3: Accessible Taxi Booking app for web and mobile\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"clone-experiment\",{\"href\":\"/blogs/tag/clone-experiment\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Clone Experiments\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/taxi-clone-app\",\"className\":\"hover:text-brand-600\",\"children\":\"Clone Experiment #3: Accessible Taxi Booking app for web and mobile\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A cross-platform Uber-inspired taxi booking app built with NativeBase and Expo, tackling unified maps and responsive sidebars from a single codebase.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Amar Somani\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"February 18, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"8 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"2d:[\"$\",\"div\",\"how-to-add-animations-to-your-nativebase-app\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/how-to-add-animations-to-your-nativebase-app\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/how-to-add-animations-to-your-nativebase-app.png\",\"alt\":\"How to add animations to your NativeBase App\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"engineering\",{\"href\":\"/blogs/tag/engineering\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Engineering\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/how-to-add-animations-to-your-nativebase-app\",\"className\":\"hover:text-brand-600\",\"children\":\"How to add animations to your NativeBase App\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A tutorial on enhancing a NativeBase Todo app with React Native Reanimated, building three animations: a button rotation effect, a background color transition on task completion, and a swipe-to-remove gesture.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Sankalp Pandey\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"February 9, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"7 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"2e:[\"$\",\"div\",\"the-only-react-and-react-native-template-you-will-ever-need\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/the-only-react-and-react-native-template-you-will-ever-need\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/the-only-react-and-react-native-template-you-will-ever-need.png\",\"alt\":\"The only React and React Native Template you'll ever need\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"engineering\",{\"href\":\"/blogs/tag/engineering\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Engineering\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/the-only-react-and-react-native-template-you-will-ever-need\",\"className\":\"hover:text-brand-600\",\"children\":\"The only React and React Native Template you'll ever need\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"An introduction to NativeBase Startup+, a bundle of 100+ production-ready React and React Native screens that helps teams avoid rebuilding generic screens and ship web and mobile apps faster.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Gaurav Guha\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"February 9, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"5 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"2f:[\"$\",\"div\",\"online-ticket-booking-universal-app\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/online-ticket-booking-universal-app\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/online-ticket-booking-universal-app.png\",\"alt\":\"Clone Experiment #2: Online Ticket Booking universal app for web \u0026 mobile using React Native\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"clone-experiment\",{\"href\":\"/blogs/tag/clone-experiment\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Clone Experiments\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/online-ticket-booking-universal-app\",\"className\":\"hover:text-brand-600\",\"children\":\"Clone Experiment #2: Online Ticket Booking universal app for web \u0026 mobile using React Native\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A MakeMyTrip-inspired hotel and flight checkout flow built with Next.js and NativeBase v3, exploring animations, tabs, and responsive layouts.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Abhineet Kumar\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"February 2, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"5 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"30:[\"$\",\"div\",\"building-twitter-space-clone-with-nativebase-and-100ms\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/building-twitter-space-clone-with-nativebase-and-100ms\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/building-twitter-space-clone-with-nativebase-and-100ms.png\",\"alt\":\"Building a Twitter Spaces Clone with NativeBase and 100ms\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"clone-experiment\",{\"href\":\"/blogs/tag/clone-experiment\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Clone Experiments\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/building-twitter-sp
1ace-clone-with-nativebase-and-100ms\",\"className\":\"hover:text-brand-600\",\"children\":\"Building a Twitter Spaces Clone with NativeBase and 100ms\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A workshop companion guide to building a Twitter Spaces clone in React Native, combining NativeBase for UI and the 100ms SDK for live audio rooms.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Vipul Bhardwaj\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"January 25, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"5 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"31:[\"$\",\"div\",\"clone-experiment-food-ordering-app\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/clone-experiment-food-ordering-app\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/clone-experiment-food-ordering-app.jpg\",\"alt\":\"Clone Experiment: Food Ordering web \u0026 mobile app using a single codebase\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"clone-experiment\",{\"href\":\"/blogs/tag/clone-experiment\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Clone Experiments\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/clone-experiment-food-ordering-app\",\"className\":\"hover:text-brand-600\",\"children\":\"Clone Experiment: Food Ordering web \u0026 mobile app using a single codebase\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A food ordering app inspired by popular delivery platforms, built once with NativeBase and Next.js to run across web and mobile from a single codebase.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Eshu Kumar\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"January 13, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"3 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"32:[\"$\",\"div\",\"nativebase-clone-experiments\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/nativebase-clone-experiments\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/nativebase-clone-experiments.png\",\"alt\":\"NativeBase Clone Experiments\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"clone-experiment\",{\"href\":\"/blogs/tag/clone-experiment\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Clone Experiments\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/nativebase-clone-experiments\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase Clone Experiments\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"An overview of the NativeBase Clone Experiments series, where developers recreate famous app experiences using a single codebase for web and mobile.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Sanket Sahu\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"January 13, 2022\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"4 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"33:[\"$\",\"div\",\"nativebase-meets-figma\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/nativebase-meets-figma\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/nativebase-meets-figma.jpg\",\"alt\":\"NativeBase meets Figma\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"design\",{\"href\":\"/blogs/tag/design\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Design\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/nativebase-meets-figma\",\"className\":\"hover:text-brand-600\",\"children\":\"NativeBase meets Figma\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"An introduction to the NativeBase Design Kit for Figma, bringing design and development together with 29 components and over 780 variants that match the NativeBase library.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Tanisha Biswas\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"December 27, 2021\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"5 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"34:[\"$\",\"div\",\"using-nativebase-v3-the-right-way\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/using-nativebase-v3-the-right-way\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/using-nativebase-v3-the-right-way.jpg\",\"alt\":\"Using NativeBase v3 the Right Way\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"engineering\",{\"href\":\"/blogs/tag/engineering\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Engineering\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/using-nativebase-v3-the-right-way\",\"className\":\"hover:text-brand-600\",\"children\":\"Using NativeBase v3 the Right Way\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"A practical introductory guide to getting the most out of NativeBase v3, covering project setup, utility props, single-source imports, pseudo props, hooks, and strict mode.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Rohit Singh\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"October 17, 2021\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"5 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"35:[\"$\",\"div\",\"announcing-nativebase\",{\"data-slot\":\"card\",\"className\":\"gap-6 rounded-xl border bg-card text-card-foreground shadow-sm group flex flex-col overflow-hidden p-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"/blogs/announcing-nativebase\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative aspect-[16/9] w-full overflow-hidden bg-gradient-to-br from-brand-400/20 to-brand-700/20\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/blog/announcing-nativebase.jpg\",\"alt\":\"Announcing NativeBase\",\"fill\":true,\"className\":\"object-cover transition-transform duration-300 group-hover:scale-105\",\"sizes\":\"(max-width: 768px) 100vw, 33vw\"}]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L6\",\"announcements\",{\"href\":\"/blogs/tag/announcements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3 bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 hover:bg-brand-600/10\",\"children\":\"Announcements\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold leading-snug\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"/blogs/announcing-nativebase\",\"className\":\"hover:text-brand-600\",\"children\":\"Announcing NativeBase\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground\",\"children\":\"Announcing NativeBase 3.0, a utility-first, themable, and accessible component library for building universal React and React Native apps across web and mobile.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex items-center gap-3 border-t border-border/60 pt-4 text-xs text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Siri Kaliparambil\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"September 27, 2021\"}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"5 min read\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"36:[\"$\",\"div\",null,{\"className\":\"mt-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-4 sm:grid-cols-2\",\"children\":[[\"$\",\"a\",\"GeekyAnts\",{\"href\":\"https://geekyants.com/hire-react-native-developers?utm_source=nativebase\u0026utm_medium=blog\u0026utm_campaign=blog-cta\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"group flex flex-col rounded-2xl border border-border bg-card p-6 transition-colors hover:border-brand-300\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted ring-1 ring-border\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/geekyants-logo.png\",\"alt\":\"GeekyAnts\",\"width\":40,\"height\":40,\"className\":\"size-full object-cover\"}]}],[\"$\",\"span\",null,{\"className\":\"text-sm font-semibold uppercase tracking-[0.12em] text-brand-600\",\"children\":\"GeekyAnts\"}]]}],[\"$\",\"h3\",null,{\"className\":\"mt-4 text-lg font-semibold\",\"children\":\"Need React Native experts?\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 flex-1 text-sm text-muted-foreground\",\"children\":\"Hire the team behind NativeBase to design and build your next app.\"}],[\"$\",\"span\",null,{\"className\":\"mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-brand-600\",\"children\":[\"Hire experts\",[\"$\",\"$L3e\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M5 12h14\",\"key\":\"1ays0h\"}],[\"path\",{\"d\":\"m12 5 7 7-7 7\",\"key\":\"xquz4c\"}]],\"className\":\"lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\"}]]}]]}],[\"$\",\"a\",\"RapidNative\",{\"href\":\"https://rapidnative.com/?utm_source=nativebase\u0026utm_medium=blog\u0026utm_campaign=blog-cta\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"group flex flex-col rounded-2xl border border-border bg-card p-6 transition-colors hover:border-brand-300\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted ring-1 ring-border\",\"children\":[\"$\",\"$Le\",null,{\"src\":\"/img/products/rapidnative.png\",\"alt\":\"RapidNative\",\"width\":40,\"height\":40,\"className\":\"size-full object-cover\"}]}],[\"$\",\"span\",null,{\"className\":\"text-sm font-semibold uppercase tracking-[0.12em] text-brand-600\",\"children\":\"RapidNative\"}]]}],[\"$\",\"h3\",null,{\"className\":\"mt-4 text-lg font-semibold\",\"children\":\"Vibecode your mobile app\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 flex-1 text-sm text-muted-foreground\",\"children\":\"Describe it, build it, ship it. Turn a prompt into a React Native app with AI.\"}],[\"$\",\"span\",null,{\"className\":\"mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-brand-600\",\"children\":[\"Try RapidNative\",[\"$\",\"$L3e\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$36:props:children:props:children:0:props:children:3:props:children:1:props:iconNode\",\"className\":\"lucide-arrow-right size-4 transition-transform group-hover:translate-x-0.5\"}]]}]]}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"37:[\"$\",\"$L3f\",null,{\"children\":[\"$\",\"$3c\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@40\"}]}]\n"])</script>
1<script>self.__next_f.push([1,"3a:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
1<script>self.__next_f.push([1,"41:I[27201,[\"/_next/static/chunks/2pvlchz6oc678.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/3eq7ec31tpmmq.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/05oyupmp00r1l.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"/_next/static/chunks/1qqshyfnrb-q4.js?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\"],\"IconMark\"]\n"])</script>
1<script>self.__next_f.push([1,"3d:[[\"$\",\"title\",\"0\",{\"children\":\"Blog | NativeBase\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Guides, changelogs, engineering deep-dives and announcements from the NativeBase team.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"NativeBase\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"Open Source,OSS,Component Library,React,React Native,Accessible,Mobile-First,Styled System,ARIA,Consistent,Responsive,Utility Props,Design System\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://nativebase.io/blogs\"}],[\"$\",\"meta\",\"5\",{\"name\":\"google-site-verification\",\"content\":\"CrITr8VxlSHTwFPrOKF1iC4Rp00Cm9ndrBAvxBQd6-M\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Blog | NativeBase\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"Guides, changelogs, engineering deep-dives and announcements from the NativeBase team.\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:url\",\"content\":\"https://nativebase.io/blogs\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:site_name\",\"content\":\"NativeBase\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image\",\"content\":\"https://nativebase.io/img/nativebase-og-image.png\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:alt\",\"content\":\"Guides, changelogs, engineering deep-dives and announcements from the NativeBase team.\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:site\",\"content\":\"@nativebase\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:title\",\"content\":\"Blog | NativeBase\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:description\",\"content\":\"Guides, changelogs, engineering deep-dives and announcements from the NativeBase team.\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:image\",\"content\":\"https://nativebase.io/img/nativebase-og-image.png\"}],[\"$\",\"link\",\"18\",{\"rel\":\"shortcut icon\",\"href\":\"/img/nativebase-logo.ico\"}],[\"$\",\"link\",\"19\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.2vob68tjqpejf.ico?dpl=dpl_6PcC6LiMh5P3spG3oYLi6VNAbeJo\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/img/nativebase-logo.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/img/nativebase-logo.ico\",\"sizes\":\"any\"}],[\"$\",\"link\",\"22\",{\"rel\":\"apple-touch-icon\",\"href\":\"/img/nativebase-logo.png\"}],[\"$\",\"$L41\",\"23\",{}]]\n"])</script>
1<script>self.__next_f.push([1,"40:null\n"])</script>
1</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.