Kotlin Multiplatform vs React Native: qual escolher em 2026?
Kotlin Multiplatform (KMP) e React Native (RN) representam abordagens distintas para desenvolvimento cross-platform. Enquanto KMP compartilha lógica de negócio mantendo UI nativa, React Native renderiza componentes nativos a partir de JavaScript/TypeScript. Este artigo analisa ambas as opções em profundidade para orientar sua decisao técnica.
Visao geral
| Caracteristica | Kotlin Multiplatform | React Native |
|---|---|---|
| Empresa | JetBrains | Meta (Facebook) |
| Linguagem | Kotlin | JavaScript/TypeScript |
| Arquitetura | Compilação nativa | Bridge / New Architecture (JSI) |
| Compartilhamento | Logica de negócio | Logica + UI |
| Componentes UI | Nativos (SwiftUI/Compose) | Nativos via bridge |
| Hot reload | Limitado | Fast Refresh |
| Ecossistema web | Separado | Compartilha com React |
| Tipagem | Estática forte | Dinamica (TS: estática) |
Arquitetura e funcionamento
Kotlin Multiplatform
KMP compila código Kotlin para cada plataforma alvo. No Android, gera bytecode JVM. No iOS, gera código nativo ARM via Kotlin/Native. Nao há runtime intermediário nem bridge de comunicação. O código compartilhado e executado com a mesma performance de código nativo porque ele e código nativo.
// commonMain - compartilhado entre plataformas
class ProdutoRepositorio(
private val api: ProdutoApi,
private val cache: ProdutoCache
) {
suspend fun buscarProdutos(categoria: String): List<Produto> {
val cacheados = cache.buscar(categoria)
if (cacheados.isNotEmpty()) return cacheados
val produtos = api.listarPorCategoria(categoria)
cache.salvar(categoria, produtos)
return produtos
}
suspend fun buscarDetalhes(id: Long): ProdutoDetalhes {
return api.detalhes(id)
}
}
// commonMain - ViewModel compartilhado
class CatalogoViewModel(
private val repositorio: ProdutoRepositorio
) : ViewModel() {
private val _produtos = MutableStateFlow<List<Produto>>(emptyList())
val produtos: StateFlow<List<Produto>> = _produtos.asStateFlow()
private val _carregando = MutableStateFlow(false)
val carregando: StateFlow<Boolean> = _carregando.asStateFlow()
fun carregar(categoria: String) {
viewModelScope.launch {
_carregando.value = true
try {
_produtos.value = repositorio.buscarProdutos(categoria)
} finally {
_carregando.value = false
}
}
}
}
React Native
React Native executa JavaScript em um motor JS (Hermes) e comunica com componentes nativos. A New Architecture (introduzida no RN 0.74+) usa JSI (JavaScript Interface) para comunicação sincrona com o lado nativo, eliminando a bridge assíncrona antiga:
// React Native com TypeScript
interface Produto {
id: number;
nome: string;
preco: number;
categoria: string;
}
const useProdutos = (categoria: string) => {
const [produtos, setProdutos] = useState<Produto[]>([]);
const [carregando, setCarregando] = useState(false);
const carregar = useCallback(async () => {
setCarregando(true);
try {
const resposta = await fetch(`https://api.exemplo.com/produtos?cat=${categoria}`);
const dados: Produto[] = await resposta.json();
setProdutos(dados);
} catch (erro) {
console.error('Erro ao carregar produtos:', erro);
} finally {
setCarregando(false);
}
}, [categoria]);
useEffect(() => {
carregar();
}, [carregar]);
return { produtos, carregando, recarregar: carregar };
};
const TelaCatalogo: React.FC = () => {
const { produtos, carregando } = useProdutos('eletronicos');
if (carregando) return <ActivityIndicator />;
return (
<FlatList
data={produtos}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<View style={styles.card}>
<Text style={styles.nome}>{item.nome}</Text>
<Text style={styles.preco}>R$ {item.preco.toFixed(2)}</Text>
</View>
)}
/>
);
};
Performance
A performance e uma das maiores diferenças entre as duas abordagens.
| Metrica | KMP | React Native |
|---|---|---|
| Startup (cold) | Nativo | +200-500ms (JS engine) |
| Logica de negócio | Compilada nativa | Interpretada (Hermes) |
| Renderizacao UI | Nativa direta | Nativa via bridge/JSI |
| Animacoes | 60/120fps nativo | Reanimated: 60/120fps |
| Uso de memória | Nativo | +30-50MB (JS runtime) |
| Operações CPU intensivas | Nativo | 2-10x mais lento |
Para operações de I/O (rede, banco de dados), a diferenca e minima porque ambos delegam para código nativo. Para operações CPU intensivas como criptografia, processamento de imagem ou calculos complexos, KMP tem vantagem significativa porque o código e compilado nativamente.
React Native com a New Architecture e Hermes melhorou consideravelmente, mas ainda carrega o overhead de um runtime JavaScript.
Compartilhamento de código
KMP: lógica compartilhada, UI nativa
projeto-kmp/
shared/
commonMain/ --> Logica compartilhada (Kotlin)
androidMain/ --> Implementacoes Android
iosMain/ --> Implementacoes iOS
androidApp/ --> UI Android (Compose)
iosApp/ --> UI iOS (SwiftUI)
O código compartilhado tipicamente inclui: modelos de dados, repositórios, view models, validacoes, lógica de negócio, networking e acesso a banco. A UI e 100% nativa.
React Native: quase tudo compartilhado
projeto-rn/
src/
components/ --> Componentes UI (React Native)
hooks/ --> Logica compartilhada
services/ --> API e serviços
screens/ --> Telas
android/ --> Código nativo Android (minimo)
ios/ --> Código nativo iOS (minimo)
React Native compartilha entre 85-95% do código, incluindo UI. Código nativo específico e necessário apenas para funcionalidades de plataforma sem modulo RN disponivel.
Segurança de tipos
Kotlin oferece tipagem estática forte nativa. TypeScript adiciona tipos a JavaScript, mas a verificação e em tempo de compilação apenas e pode ser burlada:
// Kotlin: segurança de tipos garantida pelo compilador
data class Pedido(
val id: Long,
val valor: Double,
val itens: List<ItemPedido>
)
fun calcularTotal(pedido: Pedido): Double {
return pedido.itens.sumOf { it.preco * it.quantidade }
}
// Impossivel chamar com tipos errados
// TypeScript: tipos podem ser contornados
interface Pedido {
id: number;
valor: number;
itens: ItemPedido[];
}
function calcularTotal(pedido: Pedido): number {
return pedido.itens.reduce((acc, item) => acc + item.preco * item.quantidade, 0);
}
// 'any' pode contornar a tipagem
const resultado = calcularTotal({} as any); // compila mas falha em runtime
Ecossistema e comunidade
React Native
React Native tem uma comunidade enorme e anos de maturidade. O ecossistema npm oferece bibliotecas para quase tudo, e desenvolvedores web com React podem transicionar rapidamente. Empresas como Meta, Microsoft, Shopify e Discord usam React Native em producao.
Kotlin Multiplatform
KMP tem uma comunidade menor mas em crescimento acelerado. Empresas como Netflix, McDonald’s, VMware e Philips adotaram KMP. O ecossistema de bibliotecas KMP e menor que o de RN, mas cobre as necessidades principais e permite acesso a qualquer biblioteca nativa de cada plataforma.
Integração com equipes existentes
Equipe Android + iOS
Se você tem desenvolvedores Android (Kotlin) e iOS (Swift) separados, KMP permite que a equipe Android escreva o código compartilhado e a equipe iOS continue usando Swift para a UI. A transicao e gradual e não requer que ninguem aprenda uma nova linguagem para sua plataforma.
Equipe web (React)
Se você tem desenvolvedores React web, React Native e a escolha natural. Eles já conhecem React, JSX, hooks e o ecossistema npm. A transicao para mobile e suave, e muitos conceitos são transferiveis.
Quando usar cada um
Escolha Kotlin Multiplatform quando:
- Performance nativa e requisito crítico
- A equipe já tem desenvolvedores Android com Kotlin
- Você quer UI que siga perfeitamente as guidelines de cada plataforma
- O app precisa de operações CPU intensivas
- Segurança de tipos forte e prioridade
- Você quer adotar compartilhamento incrementalmente
Escolha React Native quando:
- A equipe vem do ecossistema web/React
- Velocidade de desenvolvimento e prioridade sobre performance pura
- O app e predominantemente baseado em telas de formularios e listagens
- Você quer maximizar o compartilhamento de código (incluindo UI)
- Fast Refresh para iteracao rápida e importante
- Você também precisa de uma versão web (React Native Web)
Veredito
Em 2026, ambas as tecnologias são opções solidas para desenvolvimento cross-platform. KMP e superior quando performance nativa, segurança de tipos e experiência de plataforma são prioridades. React Native e superior quando velocidade de desenvolvimento, maximizacao de compartilhamento de código e aproveitamento de conhecimento web são mais importantes.
A escolha ideal depende da composição da sua equipe e das prioridades do projeto. Se sua equipe e forte em Kotlin/Swift e você quer a melhor experiência nativa possível, KMP e o caminho. Se sua equipe e forte em JavaScript/TypeScript e você quer entregar rápido com maximo compartilhamento, React Native e a resposta. Nenhuma escolha e errada – ambas resolvem o problema de cross-platform de formas diferentes e complementares.