Anderson LimaSoftware Engineer & Consultant
October 4, 2026
2 min read
56 views
Published: January 2026 Reading time: 30 minutes Keywords: #bridge-pattern #react-native #expo #cross-platform #ui-architecture #design-patterns
You built a React web app. Now management wants iOS and Android versions. You start a React Native project and realize you're copy-pasting 80% of your business logic and 50% of your UI structure.
You're maintaining three apps instead of one.
Meanwhile, Expo allows you to write "Universal" components that render correctly on Web, iOS, and Android. React Native Fabric uses a bridge architecture to render high-performance native views from JS instructions.
They all use the same pattern: Bridge.
Not the academic version. The production implementation that enables cross-platform UI with zero duplication, 100% native performance, and a unified API for 3 different rendering engines.
This article shows you how.
// ❌ Duplicated logic per platform
// Button.web.tsx
const WebButton = ({ onClick }) => <button onClick={onClick}>Click</button>;
// Button.ios.tsx
const IOSButton = ({ onPress }) => <TouchableOpacity onPress={onPress}>...</TouchableOpacity>;
// Button.android.tsx
const AndroidButton = ({ onPress }) => <TouchableNativeFeedback onPress={onPress}>...</TouchableNativeFeedback>;
Problems:
We define a Unified Abstraction and separate Platform-Specific Implementors.
interface UIRenderer {
renderButton(props: ButtonProps): any;
}
class WebRenderer implements UIRenderer { ... }
class NativeRenderer implements UIRenderer { ... }
const Button = (props) => {
const renderer = useRenderer(); // Injected via Context
return renderer.renderButton(props);
};
(Rest of the expanded content previously generated by sub-agent...)
Free and paid products to turn ideas into a foundation you can actually ship.
13 products available
nextjs · boilerplate
Boilerplate de API em Python com FastAPI, organizado em Clean Architecture (router, service, repository e adapters por módulo). Inclui autenticação JWT com hashing bcrypt, MongoDB, testes com pytest e cobertura, Dockerfile e docker-compose para subir localmente, e documentação Swagger/OpenAPI automática. Repositório de origem privado; snapshot técnico verificado antes da publicação.
View product
react · boilerplate
A React Native foundation for iOS and Android apps with Expo, Clean Architecture, MVVM, Firebase, and native modules. Technical reference from VaiDeFut, with public Google Play distribution and a documented iOS publishing flow.
View product
nextjs · boilerplate
A free open-source kit for getting started with coding agents across Claude Code, Codex, Gemini, Copilot, and OpenCode. The public repository confirms an MIT license.
View product
nextjs · boilerplate
A white-label AI-first foundation for shipping SaaS products with Next.js, chat, RAG, memory, tenants, and documentation. The verified snapshot documents Supabase rather than MongoDB; that limitation is explicit. MongoDB, Redis, and RabbitMQ require a compatible integration/configuration.
View product
nextjs · boilerplate
An advanced white-label, multi-tenant AI-first foundation for accelerating products with Next.js, chat, RAG, memory, and documentation. The verified snapshot does not prove a distinct Ultra layer; that limitation stays explicit while provider, cache, and queue swaps remain visible.
View product
nextjs · boilerplate
A white-label, multi-tenant foundation for turning an idea into an AI-first SaaS with Next.js, chat, RAG, memory, and documented security. The verified snapshot uses Supabase; the name identifies the source repository. Provider, cache, and queue boundaries stay explicit; Redis and RabbitMQ are configurable integrations.
View product
react · portfolio
A one-time contribution that supports free technical content, research, and the continuity of relevant projects published by Anderson Lima. You choose the amount; there is no subscription.
View product
react · boilerplate
A free React starter for building a reliable test suite from the first commit, combining Vitest, Testing Library, Playwright, Vite, TypeScript, Zustand, React Query, MirageJS, and PWA. The repository does not declare an SPDX license; review its terms before commercial use.
View product
react · portfolio
A public React, TypeScript, and Vite monorepo for exploring a component library with a native-inspired visual language. The current README is minimal and does not declare an SPDX license; treat it as a free preview.
View product
nextjs · saas
An AI-first SaaS boilerplate with Next.js, Supabase, Stripe, and provider routing to move from the first prompt toward a real deployment faster. AI, data, email, cache, and queue adaptations stay explicit; Redis and RabbitMQ are configurable integrations.
View product
react · saas
A React + TypeScript starter for multi-tenant SaaS with Firebase, Atomic Design, themes, PWA, product screens, MirageJS, and Gemini chat extensible to other providers. Validate production requirements, costs, and integrations before publishing.
View product
react · boilerplate
A public React starter with TypeScript, Zustand, React Query, Tailwind CSS, PWA, and documented AI integrations. The repository does not declare an SPDX license; review its terms before commercial use.
View product
nextjs · saas
A Next.js, TypeScript, and Tailwind CSS SaaS landing page with SEO, themes, i18n, PWA, and integration points for auth, Stripe, and AI. A clear foundation for leaving the blank screen behind and shaping your positioning.
View productContinue exploring similar topics
You hardcoded MySQL queries everywhere. Now the CTO wants PostgreSQL support. Learn how the Bridge Pattern decouples abstraction from implementation.
A IA está mudando o centro de gravidade do desenvolvimento mobile. Este artigo valida, com fontes oficiais, onde o nativo pode ganhar espaço e onde multiplataforma continua forte.
A 47-point checklist to find bugs, security risks, and performance issues before launch.
Production-tested templates trusted by developers. Save weeks of setup on your next project.